CODEWITHSUNDEEP
javascript
AKB
AKB

Reputation: 5938

set time out in JavaScript

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>

Upvotes: 3

Views: 15595

Answers (23)

AKB
AKB

Reputation: 5938

solved my problem. may be useful for others:

Answer:

HTML source code:

<SCRIPT type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    document.getElementById('toHide').style.display ="";
    $('#toHide').doTimeout(1000, function() { 
        $('#toHide').find('#safeForm34').submit(); 
        document.getElementById('myAnimatedImage').src = "../../img/load.gif"; 
        });
</SCRIPT>

html:

  <div id="toHide" class="pb-text-align-center">
    <img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
    <form wicket:id="safeForm" class="clearfix" />
</div>

Upvotes: 1

AKB
AKB

Reputation: 5938

Finally solved my question, may be useful for others:

Answer:

HTML source code:

<SCRIPT type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    document.getElementById('toHide').style.display ="";
    $('#toHide').doTimeout(1000, function() { 
        $('#toHide').find('#safeForm34').submit(); 
        document.getElementById('myAnimatedImage').src = "../../img/load.gif"; 
        });
</SCRIPT>

html:

  <div id="toHide" class="pb-text-align-center">
    <img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
    <form wicket:id="safeForm" class="clearfix" />
</div>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177694

Include this in the head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

and have

 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\" >\n");
      buffer.append("var input = $(\"input[name='submitted']\");\n");
      buffer.append("if (input.val() == \"false\") {\n"); 
      buffer.append("  input.val(\"true\");\n"); 
      buffer.append("  setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n"); 
      buffer.append("}\n");
      buffer.append("else {\n $(\"#toHide\").hide();\n}"); 
      component.getResponse().write(buffer);
    }  
  }

which should render

var input = $("input[name='submitted']");
if (input.val() == "false") { 
  input.val("true"); 
  setTimeout(function(){ $("#safeForm1d3").submit()}, 100); 
}else{ 
  $("#toHide").hide(); 
}

Where would you do the $("#toHide").show(); ?

Upvotes: 1

jeroenjoosen
jeroenjoosen

Reputation: 649

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.

Upvotes: 3

CristiC
CristiC

Reputation: 22698

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>

Upvotes: 0

ic3b3rg
ic3b3rg

Reputation: 14927

Try this:

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

Upvotes: 0

Andre Backlund
Andre Backlund

Reputation: 6943

Try wrapping them inside a function:

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

Upvotes: 3

Paul D. Waite
Paul D. Waite

Reputation: 98786

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.

Upvotes: 3

Neeraj
Neeraj

Reputation: 8532

Can you try doing something like

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

Probably setTimeout accepts the things you want to call as a string, so that it can do an eval after the timeout and run the script as it encouters in the string.

Upvotes: 1

Gary Green
Gary Green

Reputation: 22395

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')

Upvotes: 0

Vivek
Vivek

Reputation: 11028

change this 

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

to...

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

Upvotes: 1

Seb Nilsson
Seb Nilsson

Reputation: 26408

After formatting your initial post I think maybe I found some sources to the problem.

  • The function in your timeout is a string.
  • You should try and submit the form, not the actual button.

Try this:

if (!document.getElementById("safeForm4d").submitted.value) {
    document.getElementById("safeForm4d").submitted.value = "true";
    setTimeout(function() {
        document.forms[0].submit(); // Alt: document.forms['MyFormName'].submit()
    }, 3000);
} else {
    document.getElementById("toHide").style.display="none";
}

Upvotes: 0

ADW
ADW

Reputation: 4070

Take away the quotes from around your action:

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

Upvotes: 3

AKB
AKB

Reputation: 5938

Issue was with time 100 ie 1/10 of second. IE will load images with dynamic action only for for 100 millisecond ie1/10 second and stop. increased time to 3000 and now it is working fine.

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

No issues with FF or other browser.

Upvotes: 0

Tobbe Brolin
Tobbe Brolin

Reputation: 455

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.

Upvotes: 0

S L
S L

Reputation: 14318

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

check working example at JSFIDDLE.

CAUTION:: alert may be irritating.

Upvotes: 0

Aron Rotteveel
Aron Rotteveel

Reputation: 83163

Because setTimeout() requires your function to be passed as a string or as an anonymous function:

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

Upvotes: 5

user319198
user319198

Reputation: 

function setsubmit()
{
   document.getElementById("safeFormec").submit();
}

setTimeout('setsubmit()',100);

Upvotes: 1

scheffield
scheffield

Reputation: 6787

two things:

  1. The correct usage of setTiemout() is:

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

  2. Your using wicket. The wicket:id is nothing the DOM knows. You have to assign an ID and use this one like you did it with the form itself.

Hope that helps.

Upvotes: 0

Pointy
Pointy

Reputation: 413682

This:

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

is incorrect. The function you pass there to ".setTimeout()" will do nothing. Instead of that, try:

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

The difference is that the actual guts of the function should not have been quoted. In that state, what you've got is a function with a single statement, that statement being a simple string-valued expression. It would run, but have no effect.

Upvotes: 0

RobertO
RobertO

Reputation: 2663

var safeForm4d = document.getElementById("safeForm4d");
if ( safeForm4d.submitted.value == "false" ){
   safeForm4d.submitted.value = "true";
   setTimeout(function(){ safeForm4d.submit(); }, 100);
}else{
   document.getElementById("toHide").style.display="none";
}

Upvotes: 0

san
san

Reputation: 655

I have tried with adding function call, now images are loading and dynamic, but it never goes to next page or never clear timeout.

code:

buffer.append("setTimeout(function(){'document.getElementById(\"").append(component.getMarkupId()).append("\").submit()'}, 100);\n}else{\n");

Upvotes: 0

vietean
vietean

Reputation: 3033

You can try:

img style="display: inline" src="img/load.gif?salt=xxxx"

xxx: means - a random of an integer.

Maybe, the browser cache the image so it will not repaint. Or you must set the GIF image with loop.

Upvotes: 0

Related Questions