jquery試圖通過ajax檢索數據更新模式對話框

我有一個頁面上顯示用戶聯繫信息。如果他們需要改變它，有一個「編輯」按鈕，打開一個模態對話框，其中包含字段值設置爲當前數據的表單。這工作正常。jquery試圖通過ajax檢索數據更新模式對話框

在表單中是一個「國家」字段，當更改觸發ajax調用時，會爲選擇框選擇新國家/地區的狀態或顯示文本輸入以進入狀態。

我有一個早期版本（不同的尺寸，jQuery的1.7），它工作在...該代碼是：

$('#edit-contact-link').click(function(){ 
    $('#dialog-contact-form-edit').dialog("open"); 
    return false; 
}); 

$('#dialog-contact-form-edit').dialog({ 
    autoOpen: false, 
    modal: true, 
    width: 450, 
    height: 600, 
    open: function() { 
     $("#Country").change(function() { 
      var country = $(this).val(); 
      $.ajax({ 
       type: "POST", 
       url: "includes/ajax/countrystate.php", 
       data: { 
        Country: country 
       }, 
       dataType: "html", 
       success: function(data) { 
        //alert(data); 
        $('#state-dropdown').empty().html(data); // fill the state with the right data 
       } 
      }); // end .ajax 
     }); // country change function 
    }, 
    buttons: { 
     Submit: function() { 
      $("form[name='contactform']").submit(); 
      $(this).dialog('close'); 
     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
});

我嘗試使用在新網站上相同的代碼（修改選擇和ajax文件名稱），它根本不起作用。

通過點擊編輯按鈕直接調用對話框並使用on（）方法創建一個單獨的函數來觸發，我終於得到了一切工作（除了用ajax數據填充＃state-dropdown div） ajax調用#Country選擇字段的更改。

部分成功代碼：

$(document).on("change", "[id='Country']", function() { 
    var country = $(this).val(); 
    var state = ""; 
    //alert("Country "+ country + " AND State " + state); 
    $.ajax({ 
     type: "POST", 
     url: "includes/functions/form-func/ajax-countries-states.php", 
     data: { 
      Country: country, 
      State: "" 
     }, 
     dataType: "html", 
     success: function(data) { 
      alert(data); 
      $('#state-dropdown').empty().html(data); // fill the state with the right data 
     } 
    }); // end .ajax 
}); // country change function 

$('.contact-edit').click(function() { 
    $('#dialog-contact-edit').dialog({ 
     modal: true, 
     position: ["center", 100], 
     width: 460, 
     buttons: { 
      "Close": function() { 
       $(this).dialog("close"); }, 
      "Submit": function() { 
       $(this).dialog("close"); } 
     } 
    }); 
});

現在唯一的問題是Ajax調用的最後一行：

$('#state-dropdown').empty().html(data);

我對形式的DIV應該被清空，並填充用ajax獲取的數據。

如果div位於頁面主體（對話框外），它可以正常工作，但是如果它位於對話框內，則不會更新。

似乎應該有一個簡單的解決方案，但我花了幾個小時尋找和改變這一切......這一切都無濟於事。

任何來自這裏的精彩頭腦的幫助將不勝感激。

瑪麗

來源

2012-09-21 user1687608

我也有過類似的問題，在一個模式對話框形式（太極拳是特定的）。您需要回答的問題：當模式框打開時，是否「克隆」HTML中已經存在的HTML片段（可能是隱藏的），還是加載了iframe？

Shadowbox克隆了html內容，所以我最終得到了兩個具有相同ID的元素。

問題是，只有一個id被更新。所以這可能是你遇到的同樣的問題。

我不得不特定要更新哪一個像$（'＃shadowbox。selector'）。

或者你可以嘗試使用類而不是id來更新元素。就像我說的，如果兩個元素具有相同的ID，只有一個會被調用，但是如果使用類，它們將全部得到更新。

來源

2012-09-21 03:08:39

謝謝。我一直很確定我在頁面上只有一個ID。 – user1687608

好吧，我查了一下 - 現在表格正在工作。我不知道我做了什麼修正了它...我一直在對頁面進行修改，所以也許這是頁面出現問題 - 按照ComputerArts的建議。無論如何，它現在工作。 – user1687608

jquery試圖通過ajax檢索數據更新模式對話框

回答

相關問題