views:

3307

answers:

2

I'm using a jQuery tip plugin to show help tips when the user hovers certain elements of the page.

I need to register the plugin events after the page is loaded using css selectors.

The problem is I'm using an ASP.NET Update Panel and after the first postback, the tips stop working because the update panel replaces the page content but doesn't rebind the javascript events.

I need a way to execute a javascript callback after the Update Panel refreshes its content, so I can rebind the javascript events to have the tips working again.

Is there any way to do this?

+5  A: 

This is probably far from the most elegant solution, but its a solution nonetheless:

public class UpdatePanel : System.Web.UI.UpdatePanel
{
    /// <summary>
    /// Javascript to be run when the updatepanel has completed updating
    /// </summary>
    [Description("Javascript to be run when the updatepanel has completed updating"),
     Category("Values"),
     DefaultValue(null),
     Browsable(true)]
    public string OnUpdateCompleteClientScript
    {
     get
     {
      return (string)ViewState["OnUpdateCompleteClientScript"];
     }
     set
     {
      ViewState["OnUpdateCompleteClientScript"] = value;
     }
    }

    protected override void OnPreRender(System.EventArgs e)
    {
     base.OnPreRender(e);
     if(!string.IsNullOrEmpty(this.OnUpdateCompleteClientScript))
      Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Concat("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args){for(var panelId in sender._updatePanelClientIDs){if(sender._updatePanelClientIDs[panelId] == '", this.ClientID, "'){", this.OnUpdateCompleteClientScript, "}}});"), true);
    }
}

Use it like this:

<uc:UpdatePanel OnUpdateCompleteClientScript="alert('update complete');">
    <!-- stuff in here -->
</uc:UpdatePanel>

Of course you'll need to register the custom control in youre webconfig or page to use it like this.

Edit: also, have you looked at jquery.live?

Andrew Bullock
The custom Update Panel User Control is overkill for my problem, but I didn't know about the jquery.live method and it would probably work and solve my problem!But in this case I think the solution presented by Russ Cam is better and I already tried it and works good.Thanks for your help. :)
TNunes
There must be an easier way..?
HasanGursoy
+12  A: 

Instead of putting your jQuery code inside of $(document).ready(), put it inside

function pageLoad(sender, args) { 
    ... 
}

pageLoad is executed after every postback, synchronous or asynchronous. pageLoad is a reserved function name in ASP.NET AJAX that is for this purpose. $(document).ready() on the other hand, is executed only once, when the DOM is initially ready/loaded.

See this Overview of ASP.NET AJAX client lifecycle events

And also take a look at Dave Ward's great post - $(document).ready() and pageLoad() are not the same!

Russ Cam
Thanks for your answer. I didn't know there was a client-side pageLoad event and it's exactly what I need. Problem solved. :)
TNunes
i didnt know that either, useful! bear in mind i suspect this will occur for all UPs on a page, you'll need my clientid filter to be specific
Andrew Bullock