CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Michael Falciglia
Michael Falciglia

Reputation: 1046

Hide/Show Load function not working

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;}

Upvotes: 1

Views: 258

Answers (2)

Brian Poole
Brian Poole

Reputation: 711

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.

Upvotes: 1

dane
dane

Reputation: 631

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

Upvotes: 0

Related Questions