CODEWITHSUNDEEP
javascriptjqueryajaxjquery-callback
Fred Collins
Fred Collins

Reputation: 5010

$.post() callback method suggestion

I always used something like this:

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        $(this).toggleClass('active');
    });
});

The problem is when an user has a slow connection and clicks on that button, it doesn't seems to do anything, because the button will change the own status (adding the active class) once the request is complete. Of course I can "fix" this behavior by adding a spinner while the request is loading.

Now check out this one:

$("a.button").click(function() {
    $(this).toggleClass('active');
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
        // else, if there's an error: $(this).toggleClass('active)
    });
});

In other words, I change the button status instantly when the button is pressed and after this, I check for success/error. Is this a good way? What you think about? Are there other ways?

Upvotes: 3

Views: 164

Answers (5)

Nabab
Nabab

Reputation: 2644

It always depends the way you've built your site, but in my opinion the active state should only be triggered at the instant you click.

So that should be: onmousedown you add your class and onmouseup you remove it.

The Ajax call could trigger a different function maybe showing a loading dialog/spinner.

There are several ways of building it: individually on each element as you did, or through a general styling function. Same for Ajax with the ajaxStart ajaxComplete functions as Jasper said.

Personally I'm using Ajax intensively, always changing the DOM dynamically, so I use livequery to setup style changing with events automatically when elements with given class(es) appear in the DOM, and I use ajaxStart and ajaxComplete for displaying a loading dialog.

Upvotes: 0

Stelian Matei
Stelian Matei

Reputation: 11623

You could do something like:

$("a.button").click(function() {
    var old_text = $(this).text();
    var button = $(this);
    $(this).text('Processing...');
    $(this).attr('disabled', 'disabled'); // disable to button to make sure it cannot be clicked
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // after request has finished, re-enable the link
        $(button).removeAttr('disabled');
        $(button).text(old_text);
    });
});

Next thing, you should do something similar for catching errors (re-enable the button).

Upvotes: 0

Kai Qing
Kai Qing

Reputation: 18833

This is more of a UI question than code. Personally I prefer to show the spinner in cases where it could be confusing if there is no response. Since I don't know what class you're toggling and what effect it has on the element, I wouldn't know if toggling before success would be confusing at all.

One way or another, everyone alive knows the loading spinner. It's probably safe to go with that.

Upvotes: 2

elclanrs
elclanrs

Reputation: 94101

Use $.ajax success:

From jquery docs:

$.ajax({
  url: "test.html",
  success: function(){
    $(this).addClass("done");
  }
});

Upvotes: 0

Jasper
Jasper

Reputation: 75993

You've got the general idea there. You can implement it in other ways, for instance by setting global AJAX ajaxStart and ajaxSuccess functions:

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
    });
}).ajaxStart(function () {
    $(this).toggleClass('active');
}).ajaxComplete(function () {
    $(this).toggleClass('active');
}).ajaxError(function () {
    //never forget to add error handling, you can show the user a message or maybe try the AJAX request again
});

These methods register handlers to be called when certain events, such as initialization or completion, take place for any AJAX request on the page. The global events are fired on each AJAX request if the global property in jQuery.ajaxSetup() is true, which it is by default. Note: Global events are never fired for cross-domain script or JSONP requests, regardless of the value of global.

Source: http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Upvotes: 2

Related Questions