ASP.NET Textbox not posting back after adding a client side change event

Question

I have an ASP.NET Textbox on my Web Form and I'm using the following code to make it into a jQuery DatePicker:

$('#<%= txtServiceDateRequested.ClientID %>').datepicker();

That part is working fine. I am also setting the AutoPostBack property to True, so that whenever a date is selected, the page will post back. This also works fine. The problem I am running into is I am trying to disable my other controls while the page posts back. I am using this code:

    $(function() {
        $('#<%= txtServiceDateRequested.ClientID %>').change(function () {
            $('#<%= ddlTimeRequested.ClientID %>').prop('disabled', true);
            $('#<%= ddlServiceType.ClientID %>').prop('disabled', true);
            $('#<%= ddlService.ClientID %>').prop('disabled', true);
            $('#<%= ddlGenderRequested.ClientID %>').prop('disabled', true);
            $('#<%= txtServiceDateRequested.ClientID %>').attr('disabled', true);
        });
    });

So I am binding to the change event of my textbox (datepicker). When I add this code, it does, indeed, disable my controls like it should and it appears to do a postback, but when I put a break point on my C# code behind:

protected void txtServiceDateRequested_TextChanged(object sender, EventArgs e)
{
    FixItems(); // I'm putting a breakpoint here
}

For some reason, the breakpoint is never hit. If I comment out that javascript code above that binds the change event and disables the controls, then the breakpoint hits as expected. Can someone tell me why my breakpoint doesn't hit when I uncomment and enable the JS code above?

EDIT:

After doing some playing around, the issue seems to be when the textbox itself gets disabled. From what I am speculating, I am clicking on the textbox, my jquery calendar shows up. Then I'm selecting a date. Then it appears my disable code is getting executed, then jquery is trying to insert the date I selected into the textbox. But since the textbox is disabled, it isn't putting the new date in there. So maybe I need a way to make the jquery calendar code execute first, before my disable code is fired?

Mohammad Arshad Alam · Accepted Answer · 2013-10-24 15:51:40Z

1

You have to just add AutoPostBack="true" for the Textbox. I have tested with below code:

<html xmlns="http://www.w3.org/1999/xhtml">

 <script type="text/javascript">
     $(function () {
         $(".datepicker").datepicker({
             onSelect: function () {
                 this.fireEvent && this.fireEvent('onchange') || $(this).change();
             }
         });
     });
</script>
</head>
<body>

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="datepicker"                   
     OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>
</div>
</form>
</body>
</html>

answered Oct 24, 2013 at 15:51

Mohammad Arshad Alam

9,8626 gold badges41 silver badges63 bronze badges

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

Comments

Fals · Accepted Answer · 2013-10-23 17:24:28Z

0

The change method is overriding the default event __doPostBack from ASP.NET, then It will never call the server.

You should use Bind instead, to attach another function to the change method:

$('#<%= txtServiceDateRequested.ClientID %>').bind( "change", function( event ) {
  // do stuff
});

answered Oct 23, 2013 at 17:24

Fals

6,8394 gold badges26 silver badges46 bronze badges

5 Comments

Icemanind Over a year ago

I changed it to bind, but it still doesn't seem to hit my breakpoint. I also tried on. Still no luck.

Fals Over a year ago

Just curious, where this js block? you should put this after the body! I tried this here and works, maybe we missing something else. Try to checkout wich evets are binded to you element and check out for any JS error in Firebug or Chrome Console

Icemanind Over a year ago

Its using a Master page. I have the script tag just before the closing </asp:Content> tag. Inside the Master page, the <asp:Content> tag is in between the <form> tag. So it would render similar to this: <html><body><form> My HTML Code...My JS Code</form></body></html>

Icemanind Over a year ago

I'm using Chrome and I'm looking at the console and not seeing any javascript errors. Console screen is blank.

Icemanind Over a year ago

Fals -- If it'll help, I can post my entire code to the file, if you want. Its not that big.

fcmaine · Accepted Answer · 2013-10-23 21:12:09Z

0

Instead of disabling controls when change event fires, add it to either onClose or onSelect. So your code might look like

    $("#<%= txtServiceDateRequested.ClientID %>").datepicker({
       onClose: function( selectedDate ) {
                     $('#<%= ddlTimeRequested.ClientID %>').prop('disabled', true);
                     $('#<%= ddlServiceType.ClientID %>').prop('disabled', true);
                     $('#<%= ddlService.ClientID %>').prop('disabled', true);
                     $('#<%= ddlGenderRequested.ClientID %>').prop('disabled', true);
                     $('#<%= txtServiceDateRequested.ClientID %>').attr('disabled', true);
        }
    });

answered Oct 23, 2013 at 21:12

fcmaine

3592 gold badges5 silver badges17 bronze badges

Collectives™ on Stack Overflow

ASP.NET Textbox not posting back after adding a client side change event

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related