Hide/Show Load function not working

Question

I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page.

I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.

The script works with the submit function like this:

$(function(){
    $('#form_710370').submit(function(e){
       e.preventDefault(); // add this
       $('#form_container').hide()
       $('#mydivhide1, #mydivhide2').show();
       return false;
    });
});

But if I try to use the load function like this, it does not work, but it works for my loading animation, any suggestions on what I am doing wrong?

$(document).ready(function () {
  $('#iframe1').load(function(){
  {
    $('#form_container').hide()
      $('#mydivhide1, #mydivhide2').show()
     });

This is the loading animation script which works

    $(document).ready(function () {
    $('#iframe1').on('load', function () {
    $('#loader1').hide();
        });
    });
    / in ready()
    $('#form_710370').submit(function(){$('#loader1').show();return true;});

Here is the HTML

<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>

<div id="form_container">
    <form id="form_710370"  target="iframe" method="post" convert.php">
        <input id="Website" name="url1" type="text" value=""/> 
        <input id="saveForm" type="submit" name="submit" value="submit" />
    </form> 
</div>

<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>  
    <iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
    </div>

Here is the CSS

#mydivhide1 {display:none;}
#mydivhide2 {display:none;}

In general terms, it's better if you don't preventDefault() for the form itself, but instead do it for the form's submit button, on the other hand it seems your problem could easily be solved via a Timeout callback. — jlstr, Nov 27 '13 at 19:55
@JoseE Could you show me how to do that in the vode? I am just learning Jquery and have not done that before, thanks — Michael Falciglia, Nov 27 '13 at 19:58
I think that you can start trying this answer first: http://stackoverflow.com/questions/5788499/jquery-iframe-load-event — jlstr, Nov 27 '13 at 20:07

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling load again because the submit is being stopped.

Assuming that you want to show #mydivhide1 and #mydivhide2 when the form is submitted and then hide them when the iframe finishes loading, I came up with a fiddle that should do what you want: http://jsfiddle.net/CST4t/3/

Basically I just removed the e.preventDefault( ); and instead of returning false, I returned true so the form submission went through. I also cleaned up some items like the form action attribute and moved the submit function override to $(document).ready( );.

Edit

One other thing that I did was I changed the form target and the name of the iframe to a more commonly used name that seems to work better across more browsers. Apparently the name and target values are really touchy from browser to browser, see this answer.

edited May 23 '17 at 12:19

Community

1
1

answered Nov 27 '13 at 20:20

Brian Poole

701
3
11

Thanks for your help, I just checked the fiddle, yes the form works, but it does not do the main point of the script. I want to hide `
` after the load and also open the other two `#mydivhide1` & `#mydivhide2` when it is finished loading.
– Michael Falciglia Nov 27 '13 at 20:30
Ahh I misunderstood a portion of your question. How's this? http://jsfiddle.net/CST4t/4/ – Brian Poole Nov 27 '13 at 20:47
Thanks bro, I think that is going to work, going to add it into the real page now and test it! – Michael Falciglia Nov 27 '13 at 20:57
No problemo. I hope it works out for you in your application! – Brian Poole Nov 27 '13 at 20:59

score 0 · Answer 2 · answered Nov 27 '13 at 20:07

0

$('#iframe1').contents().load(function() {
    //window loaded
});

answered Nov 27 '13 at 20:07

dane

631
6
15

thanks for your help, I tried that, but the hide/show function does not work when I change it to `$('#iframe1').contents().load(function() { //window loaded` });' – Michael Falciglia Nov 27 '13 at 20:36

Hide/Show Load function not working

2 Answers2