locked
DateTimePicker inside UpdatePanel RRS feed

  • Question

  • User-1952516322 posted

    Hello,

    I have DatetimePicker in UpdatePanel, it is working just for first time then not, actually I tried a lot of things but nothing work, maybe I miss something, please if someone have a right way and answer, help me..

    Wednesday, June 12, 2019 12:56 PM

Answers

  • User-1038772411 posted

    Hello Khalid Salameh,

    Please Refer  this, I hope this will help you

    https://stackoverflow.com/questions/520645/jquery-datepicker-ms-ajax-updatepanel-doesnt-work-after-post-back

    Thank you

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 1:44 PM
  • User288213138 posted

    Hi Khalid Salameh,

    I can't reproduce your problem,but here is a demo you can use as a reference, if you have not solved the problem, please post you aspx code.

    The code:

    <script src="../Scripts/jquery-3.3.1.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/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() {
                $("[id$=txtDate]").datepicker({
                    showOn: 'button',
                    buttonImageOnly: true,
                    buttonImage: 'calendar.png'
                });
            }
        </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        Select Date:
                <asp:TextBox ID="txtDate" runat="server" />
                        <hr />
                        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
                    </ContentTemplate>
                </asp:UpdatePanel>
    
    Aspx.cs:
    protected void Submit(object sender, EventArgs e)
            {
                string selectedDate = Request.Form[txtDate.UniqueID];
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Selected Date: " + selectedDate + "');", true);
            }
    

    The result:

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 11:20 AM

All replies

  • User-1038772411 posted

    Hello Khalid Salameh,

    Please Refer  this, I hope this will help you

    https://stackoverflow.com/questions/520645/jquery-datepicker-ms-ajax-updatepanel-doesnt-work-after-post-back

    Thank you

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 1:44 PM
  • User288213138 posted

    Hi Khalid Salameh,

    I can't reproduce your problem,but here is a demo you can use as a reference, if you have not solved the problem, please post you aspx code.

    The code:

    <script src="../Scripts/jquery-3.3.1.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/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() {
                $("[id$=txtDate]").datepicker({
                    showOn: 'button',
                    buttonImageOnly: true,
                    buttonImage: 'calendar.png'
                });
            }
        </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        Select Date:
                <asp:TextBox ID="txtDate" runat="server" />
                        <hr />
                        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
                    </ContentTemplate>
                </asp:UpdatePanel>
    
    Aspx.cs:
    protected void Submit(object sender, EventArgs e)
            {
                string selectedDate = Request.Form[txtDate.UniqueID];
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Selected Date: " + selectedDate + "');", true);
            }
    

    The result:

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 11:20 AM
  • User-1952516322 posted

    Thanks for [AddWeb] and [samwu] for help.. the issue solved, and in my webpage there is RequiredFieldValidation when I add attribute EnableClientScript="false", it's working fine

    smile

    Friday, June 14, 2019 11:26 AM