'Reload page after submit in iframe (javascript/jquery)

I have a page with an iframe. In the iframe there’s a submit button. When I click the submit button I want the parent window to be updated. This is what I have done so far, and it works (the javascript is located in the parent window):

var myFrame = $('iframe');
myFrame.load(function() {
myFrame.contents().find('#publish').click(function() {

  myFrame.load(function() {
    location.reload();
  });

});
});

The code works. But I find the reload of the iframe unnecessary. Is there a better way to detect when "submit" is completed?

(I can’t reload the page only by “onclick” or relay on any delay. I must be sure that the submitting of the form is finished)

Solution 1:^[1]

Assuming publish is unique you can simply do so:

$(document).ready(function(){
  $('#publish').live('click', function(e){
     e.preventDefault();
     //Do whatever you want here
   });
});

Notice the live will bind the even to publish link at runtime.

Solution 2:^[2]

You could have the form submission return a block of js:

<html>
<script>
 window.parent.document.jQueryFunction();
</script>
</html>

or, if you're open to plug-in, you could use the ajaxSubmit() method of the jQuery Form Plugin.

$myFrame.contents().find('form').ajaxForm({
  success: function() {
     // update parent
  }
});

Solution 3:^[3]

$("#publish").click(function() {
    $('#inputs').ajaxSubmit({
        success:function(){
            //alert("Reload called");
            parent.location.reload();
        }
    });
 });

This worked.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	two7s_clash
Solution 3	Preeti

'Reload page after submit in iframe (javascript/jquery)

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]