Question

我正在尝试弄清楚如何在灯箱窗体中获取所选值，因此可以在父窗口中使用它。

我正在使用magnifiq弹出窗口，但我认为问题是直接的jquery。

初始化弹出窗口的代码如下所示。它打开一个弹出窗口，里面有一个AJAX表单。当该表单通过aJAX提交完成时，我想从结果数据中获取新的id并更新父页面中的元素。

我想使用事件，但页面上可能有多个这样的链接，所以我只想将它传回给调用者（在这种情况下是链接）。

所以重申一下： 1.打开弹出窗口。 - 完成 2.提交创建新对象的表单。 - 完成 3.当弹出窗口关闭时，我想获取从表单返回的值并更新相应的链接元素。

$(document).on('click', '.widget-configure a', function(ev){
    ev.preventDefault();

    var widget = $(this).parent().prev(".widget-selector").val();
    var _link = $(this);
    if (widget !== null)
    {
        var href = $(this).attr("href");
        var data = {"widgetId": widget};
        var template = Handlebars.compile(href);
        var targetUrl = template(data);

        $.magnificPopup.open({
            items: {
                src: targetUrl
            },
            type: 'ajax',
            closeOnBgClick: false,
            callbacks: {
                close: function(ev){
                    alert('closed');

                }
            },


            cursor: 'mfp-ajax-cur',
            tError: '<a href="%url%">The content</a> could not be loaded.'
        }, 0);

    }else
    {

    }

})
}

Answer 1

我想通了，您可以通过弹出式实例content属性获取表单的内容。

所以我在返回时更新ajax表单中的id字段，然后在关闭操作中我得到更新的字段值：

callbacks: {
    close: function(ev){

        var id = $(this).attr("content").find('.widget-config-id').val();
        if (id != null && typeof(id) !== 'undefined' && id.length > 0)
        {
            // we update the link to an edit link
            _link.attr('href', '/admin/widgets/json/{{widgetId}}/configure/edit/' + id);

            // and update the hidden configuration id.

        }

    }
},

如何使用magnifiq弹出窗口在灯箱中选择值

1 个答案: