CODEWITHSUNDEEP
jqueryasp.netjquery-ui
mallows98
mallows98

Reputation: 1537

ASP.NET textbox with jQuery UI DatePicker value lost when doing a postback

I've got an application that uses jQuery UI DatePicker on an ASP.NET textbox control.

The control is working as intended, but I've noticed that when you postback from a server call (via submit button), the entered value gets lost in the application.

Was wondering if you all have experienced this? What measures that you have to do to prevent this?

<asp:TextBox runat="server" ID="txtCallsMadeFrom" class="field" EnableViewState="true">

var callsMadeFromId = '#<%=txtCallsMadeFrom.ClientID %>';
jQuery(callsMadeFromId).datepicker({ showOn: "button", buttonImage: "../images/calendar.gif", altFormat: 'dd/mm/yy', buttonImageOnly: true, onSelect: function () { } });

Upvotes: 5

Views: 18462

Answers (5)

Kim
Kim

Reputation: 1

Here is what I've done. It works in or out of an update panel and retains the value on postback.

<script>
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
    $("#<%= txtTime.ClientID %>").timepicker({timeformat: 'HH:mm' }); 
    $( "#<%= txtDatePicker.ClientID %>" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>

Here is the partial XAML of my textboxes in the update panel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="margin-left: -4px" >
    <ContentTemplate>
    <table>
    <tr>
    //other controls.
    .
    .
    .
    <td><asp:TextBox ID="txtDatePicker" runat="server" Width="130px"></asp:TextBox></td>
    <td><asp:TextBox ID="txtTime" runat="server" Width="115" ></asp:TextBox></td>
    </tr>
    </table>
    </ContentTemplate>
</asp:UpdatePanel>

I hope this helps others!

Upvotes: 0

Leo88
Leo88

Reputation: 1

With this solution you dont need any jQuery trick. You have to Remember to ALWAYS send the date to the TextBox in MM/DD/YYYY format in every single postback, dont matter if you work in DD/MM/YYYY.

Solution:

in ASPX:

<script type="text/javascript">
$(function () {
    $("#txtFechaIni").datepicker();
    $('#txtFechaIni').datepicker('option', { dateFormat: 'dd/mm/yy' });            
});
</script>
<asp:TextBox ID="txtFechaIni" runat="server" MaxLength="10"></asp:TextBox>

In codebehind (C#) use the Page_LoadComplete event to transform the date to MM/DD/YYYY in every postback. I use this event because is the last thing that is executed before the Page_Unload and you dont have to transform the date in every event:

protected void Page_LoadComplete(object sender, EventArgs e)
{
    if (txtFechaIni.Text.Length == 10)
    {
        //Transform DD/MM/YYYY to MM/DD/YYYY.
        txtFechaIni.Text = txtFechaIni.Text .Substring(3, 2) + "/" + txtFechaIni.Text .Substring(0, 2) + "/" + txtFechaIni.Text .Substring(6, 4)
    }
}

Hope it helps someone.

Upvotes: 0

Himanshu Kumar
Himanshu Kumar

Reputation: 571

I faced this issue as well and even after trying to set view state on page or for control it did not workout. The approach to use a hidden field required to me manage sync between date field and the hidden field as the user was playing with the dates. So I decided to set the date again on document.ready as given in the post here, hope this helps.

http://www.himanshusaxena.net/asp-net-text-box-with-jquery-ui-date-picker-value-lost-on-a-post-back/

Upvotes: 5

Johnny DropTables
Johnny DropTables

Reputation: 656

You could consider saving the Textbox's value in a hidden field. I do that with Jquery tabcontrols as they also forget which tab is selected during a postback.

Upvotes: 3

Jishnu A P
Jishnu A P

Reputation: 14390

Make sure that you haven't put <%@ Page EnableViewState="false"%> in .. if you have done so you can still turn on the view state of individual control by <asp:TextBox runat="server" ID="txtCallsMadeFrom" class="field" ViewStateMode="Enabled">

Upvotes: 2

Related Questions