locked
datepicker in doesn't trigger TextChanged RRS feed

  • Question

  • User-837152306 posted

    Hi,

    I want to update a field based on the selection of an datepicker field. The page is using masterpages and an updatepanel. There is also an dropdownbox that does a postback.

    What I am experiencing is that the TextChanged event never seems be triggered. The trigger in the dropdownbox does work, but when I first touch the datepicker field to change the date, the postback on the dropdownbox doesn't occur anymore, and the other way around, when I first touch the dropdownbox, the datepicker is not showing a calendar.

    The only thing I want to accomplish is that if the date is changed in the txtInvoiceDate using date picker, the Protected Sub txtInvoiceDate_TextChanged is triggered. Same for the dropdownbox. I did add the UpdatePanel because this seems the correct way, but if it isn't required I can remove it.

    This is the relevant code:

    <asp:Content ID="HeaderInvoice" ContentPlaceHolderID="HeaderContent" runat="server">
    <script src="Scripts/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.12.1.min.js" type="text/javascript"></script> <link href="css/jquery-ui.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript"> //On Page Load. $(function () { SetDatePicker(); }); //On UpdatePanel Refresh. var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(function (sender, e) { if (sender._postBackSettings.panelsToUpdate != null) { SetDatePicker(); } }); }; function SetDatePicker() { $('.date').datepicker({ dateFormat: 'dd/mm/yy' }); } </script>
    </asp:Content>
    <asp:Content ID="contentInvoice" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:ScriptManager runat="server" ID="scriptmanager" /> <div class="jumbotron"> <asp:UpdatePanel ID="upInvoice" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div class="row"> <div class="col-md-12"> <p>Date:<br /><asp:TextBox ID="txtInvoiceDate" runat="server" Width="120px" AutoPostBack="true" CssClass="date" /></p> </div> </div> <div class="col-md-12"> <p>Valuta:<br /> <asp:DropDownList ID="ddlValuta" runat="server" AutoPostBack="true"> <asp:ListItem Text="Euro" Value="EUR" /> <asp:ListItem Text="US Dollar" Value="USD" /> </asp:DropDownList> </p> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="txtInvoiceDate" EventName="TextChanged" /> <asp:AsyncPostBackTrigger ControlID="ddlValuta" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> </div> </asp:Content>
        Protected Sub ddlValuta_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlValuta.SelectedIndexChanged
           lblResult.Text = "DDL"
        End Sub
    
        Protected Sub txtInvoiceDate_TextChanged(sender As Object, e As EventArgs) Handles txtInvoiceDate.TextChanged
           lblResult.Text = "Date"
        End Sub

    Wednesday, December 12, 2018 8:45 PM

Answers

  • User283571144 posted

    Hi WimVM,

    What I am experiencing is that the TextChanged event never seems be triggered. The trigger in the dropdownbox does work, but when I first touch the datepicker field to change the date, the postback on the dropdownbox doesn't occur anymore, and the other way around, when I first touch the dropdownbox, the datepicker is not showing a calendar.

    The only thing I want to accomplish is that if the date is changed in the txtInvoiceDate using date picker, the Protected Sub txtInvoiceDate_TextChanged is triggered. Same for the dropdownbox. I did add the UpdatePanel because this seems the correct way, but if it isn't required I can remove it.

    According to your codes, I don't find the lblResult control in your page.

    If this control is outside the updatepanel, it will not change the label when trigger postback, since if you use updatepanel, the page will not refresh, page will just update update panel's content.

    I suggest you could put the lblResult control inside the update panel.

    Besides, I suggest you could put Sys.WebForms.PageRequestManager inside the jquery On Page Load function. Then your codes will work well.

    More details, you could refer to below codes:

    ASPX:

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="DatePickerTrigger.aspx.vb" Inherits="VBWebform.DatePickerTrigger" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <link href="Content/themes/base/datepicker.css" rel="stylesheet" />
        <script src="Scripts/jquery-1.12.4.min.js"></script>
        <script src="Scripts/jquery-ui-1.12.1.min.js"></script>
        <script type="text/javascript">
            //On Page Load.
            $(function () {
                SetDatePicker();
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_endRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate != null) {
                            SetDatePicker();
                        }
                    });
                };
            });
    
            //On UpdatePanel Refresh.
    
            function SetDatePicker() {
                $('.date').datepicker({ dateFormat: 'dd/mm/yy' });
            }
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:ScriptManager runat="server" ID="scriptmanager" />
        <div class="jumbotron">
            <asp:UpdatePanel ID="upInvoice" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="row">
                        <div class="col-md-12">
                            <p>Date:<br />
                                <asp:TextBox ID="txtInvoiceDate" runat="server" Width="120px" AutoPostBack="true" CssClass="date" /></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <p>
                            Valuta:<br />
                            <asp:DropDownList ID="ddlValuta" runat="server" AutoPostBack="true">
                                <asp:ListItem Text="Euro" Value="EUR" />
                                <asp:ListItem Text="US Dollar" Value="USD" />
                            </asp:DropDownList>
                        </p>
                    </div>
    
                    <div class="col-md-12">
                        <p>
                            Valuta:<br />
                            <asp:Label ID="lblResult" runat="server" Text=" "></asp:Label>
                        </p>
                    </div>
    
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="txtInvoiceDate" EventName="TextChanged" />
                    <asp:AsyncPostBackTrigger ControlID="ddlValuta" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
    
    
        </div>
    </asp:Content>
    

    Code-behind:

        Protected Sub ddlValuta_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlValuta.SelectedIndexChanged
            lblResult.Text = "DDL"
        End Sub
    
        Protected Sub txtInvoiceDate_TextChanged(sender As Object, e As EventArgs) Handles txtInvoiceDate.TextChanged
            lblResult.Text = "Date"
        End Sub

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 13, 2018 6:30 AM

