Michel
Michel

Reputation: 23615

add jquery click event to asp:button prevents button from entering code behind event?

I must be loosing it, but i'm not sure what :-)

i have a standard asp:button control with a code behind click event.

then, to prevent double click i disable the button on client click:

$('#<%=BTN_GCR_CheckCardValue2.ClientID %>').bind('click', function () {
 $('#<%=BTN_GCR_CheckCardValue2.ClientID %>').attr('disabled', 'disabled');
});

the disabled works, and the page posts back (enters the load event of the page), but doesn't enter the code behind event.

this jquery code is with the bind method, also tried it with click, same result.

what am i overlooking?

EDIT the button

<asp:Button ID="BTN_GCR_CheckCardValue2" runat="server" CssClass="individual_small_inputs"
                        OnClick="BTN_GCR_CheckCardValue2_Click" Text="CHECK" />

which leads to

<input type="submit" name="ctl00$ctl00$CPHMainSection$CPH_LeftSection$BTN_GCR_CheckCardValue2" value="CHECK" id="ctl00_ctl00_CPHMainSection_CPH_LeftSection_BTN_GCR_CheckCardValue2" class="individual_small_inputs" />

Upvotes: 0

Views: 1588

Answers (4)

James McCormack
James McCormack

Reputation: 9954

Final solution :D

$('#<%= BTN_GCR_CheckCardValue2.ClientID %>').click(function () {
        $(this).attr('disabled', 'disabled');
        $(this).parent().append($('<input />', {type: "hidden", name: $(this).attr('name') }));
});

Upvotes: 1

oddy
oddy

Reputation: 1900

Disabled controls won’t get any events on the backend. First, disabling occurs. Then click event bubbles to the default handler and postback occurs. This is the reason for what you are seeing. As for posible custom solution… Try to simply make this button invisible (css property “visibility” set to hidden) with jquery instead of disabling it. If that will work, you can proceed with experiments. For instance, you can have container for your button with some kind of a message (like “In progress…”). Then set css property “position” to “absolute” value for your button. With this, your button will overlay the message. When button becomes invisible, user will see the message. Similar approach is used, for instance, here: http://s-c.me/ (Big “Highlight IT!” button). P.s. Sorry, I cannot send screnshots yet.

Upvotes: 3

codeandcloud
codeandcloud

Reputation: 55210

If your intention is to prevent double posting same content, I would daresay this is not a good approach.


Have you heard about someone called Dave Ward and something called PostBack Ritalin?
Please try that. Its a super clean solution.

Upvotes: 2

jerone
jerone

Reputation: 16871

Not really the correct solution, but maybe put it in an setTimeout(function(){ ...disable... }, 1);.

Upvotes: 0

Related Questions