如何使用jQuery在父窗口中提交表单而不刷新父窗口的内容（Ajax提交）

Question

我试图使用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();处发生的错误parent.$('#invoice_form').ajaxSubmit(); 是

错误：类型错误：对象[object Object]没有方法'ajaxSubmit'

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

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

我有一个名为process的隐藏iframe，其显示属性设置为hidden。

Answer 1

这应该工作：

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

Answer 2

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

尝试这个：

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

代替这个：

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

另请参阅这篇文章。

- - - -编辑 - - -

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

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

Answer 3

尝试这个..

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

Answer 4

只需使用父选择器：

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