Jquery - 当对话框窗口打开时从数据库中获取数据

我有一个窗体，在窗体上有一个记录表。每条记录来自mysql数据库，每条记录在数据库中都有自己唯一的ID。我正在使用Jquery UI对话框库，每条记录旁边都有一个编辑链接。当一个人点击编辑时，调用该对话框打开，显示窗体的模式窗口以编辑该特定记录。我的问题是，当对话框打开时，如何通过jquery/ajax进行调用，以便我可以从数据库中为该记录获取最新数据，然后填充对话框窗体中的字段？现在，我只需打开一个链接被点击时，对话框：Jquery - 当对话框窗口打开时从数据库中获取数据

$("a.editlink").click(function() { 

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

    return false; 

});

来源

2012-04-17 John

你会希望把Ajax调用在你的对话框的js代码的公开组：

$("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Create an account": function() { 

        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
        $(this).dialog("close"); 
     }, 
        open: function(){ 
     PUT AJAX CALL HERE 
     } 
    });

并把innerHTML的入阿贾克斯成功把结果放到对话框中：

function ajaxSuccess(data){ 
        dialogformfields.innerHTML=data.info; 
        }

希望这就是你需要知道的！

来源

2012-04-17 01:38:55

我喜欢这种方法，但是有一件事我难以理解，我会如何将链接中的id传递给打开的函数，以便将它传递给我的ajax调用？因此，让我们说在父页面上，我有一个像这样的链接Edit当他们点击我打开对话框时，如何从我刚刚从打开的函数中点击的链接访问标题属性？ – John 2012-04-17 01:58:21

好的，将你的初始函数改为： $（“a.editlink”）。click（function（this）在这个DO AJAX调用中.title $（“＃edit-form”）。dialog（“open “）; ... – 2012-04-17 16:52:57

里面的点击功能，你需要做一个Ajax调用来检索使用http://api.jquery.com/jQuery.ajax/

在Ajax调用的成功方法的信息您可以将返回值分配给表单上的输入字段。

我不知道你的后端是什么技术，所以你只需要确保以可读的方式返回值（即JSON）。

唯一要考虑的是，用户点击编辑时，这会很慢。如果页面没有太多数据，可能值得将附加属性存储在被点击的锚点标记中，以便立即填充编辑表单。

即。有一个锚标记，看起来像这样：

<a class="editlink" data-field1='stuff' data-field2='stuff' data-field3='stuff'>Text</a>

来源

2012-04-17 01:36:13

您的标记是否将href值设置为editform可用的页面。您使用querystring将记录的id传递到此页面，以便您可以将该记录的详细信息加载到编辑表单。

<a href="edtiuser.php?userid=1">Edit User 1</a> 
<a href="edtiuser.php?userid=2">Edit User 2</a>

并且有这个脚本。

$(function(){ 
     $("a.editlink").click(function (e) { 
      var url = this.href; 
      var dialog = $("#dialog"); 
      if ($("#dialog").length == 0) { 
       dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body'); 
      } 
      dialog.load(
       url, 
       {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object 
       function (responseText, textStatus, XMLHttpRequest) { 
        dialog.dialog({      
         close: function (event, ui) {        
          dialog.remove(); 
         }, 
         modal: true, 
         width: 460 
        }); 
       } 
      );   
      return false;   
     }); 
    });

所以，当你点击锚标签时，你的edituser.php页面的内容将被加载到对话框中。这应该很好，假设你有jQuery和jQuery UI正确加载到你的页面。

来源

2012-04-17 01:47:45 Shyju

Jquery - 当对话框窗口打开时从数据库中获取数据

回答

相关问题