使用PHP，jQuery以模式形式填充字段 [英] Populating fields in modal form using PHP, jQuery

问题描述

我有一个表单，可以将链接添加到数据库，将其删除，并且-很快-允许用户编辑详细信息.我在此项目上大量使用jQuery和Ajax，并希望将所有控件保留在同一页面中.过去，要处理诸如有关其他网站的详细信息(链接条目)之类的事情，我会将用户发送到另一个PHP页面，其中的表单字段由MySQL数据库表中的PHP填充.我该如何使用jQuery UI模态形式并为该特定条目单独调用详细信息来完成此操作?

I have a form that adds links to a database, deletes them, and -- soon -- allows the user to edit details. I am using jQuery and Ajax heavily on this project and would like to keep all control in the same page. In the past, to handle editing something like details about another website (link entry), I would have sent the user to another PHP page with form fields populated with PHP from a MySQL database table. How do I accomplish this using a jQuery UI modal form and calling the details individually for that particular entry?

这是我到目前为止所拥有的-

Here is what I have so far-

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

And here is the jQuery that I am using to delete entries-

$(".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;
});

一切正常，只需要找到一种解决方案即可进行编辑.谢谢！

Everything is working just fine, just need to find a solution to edit. Thanks!

推荐答案

*已更新为包括您正在编辑的所有字段

听起来您的想法正确.您可能希望在页面上为编辑模式对话框创建一个新的div.

It sounds like you have the right idea. You would probably want to create a new div on your page for the edit modal dialog.

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

当用户单击您的编辑按钮时，您需要使用其单击的链接的值填充隐藏的字段和文本框，然后打开对话框.

When the user clicks your edit button you'll want to populate the hidden field and the text box with the values of the link they clicked on and then turn the dialog on.

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

这篇关于使用PHP，jQuery以模式形式填充字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！