Make Ajax call after page load

Question

How do we make ajax call after page load.

I need to make a ajax call suppose after 10sec document has loaded.

function loadajax(){
  $.ajax({ 
    url:'test',
    data:"username=test",
    type:"post",
    success:function(){
     //do action
    }
  });
}
 $('document').load(function(){
setTimeout(function(){
   loadajax();
 },10000);

});

I am doing it in this way. But doesn't succeeded.

It's not clear why you're doing this, so consider this general advice which may or may not apply to your specific situation... It's probably better to make the AJAX request immediately and then wait 10 seconds to react to it, instead of waiting 10 seconds to make the call at all. That way a network delay doesn't increate the wait time beyond 10 seconds. Additionally, you might use that time to silently re-try failed requests. — David, May 05 '14 at 13:09
@Creator Put it in the `success` callback. However, if you're having trouble with that, please post it as a separate question. — Blazemonger, May 05 '14 at 18:17

iCollect.it Ltd · Accepted Answer · 2014-05-05T17:10:16.850

15

So many answers, all slightly different, but the shortest recommended syntax to run the function 10 seconds after DOM ready, while still retaining best practices, would be:

$(function(){
    setTimeout(loadajax,10000);
});

As Blazemonger mentions below, you could simply put setTimeout(loadajax,10000); at the end of the document, however that is not as flexible to change. jQuery DOM load code should always be in a jQuery DOM load event (i.e. $(function(){...});)

edited May 05 '14 at 17:10

answered May 05 '14 at 14:50

iCollect.it Ltd

92,391
25
181
202

In fact, the shortest of them all would be to skip `$(function(){` entirely and put the `setTimeout` at the end of the page instead of in the ``. – Blazemonger May 05 '14 at 15:48
1

@Blazemonger: Yes, but that is considered bad practice as it is less flexible. Always best to wrap jQuery DOM ready code code into a jQuery load so that is can be included/injected wherever desired. I will tone done the emphasis on code length a little :) – iCollect.it Ltd May 05 '14 at 17:07
@TrueBluePractice Less flexible in what way? It's a very common technique -- the folks at http://html5boilerplate.com have been doing it for years. There are other advantages, too. See [this question](http://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document) and [this one](http://stackoverflow.com/questions/11786915/javascript-on-the-bottom-of-the-page). – Blazemonger May 05 '14 at 17:35
1

@Blazemonger: The examples you linked are for raw Javascript and not jQuery. The assumption with jQuery is you may want to inject it anywhere and not worry about the browser sequencing, as it is guaranteed to fire only when the DOM is completely loaded (but not necessarily when everything is loaded). I take you other point on the "newness" of the shorthand and will edit accordingly. – iCollect.it Ltd May 05 '14 at 17:45
Your repetition of "inject jQuery anywhere" makes no sense here. The other answers are relevant because jQuery *is* JavaScript, and scripts placed at the end of the `` will, logically, run only after the DOM is fully loaded. I downvoted your answer not to be petty, but because you're factually wrong. – Blazemonger May 05 '14 at 17:48
I was in fact referring to the last paragraph of your edited answer. I could have just deleted it myself, but that seemed inappropriate since you were still monitoring the conversation. – Blazemonger May 05 '14 at 17:55
1

@Blazemonger: That makes no sense at all. That paragraph is correct: "jQuery DOM load code should always be in a jQuery DOM load event". So basically you wish to go against all published recommendations for *jQuery DOM loading*, on a jQuery answer, because jQuery is written in Javascript even though your own answer was effectively the same? I have now lost all respect for you :) – iCollect.it Ltd May 05 '14 at 18:02
There is no reason to wrap jQuery (JavaScript) code in a `$(document).ready` or `$(function() {})` wrapper if you place it at the bottom of the `` instead, and there is even a perceptual speed boost if you do so. This has been [discussed](https://groups.google.com/forum/#!topic/jquery-en/hXDDpDR8ZZI), [answered](http://stackoverflow.com/a/5329895/901048), and [widely implemented](https://github.com/h5bp/html5-boilerplate/blob/master/index.html) by better developers than you or I. I don't know what "published recommendations" you're looking at, but they're incomplete. – Blazemonger May 05 '14 at 18:10
@Blazemonger: I really don't think **5 & 7 year old** JS comments are really relevant to the jQuery question asked. Things have moved on since the old days. Modern bundling techniques eliminate most of the issues they claim to solve and, more importantly, writing jQuery plugins for compatibility with modern environments, for example ASPX, Razor etc, absolutely require your jQuery code not to know where/when/how it was loaded. It should just work. *I* learned something new from your comments and up-voted your answer as also being correct. *You* down-voted a correct answer. Congrats :) – iCollect.it Ltd May 05 '14 at 19:45
I'd like to know what "modern bundling techniques" you think OP is using. Or why you're citing ASPX and Razor when neither are relevant to this particular question. – Blazemonger May 05 '14 at 20:01
@Blazemonger: Know when to stop flogging a dead horse. *Bundling, ASPX and Razor* are all relevant to the reasons why your previous arguments & references are incorrect and/or outdated. Like your responses they have nothing at all to do with the question asked and I never said they were relevant to anything else. – iCollect.it Ltd May 05 '14 at 20:13

score 5 · Answer 2 · answered May 05 '14 at 13:03

5

1000 is in milliseconds -- ten seconds would be 10000. Also, you're looking for $(document).ready:

$(document).ready(function(){
    setTimeout(function(){
       loadajax();
     },10000); // milliseconds
});

http://api.jquery.com/ready

answered May 05 '14 at 13:03

Blazemonger

90,923
26
142
180

@TrueBlueAussie "preferable" is a matter of opinion in this case. I find `$(function(){...})` to be less readable and potentially more confusing to other less-experienced developers, at a tiny savings of characters and cycles. – Blazemonger May 05 '14 at 15:44
@TrueBlueAussie please reread the docs -- It's not new, [it's an alternate shorthand](http://api.jquery.com/jquery/#jQuery3) -- *both* syntaxes date back to v1.0. The [`$(document).ready` syntax has not been deprecated](http://api.jquery.com/ready/) and AFAIK never will be. – Blazemonger May 05 '14 at 17:38
+1: As this works and was an early answer. I have read the docs again as you suggest and note your point (my comments on *newness* now removed). I guess that is even more reason to spread the word as the handy short-hand is obviously not as widely known as it should be :) – iCollect.it Ltd May 05 '14 at 17:51

score 1 · Answer 3 · answered May 05 '14 at 13:04

1

Try it like this

$(function(){
  loadajax();
});

answered May 05 '14 at 13:04

djbielejeski

617
3
12

You seem to have forgotten the 10 second delay they wanted completely :) – iCollect.it Ltd May 05 '14 at 14:50
I purposefully left it out. No one should have a 10 second delay on any page. My guess is it was in there for debugging purposes. – djbielejeski May 05 '14 at 16:01
6

It's best not to make assumptions about what the questioner wants. Offer your optimization as a second answer, but as it stands, your code simply doesn't answer the question that was asked. – Blazemonger May 05 '14 at 17:43

score 0 · Answer 4 · edited Mar 09 '17 at 22:15

0

You can try this:

$(document).bind("load", function() {
//code
 });

edited Mar 09 '17 at 22:15

Julien

1,946
3
33
51

answered May 05 '14 at 13:17

TED

1,829
5
18
36

Make Ajax call after page load

4 Answers4