All replies

  • User283571144 posted

    Hi WimVM,

    What I am experiencing is that the TextChanged event never seems be triggered. The trigger in the dropdownbox does work, but when I first touch the datepicker field to change the date, the postback on the dropdownbox doesn't occur anymore, and the other way around, when I first touch the dropdownbox, the datepicker is not showing a calendar.

    The only thing I want to accomplish is that if the date is changed in the txtInvoiceDate using date picker, the Protected Sub txtInvoiceDate_TextChanged is triggered. Same for the dropdownbox. I did add the UpdatePanel because this seems the correct way, but if it isn't required I can remove it.

    According to your codes, I don't find the lblResult control in your page.

    If this control is outside the updatepanel, it will not change the label when trigger postback, since if you use updatepanel, the page will not refresh, page will just update update panel's content.

    I suggest you could put the lblResult control inside the update panel.

    Besides, I suggest you could put Sys.WebForms.PageRequestManager inside the jquery On Page Load function. Then your codes will work well.

    More details, you could refer to below codes:

    ASPX:

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="DatePickerTrigger.aspx.vb" Inherits="VBWebform.DatePickerTrigger" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <link href="Content/themes/base/datepicker.css" rel="stylesheet" />
        <script src="Scripts/jquery-1.12.4.min.js"></script>
        <script src="Scripts/jquery-ui-1.12.1.min.js"></script>
        <script type="text/javascript">
            //On Page Load.
            $(function () {
                SetDatePicker();
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_endRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate != null) {
                            SetDatePicker();
                        }
                    });
                };
            });
    
            //On UpdatePanel Refresh.
    
            function SetDatePicker() {
                $('.date').datepicker({ dateFormat: 'dd/mm/yy' });
            }
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:ScriptManager runat="server" ID="scriptmanager" />
        <div class="jumbotron">
            <asp:UpdatePanel ID="upInvoice" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="row">
                        <div class="col-md-12">
                            <p>Date:<br />
                                <asp:TextBox ID="txtInvoiceDate" runat="server" Width="120px" AutoPostBack="true" CssClass="date" /></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <p>
                            Valuta:<br />
                            <asp:DropDownList ID="ddlValuta" runat="server" AutoPostBack="true">
                                <asp:ListItem Text="Euro" Value="EUR" />
                                <asp:ListItem Text="US Dollar" Value="USD" />
                            </asp:DropDownList>
                        </p>
                    </div>
    
                    <div class="col-md-12">
                        <p>
                            Valuta:<br />
                            <asp:Label ID="lblResult" runat="server" Text=" "></asp:Label>
                        </p>
                    </div>
    
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="txtInvoiceDate" EventName="TextChanged" />
                    <asp:AsyncPostBackTrigger ControlID="ddlValuta" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
    
    
        </div>
    </asp:Content>
    

    Code-behind:

        Protected Sub ddlValuta_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlValuta.SelectedIndexChanged
            lblResult.Text = "DDL"
        End Sub
    
        Protected Sub txtInvoiceDate_TextChanged(sender As Object, e As EventArgs) Handles txtInvoiceDate.TextChanged
            lblResult.Text = "Date"
        End Sub

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 13, 2018 6:30 AM
  • User-837152306 posted

    It didn't work at first, but then I noticed that I had a "Response.Write" line in the TextChange Sub, as soon as I removed that it worked. The label was inside the updatepanel, but I removed it when cleaning up the code for keeping only the relevant part. Thanks for your help!

    Thursday, December 13, 2018 7:27 AM