Ausfüllen von Feldern in modaler Form mit PHP, jQuery

*Aktualisiert, um alle Felder einzubeziehen, die Sie bearbeiten

Es klingt, als hätten Sie die richtige Idee. Wahrscheinlich möchten Sie ein neues div auf Ihrer Seite für den modalen Dialog bearbeiten erstellen.

<div id="dialog-edit" style="background-color:#CCC;display:none;">
    <input type="hidden" id="editLinkId" value="" />
    Link Name: <input type="text" id="txtLinkTitle" class="text" />
    Link Description <input type="text" id="txtLinkDescription" class="text" />
    Link URL <input type="text" id="txtLinkURL" class="text" />
</div>

Wenn der Benutzer auf Ihre Schaltfläche „Bearbeiten“ klickt, sollten Sie das ausgeblendete Feld und das Textfeld mit den Werten des Links füllen, auf den er geklickt hat, und dann den Dialog aktivieren.

$('.edit').click(function () {
            //populate the fields in the edit dialog. 
            var parent = $(this).closest('div');
            var id = parent.attr('id');

            $("#editLinkId").val(id);

            //get the title field
            var title = $(parent).find('.linkHeader').html();
            var description = $(parent).find('.linkDescription p').html();
            var url = $(parent).find('.linkDescription span a').attr("href");
            $("#txtLinkTitle").val(title);
            $("#txtLinkDescription").val(description);
            $("#txtLinkURL").val(url);

            $("#dialog-edit").dialog({
                bgiframe: true,
                autoOpen: false,
                width: 400,
                height: 400,
                modal: true,
                title: 'Update Link',
                buttons: {
                    'Update link': function () {
                        //code to update link goes here...most likely an ajax call.

                        var linkID = $("#linkID").val();
                        var linkTitle = $("#txtLinkTitle").val()
                        var linkDescription = $("#txtLinkDescription").val()
                        var linkURL = $("#txtLinkURL").val()
                        $.ajax({
                            type: "GET",
                            url: "ajax_calls.php?function=updateLink&linkID=" + linkID + "&linkTitle=" + linkTitle + "&linkDescription=" + linkDescription + "&linkURL=" + linkURL,
                            dataType: "text",
                            error: function (request, status, error) {
                                alert("An error occured while trying to complete your request: " + error);
                            },
                            success: function (msg) {
                                //success, do something 
                            },
                            complete: function () {
                                //do whatever you want 
                            }
                        }); //end ajax
                        //close dialog
                        $(this).dialog('close');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                },
                close: function () {
                    $(this).dialog("destroy");
                }
            }); //end .dialog()

            $("#dialog-edit").show();
            $("#dialog-edit").dialog("open");

        }) //end edit click