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 - 當對話框窗口打開時從數據庫中獲取數據

回答

相關問題