UpdatePanel and jQuery are not compatible with local refresh jquery invalidation
- 2020-06-23 00:09:11
- OfStack
During the project, it was found that UpdatePanel was disabled after a local refresh where UpdatePanel was used.
Later, I found that the ready event in jquery would run once DOM was fully loaded, but when we used UpdatePanel, it only updated partially and did not reload all Dom of the page, so the ready event in jquery would not be executed again. Therefore, we can extract the code executed in the ready event, and then execute the jQuery initialization code once after each local refresh of UpdatePanel by capturing the EndRequest event of ScriptManager:
Later, I found that the ready event in jquery would run once DOM was fully loaded, but when we used UpdatePanel, it only updated partially and did not reload all Dom of the page, so the ready event in jquery would not be executed again. Therefore, we can extract the code executed in the ready event, and then execute the jQuery initialization code once after each local refresh of UpdatePanel by capturing the EndRequest event of ScriptManager:
// To deal with ajax and ScriptManager The conflict of
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
$(function () {
$("tbody").find("input:checkbox").each(function (key, val) {
$(val).click(function () {
var cbxId = $(this).attr("id");
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state, "fid": "SamID" }, isReturnStatus);
});
});
$("thead").find("input:checkbox").click(
function () {
if (confirm(" Make sure you update this 1 Column data? ") == true) {
var cbxId = $(this).attr("id");
var name = cbxId.substr(16);
var v = "tbody ." + name + " input[type='checkbox']";
if ($(this).attr("checked") == "checked") {
$(v).attr("checked", true);
}
else {
$(v).attr("checked", false);
}
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state }, isReturnStatus);
}
else {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
else {
$(this).attr("checked", true);
}
}
});
});
initCheckedStaus();
}