jquery尝试使用通过ajax检索的数据更新模式对话框

Question

我有一个显示用户联系信息的页面。如果他们需要更改它，可以使用“编辑”按钮打开一个模式对话框，其中包含将字段值设置为当前数据的表单。效果很好。

表单中有一个“国家/地区”字段，当更改该字段时会触发一个 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() 方法创建一个单独的函数来触发#Country 选择字段更改时的 ajax 调用。

部分成功的代码：

$(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 放在页面主体（对话框外），它可以正常工作，但如果它在对话框内，则不会更新。

似乎应该有一个简单的解决方案，但我花了几个小时搜索和更改这个和那个......一切都无济于事。

非常感谢这里聪明人提供的任何帮助。

玛丽

Answer 1

我在模态框（具体来说是阴影框）中的表单遇到了类似的问题。您需要回答的问题：当模态框打开时，它是“克隆”HTML 中已经存在的一段 HTML（可能是隐藏的）还是加载 iframe？

Shadowbox 克隆了 html 内容，所以我最终得到了两个具有相同 ID 的元素。

问题是，只有一个 id 被更新。所以这可能与您遇到的问题相同。

我必须具体说明我想更新哪一个，比如 $('#shadowbox .selector')。

或者您可以尝试使用类而不是 id 来更新元素。 就像我说的，如果两个元素有相同的 ID，只有一个会被调用，但如果你使用类，它们都会被更新。