Click here to Skip to main content
16,021,172 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all,

I am hoping you guys can help me.

I have designed a small booking application using webform. When information change on the form, it always postback to automatically update the gridview result or hide the gridview. Autopostaback works fine in all but the two textboxes that are bound to a JQuery datepicker. I have autopostback = true for the textboxes and also C# onTextChanged event handler. But the two textboxes bound to datepicker never postback when the date is changed. I been researching for three days now and finally decided to get help from you guys.

Any suggestion is greatly appreciated.

Thanks in advance

Code for textbox 1. The event handler for it only say hide gridview (gridview1.visible = false; gridview1.databind();)
ASP.NET
<td class="style10">
<asp:TextBox ID="StartDate" class="dropdownArrow1"  runat="server"
Width="200px" Height="20px" BorderColor="#cccccc" align="left" BackColor="#fffbec"
BorderWidth="1px" BorderStyle="solid" AutoPostBack="true" OnTextChanged="StartDate_TextChanged" ></asp:TextBox>
<asp:Calendar ID="CalendarStartDate" runat="server" Visible="False" ></asp:Calendar>
<asp:RequiredFieldValidator ID="RequiredStartDate" runat="server" ControlToValidate="StartDate" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
      </td>


I have another similar code for textbox 2

Thanks
Posted
Updated 24-Aug-15 23:48pm
v3
Comments
Andy Lanng 25-Aug-15 5:01am    
Please post the markup for these controls
Awoldeselassie 25-Aug-15 5:43am    
Please see improved question above, thanks

1 solution

Ah, I see the issue. AutoPostBack on textboxes usually occurs when focus is lost (or enter is clicked). This doesn't happen when the jQuery datepicker updates it for you.

What you can do is bind all types of change to a postback with jquery:
JavaScript
$(function(){  //On document.ready
   var textbox = $("input[id$='StartDate']"); //ends with selector (or you can use ASP to get the id)
   $(textbox).change(function(e){
      __doPostBack(this.attr("id"),e); //Call postback manually
   });
});


The __doPostBack(eventTarget,eventArgs); is how ASP.Net implements postbacks from it's controls. I doubt you use the eventArgs in your handler so you can even have that as null. This will cause any changes to the textbox to trigger a postback.

NB: this includes keyup, keydown,keyAnything!!

To exclude undesired postbacks, you can use the "on" function and add only what you need:

JavaScript
$(function(){  //On document.ready
   var textbox = $("input[id$='StartDate']"); //ends with selector (or you can use ASP to get the id)
   $(textbox).on("paste propertychange",function(e){
      __doPostBack(this.attr("id"),e); //Call postback manually
   });
});


You can also set up functions to detect if enter was clicked, or just use the datepicker onselect event:

JavaScript
$(".date").datepicker({
  onSelect: function(dateText) {
     var textbox = $("input[id$='StartDate']")
    __doPostBack($(textbox).attr("id"),dateText); //Call postback manually
  }
});



Hope that helps ^_^
Andy
 
Share this answer
 
Comments
Awoldeselassie 25-Aug-15 6:30am    
Thanks very much Andy, I kind of understand now why it is not posting back, and you code helped a lot... but no change with the textbox, still not doing anything. I am not very good in javascript, so I suspect im putting the code in the wrong place
Andy Lanng 25-Aug-15 6:39am    
post the issue as a new question. I'll keep an eye out for it :)

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900