Question

我的页面上有一个记录网格，每个记录都有一个编辑按钮。单击编辑按钮将使用ajax类型打开Magnific Popup，并使用该行的编辑表单。我需要传入当前记录的数据，以便我可以使用当前数据预填充表单字段。

我们最初通过URL传递字段 - 因此弹出锚点看起来像这样（使用ColdFusion）：

<cfoutput><a class="editRecord" href="editRecord.cfm?recordID=#recordID#&field1=#field1#&field2=#field2#<img src="../images/edit_icon.png" /></a></cfoutput>

调用夸张弹出窗口的代码：

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false
});

但我们不希望在URL中公开ID。有没有办法传入字段值而不在URL中公开它们？

Answer 1

检查Magnific Popup plugin documentation，您可以找到特定于AJAX type的部分。根据它，您可以使用ajax和settings属性添加AJAX选项：

ajax: {
  settings: null, // Ajax settings object that will extend default one - http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
  // For example:
  // settings: {cache:false, async:false}

您可以使用该选项使用POST方法而不是GET方法（默认）发送AJAX，这样就不会公开网址中的字段。

现在，您可以将其作为data-属性添加，而不是在地址中添加参数，并使用.data()将其动态添加到呼叫中。

HTML：

<cfoutput>
    <a class="editRecord" href="editRecord.cfm" data-recordid="RecID" data-field1="val1">
        <img src="../images/edit_icon.png" />
    </a>
</cfoutput>

JavaScript初始化：

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false,
    ajax: {
        settings: {
            method: "POST",
            data: {
                recordID: $(this).data("recordid"),
                field1: $(this).data("field1"),
                // similar with the rest of the fields
            }
        }
    }
});

我在本地测试了这个代码......但它失败了。 this功能中没有magnificPopup()这样的功能。我首先选择字段然后使用each()函数应用Magnific Popup插件来解决这个问题：

$(".editRecord").each(function() {
    $(this).magnificPopup({
        type: 'ajax',
        preloader: false,
        ajax: {
            settings: {
                method: "POST",
                data: {
                    recordID: $(this).data("recordid"),
                    field1: $(this).data("field1"),
                    // similar with the rest of the fields
                }
            }
        }
    });
});

也许不是最好的解决方案，但它适用于我运行的测试。

如何将表单值无形地传递到弹出窗口中？

1 个答案: