Async postback doesn't cause document.ready to be executed

Question

I've had to implement some changes to a user control that's used in a couple of pages. The user control contains some JQuery to handle a paging task (displays 3 months of data and hides 9 at a time). When the control is loaded, it will automatically display the current quarter and executes this code in $(document).ready().

The problem I have is that in one of the pages the user control is used, the control isn't visible on page load. An async postback is used to change the visibility but this doesn't execute ready().

I found a snippet which allows the hosting page to intercept the EndResponse of the partial postback but I still can't execute the function within the usercontrol.

Does anyone have any suggestions?

Cheers

Dave

Answer 1

As I did, you're going to hate the prescribed Microsoft answer. The "prescribed" answer is to use the PageRequestManager to setup a request handler. This request handler is (then) executed after each partial-postback is completed.

The Request Handler Example:

<script id="events" type="text/javascript">

    jQuery(document).ready(function() {

        // Your normal code goes here
        setupSomething();
        initializeSomethingElse();

        // Setup your partial-postback event handler.
        // This is used to rewire all events since all are 'lost' after partial-postback.
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(requestHandler);
    });

    ///<summary>partial postback event handler. Executed after the partial postback is completed. Clears modal popup textboxes</summary>
    ///<param name="sender"></param>
    ///<param name="args">http://www.asp.net/ajax/documentation/live/ClientReference/Sys.WebForms/EndRequestEventArgsClass/default.aspx</param>
    function requestHandler(sender, args) {

        if (args.get_error() == undefined) {

            // Your normal code goes here
            setupSomething();
            initializeSomethingElse();
        }
        else
            alert(args.get_error()); // Do something
    }
</script>

That Brings Us To The Simple Answer:
Why not initialize your user-control explicitly from your code-behind and keep that initializing JavaScript within your user-controls HTML (itself).

void YourUserControl_PreRender(object sender, EventArgs e)
{
    try
    {

    }
    catch (Exception ex)
    {

    }
    finally 
    {
        // Do this
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "registerInitializer", buildInitializer(), true);
    }
}

Once rendered, the "buildInitializer" logic says, "If this function exists on the client...call it." And...it works every time.

private string buildInitializer()
{
    StringBuilder javascript = new StringBuilder();

    javascript.Append("if (window.initializeMyControl) {");
    javascript.Append("if(typeof window.initializeMyControl == 'function') { initializeMyControl(); }");
    javascript.Append("}");

    return javascript.ToString();
}

Now Your User-Controls Initialization Can Live In The User-Control Where It Should Be:

<script type="text/javascript">
    function initializeMyControl() {

        // Your normal code goes here
        setupSomething();
        initializeSomethingElse();
    }
</script>