Replacing asp:imagebutton with processing image using jquery

Question

So I have an asp:imagebutton for lets say loginning into a web site.

OnClick the page does xyz and then redirects you, there is a pause time between the redirect from when the button was clicked. To make the wait a bit more user friendly I am replacing the button with a processing image and text the javascript that does this is:

$(document).ready(function () {
    $(".ShowProcessing").click(function () {
        $(this).replaceWith("<img src='/content/images/processing.gif' /> Processing");
    });
});

This is the button:

<asp:ImageButton ID="Login" runat="server" OnClick="Login_Click" CssClass="ShowProcessing" />

The problem is the change to processing image happens but the asp OnClick event however does not fire.

Answer 1

Instead of using .replace() tried and succeeded with:

$(".ShowProcessing").click(function () { 
    $(this).hide(); 
    $(this).after("<img src='/content/images/processing.gif' /> Please wait..." ) 

}); 

Answer 2

Instead of replacing the entire element with something else entirely, just alter the src of the current element:

$(".ShowProcessing").click(function () {
    $(this).attr("src", "/content/images/processing.gif");
});

This is if ImageButton is rendered as an img proper, somewhere, and not just some funky input with scripting (I don't recall off the top of my head, and webforms does some things in strange ways). Then proceed to insert text after the existing element as desired.

Answer 3

I guess you may try to remove the first image and then add the new processing image.

instead of replace use (Remove then add) functions.