How can I submit a form in a parent window using jQuery without refreshing the contents of the parent window (Ajax submission)

Question

I am attempting to submit a form contained in a parent window from a child iframe using jQuery without much luck.

In the child window I have the following validation function:

<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">

The error that occurs at parent.$('#invoice_form').ajaxSubmit(); is

Error:TypeError: Object [object Object] has no method 'ajaxSubmit'

If I use the following snippet which is just in plain Javascript, there is no problem(Obviously this isn't jQuery but it gets the job done). How do i do this in jQuery:

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

I have a hidden iframe called process which has its display property set to hidden.

score 0 · Answer 1 · answered Nov 05 '12 at 11:39

0

Just use the parent selector:

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

answered Nov 05 '12 at 11:39

Ben Carey

16,540
19
87
169

Thanks @ben-carey The object is found but the ajaxSubmit() is not a defined method for the object :( Perhaps I need to attach the ajaxSubmit method to the form by some other function call? – Dean Nov 05 '12 at 11:57
@DeAn That is probably because it is trying to run the function from the parent, you need to place the code for `ajaxSubmit()` into the parents javascript – Ben Carey Nov 05 '12 at 11:59

score 0 · Answer 2 · answered Nov 05 '12 at 11:40

0

This should work:

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

answered Nov 05 '12 at 11:40

A. Wolff

74,033
9
94
155

Thanks @roasted, It gets the object but doesn't submit the form... Well so it seems... Because no javascript error is caught by the try catch, nut when i check the network tab in the Chrome browser's inspector, there is no action – Dean Nov 05 '12 at 11:54

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

If you are in a popup and you want to access the opening window, use window.opener.

Try this:

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

Instead of this:

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

Also see this post.

-------EDIT-----

Don't forget to load jQuery form plugin in those window in which you call it:

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

edited May 23 '17 at 11:48

Community

1
1

answered Nov 05 '12 at 11:40

Bogdan Burym

5,482
2
27
46

This is not referring to a popup window so `window.opener` is not relevant. This is to do with iframes, so you need to refer to the parent using `window.document.parent` or using `$(parent)` – Ben Carey Nov 05 '12 at 12:03
You are my hero! Adding worked. Silly mistake on my part. Thank you – Dean Nov 05 '12 at 12:07

score 0 · Answer 4 · answered Nov 05 '12 at 11:41

0

try this..

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

answered Nov 05 '12 at 11:41

bipen

36,319
9
49
62

How can I submit a form in a parent window using jQuery without refreshing the contents of the parent window (Ajax submission)

4 Answers4