UpdatePanel and JQuery Plugin
Supported by Nova Outsourcing
UpdatePanel is the powerful utility in Microsoft Asp.net family for asynchronous posback. JQuery is the popular framework to facilitate coding in the client end. When the two work together, issues occur.
We normally code with JQuery plugin similar to the code below.
<script type="text/javascript"> $(document).ready(function () { //jMP3 init $(".mp3player").jmp3({ showfilename: "false", backcolor: "000000", forecolor: "00ff00", width: 30, showdownload: "true" }); }); }; </script>
But if the code is in as UpdatePanel, as the following structure, the issue will happen.
You will find the JQuery Plugin only works when the page is first loaded. The JQuery Plugin disappears immediately when any asynchronous postback occurs.
It is because that $(document).ready(…) only work when the whole document of the page is loaded. When the content is partially loaded by the asynchronous postback, it doesn’t work. So the JQuery Plugin is not applied to the elements.
To address the issue, we would ask ScriptManager for help. The ScriptManager has the following events in client end.
PageRequestManager.beginRequest | before the asynchronous postback happen |
PageRequestManager.pageLoading | after the beginRequest but before the content in the UpdatePanel is updated |
PageRequestManager.pageLoaded | after the document in the page is loaded and after the content in the UpdatePanel is updated |
So we replace the $(document).ready(…) with the following code.
<script type="text/javascript"> Sys.Application.add_init(app_init); function app_init() { var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_pageLoaded(function () { $(".mp3player").jmp3({ showfilename: "false", backcolor: "000000", forecolor: "00ff00", width: 30, showdownload: "true" }); }); }; </script>
Then the UpdatePanel and JQuery Plugin work together.
Supported by Nova Outsourcing
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步