set time out in JavaScript

Question

Firefox always loads dynamic images, but IE it just shows images without any dynamic action. what changes I need to do?

JavaScript code from IE view source code:

<script type=”text/javascript”
    <!--/*--><![CDATA[/*><!--*/ 
    if (document.getElementById("safeForm1d3").submitted.value == "false") { 
      document.getElementById("safeForm1d3").submitted.value = "true"; 
      setTimeout('document.getElementById("safeForm1d3").submit()', 100); 
    }else{ 
    document.getElementById("toHide").style.display="none"; 
    }/*-->]]>*/
</script>

I am using Wicket framework, so real java code is:

 static private class SafeSubmitBehaviour extends AbstractBehavior{
    public void onRendered( Component component ) {
      super.onRendered( component );      
      StringBuffer buffer = new StringBuffer(200);
      buffer.append("<script type=\"text/javascript\" ><!--/*--><![CDATA[/*><!--*/\n");
      buffer.append("if (document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value == \"false\") {\n");
      buffer.append("document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value = \"true\";\n");
      buffer.append("setTimeout('document.getElementById(\"").append(component.getMarkupId()).append("\").submit()', 100);\n}else{\n");
      buffer.append("document.getElementById(\"toHide\").style.display=\"none\";\n}/*-->]]>*/</script>");      
      component.getResponse().write(buffer);
    }  
  } 

html page which loads my dynamic image is:

<div id="toHide" class="pb-text-align-center">
        <img style="display: inline" src="img/load.gif" />
            <form wicket:id="safeForm" class="clearfix">
            <input type="hidden" wicket:id="submitted" value="false" />
        </form>
</div>

Answer 1

Have you tried removing the function call brackets from the end of this line?

document.getElementById("safeForm9c").submit()

i.e. do this instead:

setTimeout(document.getElementById("safeForm9c").submit, 100)

You’re telling IE to call the results of submit() in 100 milliseconds time, rather than call submit.

Answer 2

The setTimeout function throws invalid arguments because whatever the call

document.getElementById("safeFormec").submit()

returns (some error message maybe) is not a valid argument to setTimeout i.e. it can not be resolved to a function or expression.

The call to .submit() fails because there is no action attribute specified for the form (<form action="somePage.php">).

Your intention was probably not to do a submit in the setTimeout call, but to send the submit function as a value parameter to setTimeout to be executed after a while. Like this:

setTimeout(document.getElementById("safeFormec").submit, 100);

Note the missing paranthesises.

Answer 3

This will never give you the desired effect because your changing from page to page -- this will cause the aninmation to disappear once the new page starts to load. This will depend on many factors, such as how long the server takes to response, to how fast the user's computer is to re-render the new page.

If you really want this kind of effect to work you should use ajax to send the form data using .serialize(), overwrite the current page with the response which should hide the animation.

---

Update:

To create the desired effect you'll have to post the form using ajax, then push the new HTML to the DOM.

var $form = $('#formId');

$.ajax({
   url: $form.attr('action'),
   type: $form.attr('method'),
   data: $form.serialize(),
   success: function(response) {
    $('#loading').fadeOut(function() {
            // Get only text from the body of the result
        $('body').html($(response).find('body'));
    });
  }
});

This is really hacky though and I felt dirty writing that. Seriously. You should really make sure that the response returned isn't go to:

• Reload CSS styles, scripts, etc.
• Any specific title, scripts, styles, etc relevant to that page and search will not appear or be changed.

More than likely you just want to return the result to the query i.e. the search results of the form submitted. In which case just wrap the results in a container and .find('#container') instead of .find('body')

Answer 4

Try wrapping them inside a function:

setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);

Answer 5

You have quotes in the setTimeout event:

setTimeout('document.getElementById("safeForm4d").submit()', 100);

Change your script as follows:

<script type="text/javascript">
    if (document.getElementById("safeForm4d").submitted.value == "false") {
        document.getElementById("safeForm4d").submitted.value = "true";
         if(Wicket.Browser.isIE()) {
             setTimeout(document.getElementById("safeForm4d").submit(), 100);
         } else { 
             setTimeout(document.getElementById("safeForm4d").submit(), 100);
         }
    } else {
        document.getElementById("toHide").style.display="none";
    }
</script>

Answer 6

Try something like this

setTimeout(function(){document.getElementById("safeForm9c").submit();}, 100);

In the old days a setTimeout complete function was in a string format, but these days we use it this way. Also this way makes is possible to do more things when the timeout is complete.