Why is my PostBack occurring before my jQuery click event?

Question

I'm fairly new to jQuery, but I have some links on my page which should toggle sections of the form visible when clicked, or if javascript is disabled it does a full postback to toggle those sections

It works fine in my test environment, with the PostBack occurring after the jQuery script, but once I deploy it the PostBack occurs before the jQuery click event. It's deployed on a Windows 2003 server running IIS 6.0, while my test environment is Windows XP / IIS 5.1 / VS2010

Here's the code I'm using. The script runs in production if I put it in .ready() instead of .click() but in .click() I don't even get the alert, so I am assuming the issue is with the PostBack occuring before the jQuery script has a chance to execute.

jQuery:

$(document).ready(function () {
    // Toggle Details
    $('.toggleDetailsButton').click(function () {
        alert('test');
        $(this).parentsUntil(".parentRow").parent().next().toggleClass("hidden");
        return false;
    });
});

Code-behind:

Protected Sub rpData_ItemCommand(ByVal sender As Object, ByVal e As RepeaterCommandEventArgs) Handles rpData.ItemCommand
    // Manually toggle rows here
End Sub

ASP:

<asp:Repeater ID="rpData" runat="server">
    <ItemTemplate>
        <tr class="parentRow">
            ...
                <asp:Button runat="server" ID="cmdViewDetails" 
                    CommandName="ToggleDetails" Text="details"
                    CssClass="buttonAsLink toggleDetailsButton" />
            ...
        </tr>
        <tr id="rpData_DetailsRow" class="detailsRow hidden" runat="server">

        </tr>
    </ItemTemplate>
</asp:Repeater>

Edit

Per a suggestion in the comments below, running the jQuery function in onClientClick makes the page act as it should, however I still want to know why the PostBack occurs after the jQuery event in my test environment, but before the jQuery event in production.

I have noticed other differences between the two as well. For example, I also have a button that toggles on/off a search div which works fine in testing but not in production. It uses $('.toggleSearchButton').next() to get the div under the search button and toggles it's class name. In production, this object returns [object Object], however calling .attr('class') returns undefined (so does .attr('id'), .attr('tag') and .nodeName). In my test environment, it returns the correct values for my search div.

I've tested this behavior in IE, FF, and Chrome. On my test machine, it works fine on all 3. On my production machine, only IE works the way it should.

See if http://api.jquery.com/event.stopPropagation/ in your click function doesn't clear things up. — asawyer, Jan 25 '12 at 14:15
@asawyer The `alert` doesn't popup, so I'm assuming that the PostBack is occurring before the click event. This means `stopPropagation` won't get run either (just tested it and it doesn't help) — Rachel, Jan 25 '12 at 14:16
Have you placed that jQuery at the beginning or end of your page? — Zack Macomber, Jan 25 '12 at 14:17
Good point. It's still early here. try this - change your anon click function to a normal named function, and set an onclick='return xxx' in the html, see if it doesn't make it to the function now. — asawyer, Jan 25 '12 at 14:17
@ZackMacomber It's in the middle of the page, before the button. The page has a master form, and the jQuery is at the beginning of the content area. — Rachel, Jan 25 '12 at 14:18
@sathishkumar No. The script runs fine if I put it in `.ready()` — Rachel, Jan 25 '12 at 14:21
Do you see a difference if you put the jQuery at the beginning or end of the page? — Zack Macomber, Jan 25 '12 at 14:23
Do want without .ready() ? If so place your code at bottom of the page after jquery.js script tag. — sathishkumar, Jan 25 '12 at 14:24
@asawyer It runs when I put javascript in `onClientClick` (`onClick` tries to do a PostBack since this is an asp button). I'd still like to know why I can't use the syntax I have though, since I'd prefer to keep my javascript out of my asp files if possible. — Rachel, Jan 25 '12 at 14:32
@Rachel At least the problem should be more clear now. Btw, you don't need to stick alerts in for debugging purposes. Just type `debugger;` and it should break for you. — asawyer, Jan 25 '12 at 14:43
@asawyer Btw, if you post that as an answer I'll give it an up vote since it solves my immediate issue, although I still want to know why the postback/click order is different between my production and test environments — Rachel, Jan 25 '12 at 14:44
Which browser are you testing this on? I've had a similar problem with IE that I have a fix for. — Becuzz, Jan 25 '12 at 15:04
@Becuzz It works fine in IE, FF, and Chrome if hosted on in my test environment, but I noticed the problem in the production copy in Chrome. I just tested IE and FF, and FF has the same issue but IE works fine. — Rachel, Jan 25 '12 at 15:22

