[ACCEPTED]-How to have a javascript callback executed after an update panel postback?-callback

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

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

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

See this Overview of ASP.NET AJAX client lifecycle events

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

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

function pageLoaded() {
}

0

This is probably far from the most elegant 5 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 4 it like this:

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

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

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

If you want to do specific operations before 7 and after the UpdatePanel has loaded, you 6 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 5 handy if you want to process only HTML that 4 was delivered by the update panel. Some 3 operations require more resources and it 2 would be overkill to process the whole DOM 1 tree on pageLoad.

Use pageLoaded event and check whether callback 1 or postback:

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