Correct way to use jQuery in ASP page with UpdatePanels

Question

I have a ASP web page (.NET 3.5) that has 2 update panels on it.
I'm also using jQuery t display tips and create tabs using jQuery UI.

Webpage works fine until I update content of UpdatePanel. Searching on net and doing something on my one I came with this solution:

In header of my page I'm linking my js files:

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="../js/jquery-ui-1.8.20.custom.min.js"> </script>
<script type="text/javascript" src="../js/jquery.ui.selectmenu.js"></script>
<script type="text/javascript" src="../js/tipsy.js"></script>
<script type="text/javascript" src="scripts.js"></script>

Then I define my ToolkitScriptManager like so:

<asp:ToolkitScriptManager runat="server" EnablePartialRendering="True">
    <Scripts>
        <asp:ScriptReference Path="refresh.js"/>
    </Scripts>
</asp:ToolkitScriptManager>

Content of my refresh.js looks like so:

Sys.Application.add_init(AppInit);

function AppInit(sender) {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(End);
}

function End(sender, args) {
    initAll();
}

And my scripts.js looks like this:

...
//here I create all my functions
...

function initAll()
{
    //here I call I my functions
    $("#tip1").tipsy({ gravity: 'e', fade: true, offset: 10 });
    initDatePicker();
    $("#tabs").tabs();
    $("#radioset1").buttonset();
    $("#radioset2").buttonset();
    $('select').selectmenu();
    $("input:button, input:submit").button();
    initDatePickers();
    initAutocomplete();
}

$(function() {
    initAll();
});

//this function shows content of my page after jQuery is ready.
$(window).load(function() {
    $("#loading").hide("fast", function() {
        $("div.fullsize").show()
    })
});

This way I have all my functions created on page loaded and then when I update my updatePanel they are "refreshed".

This works for me now, but I'm wondering if this is the correct way and optimized. When I add event listeners in my initAll function after updatePanel refresh they are added again (am I right?).

My questions:

What would be the best way to use jQuery inside ASP page and to use it with updatePanels, so that after updatePanel updates jQuery code will work.
How to ensure that all javascript is loaded before I show my content? Is $(window).load() enough? I use multiple js files in my solution and I don't want my site to throw errors because I use function from file that isn't loaded.

this is the correct way. they all added again, but the previous one they have removed after the dom change from the update panel — Aristos, Aug 10 '12 at 10:31
@Aristos - Thanks for that comment :) This makes me feel better as this is correct. What about my scripts.js? Do I must add `$(window).load()` separately or can I somehow combine it into `$(function (){})`? — Misiu, Aug 10 '12 at 10:35
check Barbaros Alp's solution on this page http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels — Ankush Jain, Aug 10 '12 at 12:26
@AnkushJain - Thanks for that link, but this is basically my solution :) I'm doing this in ToolkitScriptManager instead of UpdatePanel ContentTemplate. — Misiu, Aug 10 '12 at 12:32

Correct way to use jQuery in ASP page with UpdatePanels

0 Answers0