我有一个显示用户联系信息的页面。如果他们需要更改它,可以使用“编辑”按钮打开一个模式对话框,其中包含将字段值设置为当前数据的表单。这很好用。
表单中有一个“国家”字段,当更改该字段时会触发一个 ajax 调用,该调用获取 html 用于选择新国家/地区的状态的选择框或显示文本输入以进入该状态。
我有一个早期版本(不同大小,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 调用,我终于让一切正常工作(除了用 ajax 数据填充#state-dropdown div) #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 放在页面的主体上(对话框外),它可以正常工作,但如果它在对话框内,则不会更新。
似乎应该有一个简单的解决方法,但我花了几个小时搜索和更改这个和那个......一切都无济于事。
非常感谢这里聪明人的任何帮助。
玛丽