1 minute read

I was recently having problems getting the loading GIF to show up when I was updating my UpdatePanel.  This is the solution I came up with to get it working.

<rts:realtimesearchmonitor runat="server" ID="RealTimeReleaseSearch" Interval="700" AssociatedUpdatePanelID="ResultsUpdatePanel">
    <rts:ControlMonitorParameter TargetId="TextBox1" EventName="TextChanged" />
<asp:UpdatePanel ID="ResultsUpdatePanel" runat="server">
    <div style="text-align:center;">
      <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="ResultsUpdatePanel" DynamicLayout="true">
          <img src="support/images/loading.gif" />
    <div id="releases">
      <MC:CustomRepeater id="Repeater1" runat="server">
            HTML HERE
          <li>No results matched your query.</li>
<script type="text/javascript">

  var prm = Sys.WebForms.PageRequestManager.getInstance();
  function BeginRequestHandler(sender, args) {
    var elem = args.get_postBackElement();
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    // First set associatedUpdatePanelId to non existant control
    // this will force the updateprogress not to try and show itself.

    var o = $find('<%= UpdateProgress1.ClientID %>');

    // Then based on the control ID, show the updateprogress
    //if (elem.id == '<%= TextBox1.ClientID %>')
    // {
    document.getElementById("releases").style.display = "none";

    var updateProgress1 = $get('<%= UpdateProgress1.ClientID %>');
    updateProgress1.style.display = '';

  function EndRequestHandler(sender, args) {
    var updateProgress1 = $get('<%= UpdateProgress1.ClientID %>');

    updateProgress1.style.display = (updateProgress1.style.display == '') ? 'none' : '';

The javascript at the bottom determines when the updatepanel is being refreshed, and uses two handlers to change the css of the page to show my loading gif.