jquery calls are not fired in update panel

Question

I have a update panel which updates each 1 minutes.

In side it, I have a two input files, when I click on each one, a datepicker function is called. I include these scripts for the datepicker

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>

Also, I have this script in my head tag

<script>
        $(function () {
            $("#CldrFrom, #CldrTo").datepicker();
        });
    </script>

The datepicker works before the update panel updates the content. but after that, It is not working anymore.

what should I do please?

Note

I already have function pageLoad(sender, args) in one of my scripts but I don't think this could cause the problem

possible duplicate of [Asp.Net UpdatePanel in Gridview Jquery DatePicker](http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker) — Aristos, Apr 14 '14 at 12:25
Try running `$("#CldrFrom, #CldrTo").datepicker();` again after each update. — wrxsti, Apr 14 '14 at 12:26
@Aristos it is not duplicated my friend, that is a gridview, which makes it a compltelely different — user3432257, Apr 14 '14 at 12:27
@user3432257 Is not the gridview the issue, but the code for the UpdatePanel. See my answer there, is exactly the same way as here. — Aristos, Apr 14 '14 at 12:28
@wrxsti where please? do you mean in the `pageload` function ? — user3432257, Apr 14 '14 at 12:28
yes in the pageload as the last thing you do within the function or as a callback. — wrxsti, Apr 14 '14 at 12:28

score 2 · Accepted Answer · answered Apr 14 '14 at 12:28

2

You need to reinitialise the date picker after each refresh in update pannel, Use this code

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});

function PageLoaded(sender, args) {
    $("#CldrFrom, #CldrTo").datepicker();

}

answered Apr 14 '14 at 12:28

Anoop Joshi P

25,373
8
32
53

let me try it and tell you the result – user3432257 Apr 14 '14 at 12:28
1

Yup that should do it. – wrxsti Apr 14 '14 at 12:29
Guys, it seems that even before the update panel works, my datepicker is not working. why please? – user3432257 Apr 14 '14 at 12:31
As I showed you. I am initalizing it in my script in my head tag. is this correct? it was working before I added the updatepanel – user3432257 Apr 14 '14 at 12:33
1

Try to put an alert in the PageLoaded() function to check whether it is getting fired after each updation – Anoop Joshi P Apr 14 '14 at 12:35
I did that and I can see the alert each minute. – user3432257 Apr 14 '14 at 12:39
my function is `pageLoad`, but yours is `PageLoaded` . is it a typo please? – user3432257 Apr 14 '14 at 12:40

score 0 · Answer 2 · edited Apr 14 '14 at 19:10

0

$(function () 
{
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoadedUserFunc)
});

function PageLoadedSUserFunc(sender, args) 
{
    $("#FromDate, #ToDate").datePicker();
}
//Select by Id method is used here.

Assuming that FromDate and ToDate are existing in the updatepanel which will get refreshed everytime whenever pageload happens.

edited Apr 14 '14 at 19:10

Jaroslav Kadlec

2,505
4
32
43

answered Apr 14 '14 at 18:38

Laxmeesh Joshi

1
2

jquery calls are not fired in update panel

Note

2 Answers2