how to show an ajax loading image next to a button after clicked using jquery

Question

i have a button that runs an ajax get which takes a long time. what is the easiest way of showing an ajax loading image RIGHT BESIDE to the right of the button.

i may move the button later in the layout so i wanted this to be dynamic (compared to a hard coded div in the layout)

after the click event (before the ajax was called), i tried this:

    $(selector).append("<img src='/images/ajax-loading1.gif' />");

but that didn't seem to do anything

Answer 1

You probably want after instead of append.

$(selector).after("<img src='/images/ajax-loading1.gif' />");

But taking into account the removing of the icon after AJAX has finished, how about:

$(selector).bind('click', function () {
    var spinner = $("<img src='/images/ajax-loading1.gif' />").insertAfter(this);

    jQuery.ajax({
        success: function (response) {
            // handle response

            spinner.remove();
        });
    });
});

Answer 2

If the issue is placement of the image, then why not use a css class with positioning (that could be changed as needed) for both the image and the button.

If the issue is the ajax running slow, I think we need more info.

Answer 3

Before you run the ajax call use the after() function:

$('.button').after('<img class="loading-ajax" src="/images/loading.gif" alt="Loading" />');

Then after the ajax request is completed remove the element:

$('.loading-ajax').remove();