score 0 · Answer 1 · answered Apr 10 '12 at 22:31

0

$('.toggleDetailsButton').click(function (e) { 
 e.preventDefault(); 

});

That should be all you need

answered Apr 10 '12 at 22:31

scripter78

1,117
3
22
50

score 0 · Answer 2 · answered Apr 11 '12 at 14:52

Actually asp.net puts a onclick event on every button, so first you have to remove that from your code like this:-

$(document).ready(function () {
$('.toggleDetailsButton').removeAttr('onclick');
$('.toggleDetailsButton').click(function (e) { 
   alert('yes');
   e.preventDefault(); 
   return false;
   }); 
});

score 0 · Answer 3 · answered Apr 30 '12 at 12:16

this code is working. i tested it please check.make EnableEventValidation="false"

        <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sortable.aspx.cs" Inherits="Sortable" EnableEventValidation="false" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title>Sortable</title>

            <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

            <script language="javascript" type="text/javascript">
                function xyz() {
                    alert('test');
                    $(this).parentsUntil(".parentRow").parent().next().toggleClass("hidden");

                }

            </script>

        </head>
        <body>
            <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="rpData" runat="server">
                    <ItemTemplate>
                        <tr class="parentRow">
                            <asp:Button runat="server" ID="cmdViewDetails" CommandName="ToggleDetails" Text="details"
                                CssClass="buttonAsLink toggleDetailsButton" OnClientClick="javascript:xyz();" />
                        </tr>
                        <tr id="rpData_DetailsRow" class="detailsRow hidden" runat="server">
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            </form>
        </body>
        </html>

Code behind file

            using System;
            using System.Collections.Generic;
            using System.Linq;
            using System.Web;
            using System.Web.UI;
            using System.Web.UI.WebControls;

            public partial class Sortable : System.Web.UI.Page
            {
                protected void Page_Load(object sender, EventArgs e)
                {
                    List<string> l = new List<string>();
                    l.Add("A");
                    l.Add("B");
                    l.Add("C");
                    rpData.DataSource = l;
                    rpData.DataBind();
                }
            }

score 0 · Answer 4 · answered Jan 25 '12 at 14:21

0

Try this:

$('.toggleDetailsButton').click(function (e) {
   if (e.stopPropagation) e.stopPropagation();
   if (e.preventDefault) e.preventDefault();

   .
   .
});

By default button renders a submit button. You could also set UseSubmitBehavior="false" to make it an <input type="button" /> element, and see if that gives you better results.

answered Jan 25 '12 at 14:21

Brian Mains

50,520
35
148
257

Thanks, but as I already said twice so far, the PostBack runs before the click event, so this will do nothing at all. – Rachel Jan 25 '12 at 14:30

score 0 · Answer 5 · answered Jan 25 '12 at 14:27

0

Have a look at the resulting html. If ASP.NET have injected it's own onclick="__DoPostBack..." code you need to remove it using

$('.toggleDetailsButton').removeAttr('onclick')
    .click(function(e){
        e.preventDefault();
        ...
});

answered Jan 25 '12 at 14:27

PHeiberg

29,411
6
59
81

I thought this was a great idea at first, however when I tried to implement it the PostBack still occurs. I'm not sure if its related, but if I view the source of my page before the change, there is no `onClick` attribute on my button – Rachel Jan 25 '12 at 14:40

score 0 · Answer 6 · answered Jan 25 '12 at 14:45

0

Perhaps this?

$('.toggleDetailsButton')
     .unbind('click')
     .bind('click', function() {
       // etc
});

answered Jan 25 '12 at 14:45

dubRun

245
1
12

I get the same behavior - PostBack occurring before click. – Rachel Jan 25 '12 at 14:50

Why is my PostBack occurring before my jQuery click event?

6 Answers6