I have successfully developed a JavaScript graph that retrieves data from a GridView table and displays it on the page. However, I am facing an issue with a dropdown that asynchronously updates the table data when a different option is selected. After the async refresh, the JavaScript stops drawing the data, most likely because it runs before the updated table data is fully loaded.
Is there a way to ensure that the JavaScript executes after the async refresh? I have attempted placing the script in the <ContentTemplate> section of the UpdatePanel but have not seen any improvement.
<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>
<!-- Your custom JavaScript graph code goes here -->
</Script>