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:
 
// 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(); 
} 

Related articles: