Заполнение полей в модальной форме с использованием PHP, jQuery

Question

У меня есть форма, которая добавляет ссылки на базу данных, удаляет их и - скоро - позволяет пользователю редактировать детали. Я активно использую jQuery и Ajax в этом проекте и хотел бы сохранить все управление на одной странице. В прошлом для обработки чего-то вроде деталей о другом веб-сайте (запись ссылки) я бы отправлял пользователя на другую страницу PHP с полями формы, заполненными PHP из таблицы базы данных MySQL. Как мне сделать это, используя модальную форму пользовательского интерфейса jQuery и вызывая детали отдельно для этой конкретной записи?

Вот то, что я имею до сих пор -

<?php while ($linkDetails = mysql_fetch_assoc($getLinks)) {?>
<div class="linkBox ui-corner-all" id="linkID<?php echo $linkDetails['id'];?>">
<div class="linkHeader"><?php echo $linkDetails['title'];?></div>
<div class="linkDescription"><p><?php echo $linkDetails['description'];?></p>
<p><strong>Link:</strong><br/>
<span class="link"><a href="<?php echo $linkDetails['url'];?>" target="_blank"><?php echo $linkDetails['url'];?></a></span></p></div>
<p align="right">
<span class="control">
<span class="delete addButton ui-state-default">Delete</span> 
<span class="edit addButton ui-state-default">Edit</span>
</span>
</p>
</div>
<?php }?>

А вот jQuery, который я использую для удаления записей-

$(".delete").click(function() {
      var parent = $(this).closest('div');
      var id = parent.attr('id');
      $("#delete-confirm").dialog({
                     resizable: false,
                     modal: true,
                     title: 'Delete Link?',
                     buttons: {
                         'Delete': function() {
      var dataString = 'id='+ id ;
         $.ajax({
         type: "POST",
         url: "../includes/forms/delete_link.php",
         data: dataString,
         cache: false,
         success: function()
         {
          parent.fadeOut('slow');
          $("#delete-confirm").dialog('close');    
         }
        });                                
                         },
                         Cancel: function() {
                            $(this).dialog('close');
                         }
                     }
                 });
       return false;
});

Все работает просто отлично, просто нужно найти решение для редактирования. Спасибо!

Answer 1

* Обновлено, чтобы включить все поля, которые вы редактируете

Похоже, у вас правильная идея. Возможно, вы захотите создать новый div на своей странице для редактирования модального диалога.

<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>

Когда пользователь нажимает вашу кнопку редактирования, вам нужно заполнить скрытое поле и текстовое поле значениями ссылки, по которой они щелкнули, и затем включить диалог.

$('.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

Answer 2

Решается простым переносом каждой строки текста из PHP в <span class="theseDetails">blahblah</span> и использованием $(".theseDetails").text(); .... очень простое решение. :)