CODEWITHSUNDEEP
c#jqueryasp.net
Icemanind
Icemanind

Reputation: 48686

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

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?

Upvotes: 1

Views: 1619

Answers (3)

Mohammad Arshad Alam
Mohammad Arshad Alam

Reputation: 9862

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>

Upvotes: 1

fcmaine
fcmaine

Reputation: 359

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);
        }
    });

Upvotes: 0

Fals
Fals

Reputation: 6839

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
});

Upvotes: 0

Related Questions