CODEWITHSUNDEEP
javascriptasp.net-ajaxupdatepanelcallback
tsbnunes
tsbnunes

Reputation: 1003

How to have a javascript callback executed after an update panel postback?

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?

Upvotes: 72

Views: 69932

Answers (5)

rball
rball

Reputation: 6955

The pageLoad didn't work. I used this instead:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded() {
}

Upvotes: 19

Rover
Rover

Reputation: 2230

Use pageLoaded event and check whether callback or postback:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function (sender, args) {
    if (args._panelsUpdated && args._panelsUpdated.length > 0) {
        //callback;
    }
    else {
        //postback;
    }
});

Upvotes: 0

Martin Braun
Martin Braun

Reputation: 12579

If you want to do specific operations before and after the UpdatePanel has loaded, you can override BeginPostbackRequest and EndPostbackRequest like so: 

var postbackControl = null;
var updatePanels = null;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginPostbackRequest);
prm.add_endRequest(EndPostbackRequest);

function BeginPostbackRequest(sender, args) {
    prm._scrollPosition = null;
    postbackControl = args.get_postBackElement();
    postbackControl.disabled = true;
    updatePanels = args._updatePanelsToUpdate;
    // do your stuff
}

function EndPostbackRequest(sender, args) {
    // do your stuff
    postbackControl.disabled = false;
    postbackControl = null;
    updatePanels = null;
}

This is very handy if you want to process only HTML that was delivered by the update panel. Some operations require more resources and it would be overkill to process the whole DOM tree on pageLoad.

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125488

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

Upvotes: 169

Andrew Bullock
Andrew Bullock

Reputation: 37378

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?

Upvotes: 12

Related Questions