CODEWITHSUNDEEP
javascriptjqueryajax
jjjfff
jjjfff

Reputation: 99

Calling function if ajax request is finished

I have a button and 2 links, which makes an ajax request. If a request called by button is finished, I want to show alert. But I don't want to show the alert if I click on some link. This is my code:

HTML:

<button id="ajax">Ajax</button>
<a href="#">link 1</a>
<a href="#">link 2</a>

<div></div>

JS:

$('#ajax').click(function() {
    $("div").load("/echo/js/?js=button");

    $( document ).ajaxStop(function() {
        alert('alert')
    });
})

$('a').click(function() {
    $("div").load("/echo/js/?js=link");
})

http://jsfiddle.net/rgyxzwj6/

Why if I click on the button and then I click some link, it shows the alert? And after first click on the button it shows alert only once. But if I click on the button second time, it shows alert two times. How can I fix that?

Upvotes: 1

Views: 137

Answers (2)

Sim
Sim

Reputation: 3317

1. Perform your alert

You should use the callback function of jquery load to perform your alert:

$('#ajax').click(function() {
    $("div").load("/echo/js/?js=button", function() {
        alert('alert');
    });
});

$('a').click(function() {
    $("div").load("/echo/js/?js=link");
});

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

from the jquery API and for more information about load(): http://api.jquery.com/load/

Here is the updated fiddle for your case: http://jsfiddle.net/55rpfe0w/

2. the ajaxStop handler

Your code...

$( document ).ajaxStop(function() {
    alert('alert')
});

...the event handler is also called when you do your ajax request with the links.

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event.

from jquery API: https://api.jquery.com/ajaxStop/

3.the multiple time alert

And after first click on the button it shows alert only once. But if I click on the button second time, it shows alert two times. How can I fix that?

The reason is, that you set the handler for the event ajaxStop in your click function and every click you do on your button you set another event handler and so:

Any and all handlers that have been registered with the .ajaxStop() method are executed at this time.

from jquery API: https://api.jquery.com/ajaxStop/

Upvotes: 2

tcigrand
tcigrand

Reputation: 2397

You can pass a function as the second parameter to the load function, this passed function will get called when the load function completes.

If you don't want any function to run, you don't have to pass it anything, just like you're doing in the $('a').click function.

http://jsfiddle.net/rgyxzwj6/1/

$('#ajax').click(function() {
    $("div").load("/echo/js/?js=button", function() {
      alert('alert');
    });
})

$('a').click(function() {
    $("div").load("/echo/js/?js=link");
})

Upvotes: 0

Related Questions