locked
CSS style as ASP.NET AJAX progress indicator RRS feed

  • Question

  • User767580559 posted

    Hi,

    I'm attempting to show a progress indicator with css, however, having some difficulty. The progress indicator shows when an event is fired (i.e. mouse clicks) but the indicator continues to show after the event is completed. It appears that the cause of the issue is the id property that is referenced in the function to end the progress indicator isn't available. Here's a sample of the code:

    <link href="css/NotifyUserStyle.css" rel="stylesheet" type="text/css" />
    
    <script language="javascript" >
        // Get a reference to the PageRequestManager.
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    
        // Using that prm reference, hook _initializeRequest
        // and _endRequest, to run our code at the begin and end
        // of any async postbacks that occur.
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
    
        // Executed anytime an async postback occurs.
        function InitializeRequest(sender, args) {
            // Change the Container div's CSS class to .Progress.
            $get('ClientLedgerContainer').className = 'Progress';
            
            // Get a reference to the element that raised the postback,
            //   and disables it.
            $get(args._postBackElement.id).disabled = true;
        }
    
        // Executed when the async postback completes.
        function EndRequest(sender, args) {
            if (sender._postBackSettings.sourceElement.id !== '') {
                // Change the Container div's class back to .Normal.
                $get('ClientLedgerContainer').className = 'Normal';
                // Get a reference to the element that raised the postback
                //   which is completing, and enable it.
                $get(sender._postBackSettings.sourceElement.id).disabled = false;
            }
        }
    </script>
    

    Is there another to end the request and stop showing the progress indicator after the event has completed?

    Help is appreciated.

    Tuesday, October 22, 2019 10:24 PM

All replies

  • User288213138 posted

    Hi wrappingduck,

    but the indicator continues to show after the event is completed

    According to your description, I can't reproduce your question.

    $get(args._postBackElement.id).disabled = true;
    $get(sender._postBackSettings.sourceElement.id).disabled = false;

    What are these two elements? and what is the effect of class "Progress" and "Normal"?

    please post the complete code that can reproduce your question.

    Best regards,

    Sam

    Wednesday, October 23, 2019 8:49 AM
  • User767580559 posted

    Hi samwu,

    Thanks for the reply. It's appreciated. My apologies for leaving out the css to show and hide the progress indicator. It is as follows:

    .Normal
    {
      border: dashed 1px #000000;
      background-color: #FFFFFF;
      cursor: auto;
      padding: 10px;
      width: 200px;
      text-align: center;
    }
     
    .Progress
    {
      border: dashed 1px #000000;
      background-color: #EEEEEE;
      background-image: url(spinner.gif);
      background- center;
      background-repeat: no-repeat;
      cursor: wait;
      padding: 10px;
      width: 200px;
      text-align: center;
    }

    Wednesday, October 23, 2019 4:38 PM
  • User288213138 posted

    Hi wrappingduke,

    I am very sorry, I still can't reproduce your question.

    $get('ClientLedgerContainer').className = 'Progress';

    $get(args._postBackElement.id).disabled = true;

    Because there is no html code or web form code, Please show me your code.

    Best regards,

    Sam

    Friday, October 25, 2019 5:59 AM
  • User767580559 posted

    Here you go:

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="Container" class="Normal">
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <asp:Label ID="Label1" runat="server" Text="Update Me" />
          <asp:Button ID="Button1" runat="server" 
            OnClick="Button1_Click" Text="Button" />
        </ContentTemplate>
      </asp:UpdatePanel>
    </div>
    
    
    protected void Button1_Click(object sender, EventArgs e)
    {
      Thread.Sleep(5000);
     
      Label1.Text = DateTime.Now.ToString();
    }

    You can have a look at Method 1 of 3 Different Ways to Display Progress in an ASP.NET AJAX Application

    Friday, October 25, 2019 3:49 PM
  • User288213138 posted

    Hi wrappingduke,

    but the indicator continues to show after the event is completed

    I tested your code and found that it works fine in my side.

    $get('ClientLedgerContainer').className = 'Normal';

    <div id="Container" class="Normal">

    And I noticed that the id of <div> are different.

    This is result:

    Best regards,

    Sam

    Monday, October 28, 2019 9:22 AM
  • User767580559 posted



    Hi samwu,

    Thanks for the reply. It's appreciated. It appears that the code that was provided was not implemented. Much of the css like the cursor changing doesn't show in your sample. But thank you for your effort. It's appreciated. It appears that the issue is the async postback isn't being captured. 

    Monday, October 28, 2019 4:57 PM
  • User288213138 posted

    Hi wrappingduke,

    It appears that the code that was provided was not implemented. Much of the css like the cursor changing doesn't show in your sample.

    I dubug my code, all the code had been implemented, and the cursor changing is show.

    This is my result:

    Best regards,

    Sam

    Tuesday, October 29, 2019 7:43 AM
  • User767580559 posted
    Hi samwu,

    I don't see a css folder in neither your IDE nor code but it's ok. I appreciate your time and effort. Thx.
    Tuesday, October 29, 2019 1:14 PM
  • User288213138 posted

    Hi wrappingduke,

    I don't see a css folder in neither your IDE nor code but it's ok

    Here you can see the css had been assigned to the <div>.

    If you have any question, please let me know.

    Best regards,

    Sam.

    Wednesday, October 30, 2019 1:40 AM
  • User767580559 posted
    I still don't see the css code.
    Wednesday, October 30, 2019 2:34 AM
  • User288213138 posted

    Hi wrappingduke,

    Have you used the F12 Developer Tools?

    If not, this are some information abot the use of F12 Developer Tools.

    https://technet.microsoft.com/en-us/windows/gg589512(v=vs.60)

    https://docs.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

    I used F12 Developer Tools to see the style of the div. In the right half of my screenshot, the class of the div you can see changes from "Normal" to "Progress".

    Best regards,

    Sam

    Wednesday, October 30, 2019 2:54 AM