如何从另一个jQuery对话框更新当前对话框（跨文件场景）

你需要在第二个对话框完成编辑后更新第一个对话框的内容，由于两个对话框代码在不同文件中，可以通过以下两种常用方法实现：

方法1：传递回调函数 #

在打开第二个对话框时，把更新第一个对话框的逻辑封装成函数传过去，保存完成后执行这个函数。

修改对话框1的代码（添加打开对话框2的逻辑） #

假设对话框1中点击编辑按钮触发打开对话框2的操作，添加回调函数：

// 对话框1内的编辑按钮点击事件
$('.btn-editar-archivo').click(function() {
    // 调用打开对话框2的方法，传入更新回调
    abrirDialogoEdicionArchivo(function() {
        // 这里写更新对话框1的逻辑，比如重新加载最新表单
        actualizarContenidoDialogo1();
    });
});

// 定义更新对话框1的函数
function actualizarContenidoDialogo1() {
    // 根据实际业务重新获取最新表单内容，示例：
    $("#dialogComponentes").html(obj.form);
}

修改对话框2的代码（接收并执行回调） #

把打开对话框2的逻辑封装成带参数的函数，保存成功后调用回调：

function abrirDialogoEdicionArchivo(callback) {
    $("#dvDialogEdicionArchivo").html(obj.formulario).dialog({
        title: "Editar archivo",
        width: 400,
        height: 200,
        modal: true,
        position: {
            my: "center",
            at: "center",
            of: $("#dvDialogUbicacionElementos"),
        },
        buttons: [
            {
                text: "Grabar",
                id: "btnEdicionArchivo",
                click: function () {
                    edicionArchivoAdjunto();
                    // 执行回调更新对话框1
                    if (typeof callback === 'function') {
                        callback();
                    }
                    $(this).dialog("close");
                },
            },
            {
                text: "Cancelar",
                id: "btnCancelarArchivo",
                click: function () {
                    $(this).dialog("close");
                },
            },
        ],
    });
}

方法2：使用jQuery自定义事件 #

通过触发全局自定义事件，让第一个对话框监听该事件并执行更新，这种方式更灵活，适合多个组件需要响应的场景。

修改对话框1的代码（添加事件监听） #

在对话框1初始化时，监听自定义事件：

// 监听自定义事件，触发时更新对话框1
$(document).on('archivoEditadoExitosamente', function() {
    actualizarContenidoDialogo1();
});

function actualizarContenidoDialogo1() {
    $("#dialogComponentes").html(obj.form);
}

修改对话框2的代码（触发自定义事件） #

在保存成功后触发自定义事件：

$("#dvDialogEdicionArchivo").html(obj.formulario).dialog({
    title: "Editar archivo",
    width: 400,
    height: 200,
    modal: true,
    position: {
        my: "center",
        at: "center",
        of: $("#dvDialogUbicacionElementos"),
    },
    buttons: [
        {
            text: "Grabar",
            id: "btnEdicionArchivo",
            click: function () {
                edicionArchivoAdjunto();
                // 触发自定义事件，通知对话框1更新
                $(document).trigger('archivoEditadoExitosamente');
                $(this).dialog("close");
            },
        },
        {
            text: "Cancelar",
            id: "btnCancelarArchivo",
            click: function () {
                $(this).dialog("close");
            },
        },
    ],
});

关键提示 #

• 回调函数方式逻辑更直接，适合一对一的关联场景；自定义事件适合多组件联动的情况。
• actualizarContenidoDialogo1函数需要根据实际业务调整，可能需要重新调用后端接口获取最新数据，而不是直接复用旧的obj.form。
• 尽量避免使用全局变量传递状态，容易引发维护问题。

内容的提问来源于stack exchange，提问作者JuanJoseVega