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

Question

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" />

Can you please post the markup for the button as well?

Brandon
– Brandon

2011-05-19 17:58:49 +00:00
Commented May 19, 2011 at 17:58 — Brandon
– Brandon, Commented May 19, 2011 at 17:58
do you use update panel?

codeandcloud
– codeandcloud

2011-05-19 18:06:02 +00:00
Commented May 19, 2011 at 18:06 — codeandcloud
– codeandcloud, Commented May 19, 2011 at 18:06
it's webforms 4.0 by the way (if that makes any difference)

Michel
– Michel

2011-05-19 18:38:27 +00:00
Commented May 19, 2011 at 18:38 — Michel
– Michel, Commented May 19, 2011 at 18:38

oddy · Accepted Answer · 2011-05-19 19:08:09Z

3

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.

answered May 19, 2011 at 19:08

oddy

1,9002 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michel Over a year ago

aha, that's the reason. I indeed found out that making it invislbe worked, but i didn't know why...

codeandcloud · Accepted Answer · 2011-05-19 18:22:54Z

2

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.

edited May 19, 2011 at 18:22

answered May 19, 2011 at 18:08

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Comments

James McCormack · Accepted Answer · 2011-05-19 19:51:47Z

1

Final solution :D

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

edited May 19, 2011 at 19:51

answered May 19, 2011 at 18:04

James McCormack

10.1k4 gold badges56 silver badges66 bronze badges

12 Comments

Michel Over a year ago

now you mention, shouldn't there be something like that on the click event of the button (generated by asp.net?)

James McCormack Over a year ago

Yup, looks like jQuery is overriding it. View source and copy the __doPostBack code that ASP.NET puts in the inline onclick into your click handler.

codeandcloud Over a year ago

@James: +0 for reusability :)

Michel Over a year ago

hmm, i think i don't get it: i removed the jqeury and there still is no postback click event on the button (which does work)...

Michel Over a year ago

there is a scriptmanager on the page ( <asp:ScriptManager ID="TTP_ScriptManager" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization="True"> </asp:ScriptManager>), does that matter?

|

jerone · Accepted Answer · 2011-05-19 18:02:04Z

0

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

answered May 19, 2011 at 18:02

jerone

17.1k4 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related