ASP.Net Asynchronous Postback stopping JavaScript graph from drawing

Question

I have a JavaScript graph that is reading GridView table data and drawing onto the page, which is working quite nicely. I also have a dropdown that Asynchronously updates the table data when selecting a different dropdown. When this happens, the JavaScript will no longer draw the data after initially loading the page correctly. My theory is that the JavaScript runs first and notices the table data is empty on it's initial state, as the async refresh finally completes after the JavaScript has run.

How can I get the JavaScript to execute after the Async refresh? I have tried placing the script in the <ContentTemplate> section of the UpdatePanel, but this doesn't seem to make a difference.

<asp:UpdatePanel ID="upTeamSelect" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="form-grid">               
            <p>Team</p>
            <asp:DropDownList ID="cmbUser" cssclass="form-list" runat="server" AutoPostBack="True" DataSourceID="AP_Users" DataTextField="sr_userName" DataValueField="sr_usserName">
            </asp:DropDownList>

            <asp:SqlDataSource ID="AP_Team"  runat="server" ConnectionString="<%$ ConnectionStrings:<REDACTED>> %>" SelectCommand="SELECT [sr_userName] FROM [sr_users] WHERE ([sr_active] = @sr_active)" >
                <SelectParameters>
                    <asp:Parameter DefaultValue="TRUE" Name="sr_active" Type="Boolean" />
                </SelectParameters>
            </asp:SqlDataSource>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cmbTeam" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

<Script>
    <!-- Javascript graph here -->
</Script>

Answer 1

You can use the client page life-cycle events for this.
Eg if you want to do something after every postback of the page (doesn't matter if ajax postback or full postback), you use the page_loaded event like this:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    // update/init your graph data here
}

For more information about client side event handling take a look here .