CODEWITHSUNDEEP
jqueryajax
Oysio
Oysio

Reputation: 3318

Howto trigger ajaxStart and ajaxStop

I'm trying to trigger the ajaxStart and ajaxStop events to get an is-loading message to appear but I'm quite confused about how to do this. As I understand these events are triggerd with each ajax event, but I'm still not sure what that exactly means. Does clicking on a href link or on a submit button triggers an ajax event as well ? It seems not because not one of the alerts in my code below appear when clicking on hyperlinks or buttons. I just started out learning JQuery and there is probably something obvious that I'm missing.

Someone can explain how to make this work ?

I have this in my <head> tag

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

and this just before the opening <body> tag:

<script language="JavaScript" type="text/javascript">

// prepare the form when the DOM is ready 
$(document).ready(function() { 
$(document).ajaxStart(function() {
    alert('ajaxStart');
    $('#ajaxBusy').show(); 
});
$(document).ajaxStop(function() {
    alert('ajaxStop');
    $('#ajaxBusy').hide(); 
});

</script>

Edit: I want by clicking on a href link to make the loading popup appear thus triggering the ajaxStart event. The link call's another page which takes quite some time to load and I would want to have the loading message appear in the mean time.

<a href="http://www.mysite.com/long-loading-page.php">link</a>

How would I do this with an ajax event ?

Upvotes: 1

Views: 4819

Answers (2)

Alnitak
Alnitak

Reputation: 339917

To make the AJAX events fire you have to start an AJAX request.

That means $.ajax, $.get, $.post, $.load, etc.

Clicking a link or button won't do. However you can register your own click handler for each a element so that it uses $.load to retrieve the requested URL and then updates the DOM with that new content. This definitely doesn't count as "Beginner's jQuery", though.

A better solution might be for the new page to use document.write or similar to throw up the popup as the page loads and then remove it when it's done.

Upvotes: 4

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

ajaxStart and ajaxStop are jQuery events that are triggered whenever any AJAX requests are made. Have a read here: http://api.jquery.com/ajaxStart/ jQuery has an excellent documentation.

When you click on a link or a submit button browser simply loads a new page without initiating any AJAX requests.

Upvotes: 0

Related Questions