CODEWITHSUNDEEP
javascriptphp
PatC
PatC

Reputation: 168

Hide javascript message after 10 seconds

I am new to AJAX/Jquery/Javaascript so please forgive my ignorance. I found some code to help me display an AJAX window after a form submit button is clicked.

Here is the code:

var ray={
ajax:function(st)
    {
        this.show('load');
    },
show:function(el)
    {
        this.getID(el).style.display='';
    },
getID:function(el)
    {
        return document.getElementById(el);
    }
}

Here is the HTML to the form:

<div id="load" style="display:none;">Loading... Please wait.</div>
<form action="test_form.php" method="POST" onsubmit="return ray.ajax()">
<input type="hidden" name="value1" value="value1>">
<input type="submit" value="Submit">
</form>

The loading message displays just fine when the button is clicked, but never disappears. Ideally, I would like the message to disappear after the work is done, but hiding it after 10 seconds would work just as well.

I have tried various edits using hide() and setTimeout(), but my lack of experience with AJAX/JavaScript keeps breaking the code.

Upvotes: 1

Views: 3771

Answers (1)

gfrobenius
gfrobenius

Reputation: 4067

Here you go: http://jsfiddle.net/DHgN4/1/

You said in the comments below your question that you just want it to close after 10 seconds. This will do that.

Obviously I had to comment out your form cause the fiddle can't call test_form.php, that's why I created a button to demonstrate the code. It should be enough to get you going. The main part of the fiddle is this line:

setTimeout(function(){$("#load").hide();},10000);

That will hide it after 10 seconds using jQuery. If you don't want to use jQuery then change it to this...

setTimeout(function(){document.getElementById('load').style.display='none';},10000);

I don't understand why you want it setup this way. Doing a real ajax call, sending the data using the ajax, then waiting and reacting off the response would be cleaner.

Upvotes: 4

Related Questions