Why is my JQuery button posting back immediately when placed in a masterpage?

Question

0.00/5 (No votes)

See more:

Hi,

I have been struggling with this for a while now, so was hoping someone might be able to help me out. I have basically copied the source of this page: http://jqueryui.com/demos/dialog/#modal-form into two different aspx pages, one standard one, and one that uses a masterpage. The "normal" page one works perfectly, but on the masterpage, the button here:

<button id="create-user">Create new user</button>

immediately posts back when you click it, meaning obviously that the modal dialog never appears (or appears briefly before the page reposts). I cannot for the life of me work out why the masterpage would affect this. Both pages have the exact same code, with nothing extra (and nothing whatsoever in the code-behind), except what's in the masterpage, which of course includes this:

<script type="text/javascript" src="/JS/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="/JS/jquery-ui-1.8.4.custom.min.js"></script>

I tried changing this:

$('#create-user')
            .button()
            .click(function () {
                $('#dialog-form').dialog('open');
            });

to this (to take into account the renaming of clientIDs by the masterpage):

$('#ctl00_ContentPlaceHolder1_create-user')
            .button()
            .click(function () {
                $('#dialog-form').dialog('open');
            });

but to no avail, the button still posts back instantly whenever I click it. I know I can stop this with return:false; but I eventually want to run eventhandler code from it...

Does anyone know why this is happening? I want to use JQuery (which I'm new to) in my project, but if I cannot even get a copy/paste of the demo to work, it doesn't bode too well....

Posted 7-Sep-10 5:45am

VeeReid

Updated 7-Sep-10 6:28am

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhishek Sur · Answer 1 · 2010-09-07T06:29:00

Solution 1

use Return false from the click handler to ensure that the button never generates the Postback.

I would also recommend you to avoid using runat=server if you want your button to never postback.

Posted 7-Sep-10 6:29am

Abhishek Sur

Comments

AspDotNetDev 7-Sep-10 12:39pm

1) The OP specifically states that the "return false" can be done but that he/she wants to know why there is a difference.

2) The code sample clearly shows there is no "runat=server".

AspDotNetDev · Answer 2 · 2010-09-07T06:35:00

Seems the default behavior for the "button" tag differs between browsers. Maybe the HTML is slightly different (e.g., whitespace before the HTML tag) so you are getting compatibility mode in IE in some cases. Read about this possiblity here: http://www.w3schools.com/tags/tag_button.asp

I didn't even know there was an HTML button tag. I usually use an input tag with the attribute set to "button" whenever I want a button that doesn't cause a postback. Give that a try (i.e., use an input tag rather than a button tag).

VeeReid · Answer 3 · 2010-09-07T21:47:00

Thanks for this. I gave it a try, but no luck... the input button does nothing at all, doesn't even run the jquery code. To be honest though, I want the button to have a postback, but for the jquery to call it once the button in the modal popup is clicked - looking at the documentation this is how I understand it's supposed to work..

Interestingly I was using Firefox, and when I tried it IE8 just now, it worked perfectly... It's a sorry state of affairs when things work properly in IE and not in Firefox!

Now that I know it's a browser thing, I'll keep looking for answers on Google though (but if anyone has any ideas, please let me know!)

ok, I just did another hunt around on Google, and came across this: http://www.integratedwebsystems.com/2009/12/using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control/. I copied his code and it worked perfectly in IE and Firefox. Not sure what was wrong with the demo code, but as this now works, I will use this as the template from which to create the actual code for my project.

It looks like this is the line I needed: <![CDATA[<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1)) %>;%>]]>

Why is my JQuery button posting back immediately when placed in a masterpage?

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0