Jquery datepicker is not working in update panel

Question

0.00/5 (No votes)

See more:

i m trying to call jquery on below control

HTML

<input type="text" name="hearingDate1" id="hearingDate1" size="8" class="form-control" />

but its not working due to update panel.
if i remove update panel then its working fine.

What I have tried:

JavaScript

<script type="text/javascript">

        $(document).ready(function (e) {
            $("#clockpick,#hearingTime").clockpick({
                valuefield: 'hearingTime'
            });
            $('#hearingDate').datepick({ firstDay: 1, dateFormat: 'dd/mm/yyyy', defaultDate: false, selectDefaultDate: true,
                minDate: '0', maxDate: '+40d',
                renderer: $.extend({}, $.datepick.defaultRenderer,
        { picker: $.datepick.defaultRenderer.picker.
            replace(/\{link:clear\}/, '{button:clear}').
            replace(/\{link:close\}/, '{button:close}')
        }),
                showTrigger: '#imgDate'
            });
        });

        $(document).ready(function (e) {
            $("#clockpick1,#hearingTime1").clockpick({
                valuefield: 'hearingTime1'
            });
            $('#hearingDate1').datepick({ firstDay: 1, dateFormat: 'dd/mm/yyyy', defaultDate: false, selectDefaultDate: true,
                minDate: '0', maxDate: '+40d',
                renderer: $.extend({}, $.datepick.defaultRenderer,
        { picker: $.datepick.defaultRenderer.picker.
            replace(/\{link:clear\}/, '{button:clear}').
            replace(/\{link:close\}/, '{button:close}')
        }),
                showTrigger: '#imgDate1'
            });
        });

    </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<contenttemplate>

<asp:Label ID="lblreqdetails" runat="server" Text="Request Details:">

*
Enter Date and Time:

*
Enter Date and Time:

<asp:Button ID="btn_submit" runat="server" Text="Submit" OnClick="btn_submit_Click"
CssClass="btn btn-success" />

Posted 22-Aug-16 22:19pm

manishss

Updated 22-Aug-16 23:33pm

v5

Add a Solution

Comments

Rajeev Jayaram 23-Aug-16 5:36am

Does it work for the first time?

2 solutions

Solution 2

Does it work for the first time? If so, after the 'update panel' updates for the first time all events are unsubscribed. Re-subscribe using the PageRequestManager which will be available, because you have the update panel in the page.

For more info, see this Sys.WebForms.PageRequestManager endRequest Event[^]

Posted 22-Aug-16 23:33pm

Rajeev Jayaram

Comments

manishss 23-Aug-16 6:54am

its not working for the first time also.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

F-ES Sitecore · Accepted Answer · 2016-08-22T22:29:00

Format the code in your question properly, and also try and only show the relevant bits.

Regardless, your issue is probably because you set the date picker on an element using $(document).ready, but when the update panel fires it destroys and re-creates the elements inside it so the element your date picker was attached to is gone, replaced with something that looks the same, but doesn't have your date picker attached.

Rather than init your date picker using document ready, use the script manager and pageLoad;

How to run javascript after updatepanel execution completed | The ASP.NET Forums[^]