如何在不刷新父窗口内容的情况下使用 jQuery 在父窗口中提交表单（Ajax 提交）答案

【问题标题】：How can I submit a form in a parent window using jQuery without refreshing the contents of the parent window (Ajax submission)如何在不刷新父窗口内容的情况下使用 jQuery 在父窗口中提交表单（Ajax 提交）
【发布时间】：2012-10-25 05:51:48
【问题描述】：

我正在尝试使用 jQuery 从子 iframe 提交包含在父窗口中的表单，但运气不佳。

在子窗口中我有以下验证功能：

<script type="text/javascript" src="templates/js/jquery.js"></script>
<script type="text/javascript" src="templates/js/jquery.validate.js"></script>
<script>
    $(document).ready(function(){
        $("#form_invoice_item").validate({
            submitHandler: function (form) {

                // Check if main invoice already saved
                if ($('#invoice_id').val() == "") {

                    // Change target to processing iframe
                    try {
                        parent.$('#invoice_form').ajaxSubmit();
                    } catch(e) { //debug
                        alert ("Error:" + e);
                    }

                } else {
                    alert ("Saving invoice " + $('#invoice_id').val() + ' items');                         }

                //form.submit(); //debug
            }
        });              
    });
</script>
<form method="post" id="form_invoice_item" name="form_invoice_item" action="index.php" target="invoice_items">

parent.$('#invoice_form').ajaxSubmit();出现的错误是

Error:TypeError: Object [object Object] 没有方法'ajaxSubmit'

如果我使用以下纯 Javascript 的 sn-p，则没有问题（显然这不是 jQuery，但它可以完成工作）。我如何在 jQuery 中做到这一点：

parent.document.getElementById('invoice_form').target='process';
parent.document.getElementById('invoice_form').submit();
parent.document.getElementById('invoice_form').target='';

我有一个名为 process 的隐藏 iframe，它的 display 属性设置为 hidden。

【问题讨论】：

标签： php javascript jquery jquery-ui

【解决方案1】：

如果您在弹出窗口中并且想要访问打开的窗口，请使用window.opener。

试试这个：

window.opener.$('#invoice_form').ajaxSubmit();

而不是这个：

parent.$('#invoice_form').ajaxSubmit();

另请参阅this 帖子。

-------编辑-----

不要忘记在您调用它的窗口中加载 jQuery 表单插件：

<script src="http://malsup.github.com/jquery.form.js"></script>

【讨论】：

这不是指弹出窗口，因此window.opener 不相关。这与 iframe 相关，因此您需要使用 window.document.parent 或使用 $(parent) 引用父级
你是我的英雄！添加

【解决方案2】：

只需使用父选择器：

$('#invoice_form',window.parent.document)

【讨论】：

感谢@ben-carey 找到了对象，但 ajaxSubmit() 不是该对象的定义方法 :( 也许我需要通过其他函数调用将 ajaxSubmit 方法附加到表单？
@DeAn 这可能是因为它试图从父级运行函数，您需要将ajaxSubmit() 的代码放入父级javascript

【解决方案3】：

这应该可行：

$(parent).find('#invoice_form').submit();

【讨论】：

感谢@roasted，它获取了对象但没有提交表单......好吧，看起来......因为try catch没有捕获到javascript错误，当我检查网络时坚果Chrome 浏览器检查器中的选项卡，没有任何操作

【解决方案4】：

试试这个..

$(parent).find('#invoice_form').submit();

【讨论】：