UpdatePanel and jQuery in ASP. NET use both

Today, UpdatePanel is used in. NET, and the input box in it uses the calendar selector of jQuery:

[Javascript]
<Script type = "text/javascript">
$ (Function (){
$ ("# Ctl00_ContentPlaceHolder1_txtDateFrom"). datepicker ({
Inline: true,
DayNamesMin: ["day", "1", "2", "3", "4", "5", "6"], // The Name Of The region week is Chinese.
FirstDay: 1, // every week starts from Monday
// The name of the regionalized month is "Chinese habits" monthNames: ["January", "February", "March", "April", "May", "June", "July ", "August", "August"],
ShowMonthAfterYear: true, // The month is displayed after the year.
YearSuffix: "year", // year suffix
ChangeYear: true,
ChangeMonth: true,
ShowButtonPanel: true, // display button panel
CurrentText: "Today", // text on the current date button
CloseText: "close", // text on the close button
DateFormat: "yy-mm-dd"
});
}
</Script>

<Script type = "text/javascript">
$ (Function (){
$ ("# Ctl00_ContentPlaceHolder1_txtDateFrom"). datepicker ({
Inline: true,
DayNamesMin: ["day", "1", "2", "3", "4", "5", "6"], // The Name Of The region week is Chinese.
FirstDay: 1, // every week starts from Monday
// The name of the regionalized month is "Chinese habits" monthNames: ["January", "February", "March", "April", "May", "June", "July ", "August", "August"],
ShowMonthAfterYear: true, // The month is displayed after the year.
YearSuffix: "year", // year suffix
ChangeYear: true,
ChangeMonth: true,
ShowButtonPanel: true, // display button panel
CurrentText: "Today", // text on the current date button
CloseText: "close", // text on the close button
DateFormat: "yy-mm-dd"
});
}
</Script>

 

After running:

 

However, after running the task, click "query" and partial page refresh. I found that the calendar selector failed and found a lot of information. They said:

Analysis 1: UpdatePanel
UpdatePanel is mainly used for partial refresh in applications to avoid the Postback of the entire page.
The core of UpdatePanel local refresh is MicrosoftAjaxWebForm. js file. Its partial refresh process is to submit the page to the server (including ViewState). After the server code is executed, the HTML in UpdatePanel is re-rendered asynchronously.
In this process, the status of other parts of the page does not change.

 

Analysis 2: jQuery
JQuery can add various attributes and event handles to HTML elements through simple code. Here we can see the official documentation:
Tutorials: How jQuery Works
Here, we can know that jQuery has an important event mark "ready". Generally, the effect of HTML elements and the event handle are added through this ready event, as shown below:
$ (Document). ready (function (){
$ ("P"). text ("The DOM is now loaded and can be manipulated .");
});
The official explanation for this is: The ready event will run once after the DOM is fully loaded. OK. At this point, the cause of the problem is almost clear:
Cause:
Because the text box element in the UpdatePanel is overwritten after partial refreshing, and the entire DOM tree is not reloaded, The jQuery ready event is not triggered, therefore, the text box element loses its original special effect.

Solution:
We can extract the code executed in the ready event:

[Javascript]
<Script type = "text/javascript">
Function showdatepicker (){
$ ("# Ctl00_ContentPlaceHolder1_txtDateFrom"). datepicker ({
Inline: true,
DayNamesMin: ["day", "1", "2", "3", "4", "5", "6"], // The Name Of The region week is Chinese.
FirstDay: 1, // every week starts from Monday
// The name of the regionalized month is "Chinese habits" monthNames: ["January", "February", "March", "April", "May", "June", "July ", "August", "August"],
ShowMonthAfterYear: true, // The month is displayed after the year.
YearSuffix: "year", // year suffix
ChangeYear: true,
ChangeMonth: true,
ShowButtonPanel: true, // display button panel
CurrentText: "Today", // text on the current date button
CloseText: "close", // text on the close button
DateFormat: "yy-mm-dd"
});
}
</Script>

<Script type = "text/javascript">
Function showdatepicker (){
$ ("# Ctl00_ContentPlaceHolder1_txtDateFrom"). datepicker ({
Inline: true,
DayNamesMin: ["day", "1", "2", "3", "4", "5", "6"], // The Name Of The region week is Chinese.
FirstDay: 1, // every week starts from Monday
// The name of the regionalized month is "Chinese habits" monthNames: ["January", "February", "March", "April", "May", "June", "July ", "August", "August"],
ShowMonthAfterYear: true, // The month is displayed after the year.
YearSuffix: "year", // year suffix
ChangeYear: true,
ChangeMonth: true,
ShowButtonPanel: true, // display button panel
CurrentText: "Today", // text on the current date button
CloseText: "close", // text on the close button
DateFormat: "yy-mm-dd"
});
}
</Script>

 

Add this function in jQuery:

[Javascript]
<Script type = "text/javascript">
$ (Function (){
Showdatepicker ();
});
</Script>

<Script type = "text/javascript">
$ (Function (){
Showdatepicker ();
});
</Script>

Then, by capturing the ScriptManager EndRequest event, execute the jQuery initialization code once after each partial UpdatePanel refresh, as shown below:

 

[Javascript]
<Script type = "text/javascript">
Function load (){
Sys. WebForms. PageRequestManager. getInstance (). add_endRequest (EndRequestHandler );
}
Function EndRequestHandler (){
Showdatepicker ();
}
</Script>

<Script type = "text/javascript">
Function load (){
Sys. WebForms. PageRequestManager. getInstance (). add_endRequest (EndRequestHandler );
}
Function EndRequestHandler (){
Showdatepicker ();
}
</Script>

 

Finally, add the load () function in <body>, that is:

[Html]
<Body onload = "load ()">

<Body onload = "load ()">

 

In this way, jQuery code can be executed even if UpdatePanel is refreshed locally.