Question

Please, can you checkout http://svpply.com , move the pointer on a image and click + when it appears. If you’re careful you can see a very nice loader when you’ve clicked +, and after some moments appear a v.

How can I implement something like that? In that process there’s not “white view” between the three step (+, loading, v). Ideas?

Actually I’ve this code:

$(".add_button").live("click", function() {
    var element = $(this),
        data = "id=" + this.id;

    element.css("background-image", "url(/media/images/loader.gif)")

    $.ajax({
        type: "POST",
        url: "/product/add/",
        data: data,
        success: function(result) {
            element.css("background-image", "")
            element.removeClass("add_button").addClass("del_button");
        }
    });

    return false;
});

But between the three steps I see an ugly “white image”. Why?

UPDATE

Now I’ve:

$(".add_button").live("click", function() {
    var element = $(this),
        data = "id=" + this.id;

    element.removeClass("add_button").addClass("spinner");

    $.ajax({
        type: "POST",
        url: "/product/add/",
        data: data,
        success: function(result) {
            element.removeClass("spinner").addClass("del_button");
        }
    });

    return false;
});

But still the same problem. Unfortunately I cannot find the interested source in the svpply source code.

UPDATE

<div class="add_button" id="id"></div>

Answer 1

Oh yessss, this is a good question 🙂

So basically it has to do with AJAX and the different kind of settings! You need to use ajax:beforeSend and ajax:success (or ajax:complete if you’re doing more loading after success). Which means you can do something like (assuming your button is wrapped in a form)

$(".add_button").parent("form").bind("ajax:beforeSend",function(e,data,status,xhr) {
        $("#someDiv").append("<img id='loading' src='url/to/loading/gif'></img>");
        // and any other things you want to do like removing the button or disabling it
});

That function will execute BEFORE the client (your computer) sends the request to the server. You can also add a lot of stuff in there and modify the option to request you are actually sending to the server!

Then you can have

$(".add_button").parent("form").bind("ajax:success",function(data,textStatus,jqXHR) {
        $("#loading").remove();
        // and any other things like adding your del button
});

Which is called after the server sends back the object to the client for you to play with, in which case you can remove your #loading img and do other cool things!

I really suggest you reading on the link and completely understand how AJAX works, and how the client interacts with the server. Once you understand that, you can do a lot of cool things like this! Good luck.

EDIT

You can check out a working example of this (which doesn’t use a loading gif but instead disables input) at this prototype I’m building. Click on the animating circle and try to submit a comment. You’ll notice that after you hit enter, the comment input box is disabled until the comment is rendered back on your screen!

In your case, your code would look like

$.ajax({
    type: "POST",
    url: "/product/add/",
    data: data,
    beforeSend: function(msg) {
        // do the stuff you want to do
    },
    success: function(result) {
        element.removeClass("spinner").addClass("del_button");
    }
});