Author:
Joe Hakooz
Category:
ASP.NET
I'm working on a project that uses jQuery, an ASP.NET ListView, and RadAjax. The ajaxified ListView displays video thumbnails which, once clicked, opens a jQuery ColorBox to display the video.
Everything works fine until a partial page postback is triggered. Then the jQuery calls fail to work! This is of course because jQuery is only initialized after document.ready...
// JS FILE
$(document).ready(function() {
// ...jQuery code...
});
So after a partial page postback the above function is not called and it "breaks" all my jQuery calls.
The solution is very simple. I wrap all of my jQuery code in a function called initJQuery. I then call this function from document.ready...
// JS FILE
$(document).ready(function() {
initJQuery();
});
function initJQuery() {
// ...jQuery code...
};
Finally, I add ClientEvents-OnResponseEnd="OnResponseEnd" to the RadAjaxPanel declaration, add the OnResponseEnd javascript function to the top of my ASPX page, and simply call initJQuery from the OnResponseEnd function...
<!-- ASPX PAGE -->
<script type="text/javascript">
function OnResponseEnd(sender, eventArgs) {
initJQuery();
}
</script>
......
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnResponseEnd="OnResponseEnd">
........
</telerik:RadAjaxPanel>
And presto... jQuery is initialized after each partial page postback. Of course you may need to limit when initJQuery is called for performance reasons, but you get the idea.
I hope this saves you some time!