Jquery - Ajax - callback function?

Question

Hi,

I am using a $.get request to get some data and am then storing it in a cookie. The get request is ran when a user clicks a button. They would then follow a link to another page and the data stored to the cookie is extracted and displayed on the new page.

Unfortunately some people are rather vigorous with their clicking, the get request runs but the go to the next page before it's had time to complete. This obviously causes an error. So I am wanting to code something which will disable the link to the next page until the get request has finished, but I don't know how.

This is all I have at the moment.

$.get(url, function(d) {
                    cp = $('textarea#txt_quote', d).html();
                    z_cookie.set(topic_id, current_posts, '1');
                });

Answer 1

You can disable the link by handling its click event, like this:

var link = $('selector to find <a> tag');
link.click(function() { return false; });


$.get(url, function(d) {
    cp = $('textarea#txt_quote', d).html();
    z_cookie.set(topic_id, current_posts, '1');

    link.unbind('click');
});

If you want to, you can set a variable in the click handler, and, if it's been set, navigate to the page after the AJAX request finishes, like this:

location.href = link.attr('href');