Ajax UpdateProgress not functional

How can I resolve the issue where my AJAX UpdateProgress bar in ASP.NET is not running when executing a query in the correct format upon button click? Any solutions or help would be greatly appreciated.

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 <style type="text/css">
    .style1
    {
        width: 100%;
    }
 </style>
 <script language="javascript" type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    
    function InitializeRequest(sender, args) {

        if (prm.get_isInAsyncPostBack())
            args.set_cancel(true);
        postBackElement = args.get_postBackElement();
        if (postBackElement.id == 'Button1')
            $get('UpdateProgress1').style.display = 'block';
    }

    function EndRequest(sender, args) {
        if (postBackElement.id == 'Button1')
            $get('UpdateProgress1').style.display = 'none';
    }



 </script>
 </head>
 <body>
 <form id="form1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
   <ContentTemplate>  
  <asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
       </asp:ToolkitScriptManager>

       <table class="style1">
           <tr>
               <td>
                   &nbsp;</td>
               <td>
                   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
               </td>
               <td>
                   <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
               </td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
           </tr>
           <tr>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
           </tr>
           <tr>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
           </tr>
           <tr>
               <td>
                   </td>
               <td>
                   </td>
               <td>
                   <asp:Button ID="Button1" runat="server" onclick="Button1_Click"Text="Button"/>
               </td>
               <td>
                   </td>
               <td>
                  </td>
               <td>
                       </td>
           </tr>
           <tr>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>

               </td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
               <td>
                   &nbsp;</td>
           </tr>
           <tr>
               <td>
                   &nbsp;</td>
               <td>
               </td>
               <td>
              </td>
               <td>
                 </td>
               <td>
                  </td>
               <td>
                 </td>
           </tr>
       </table>


  <asp:UpdateProgress ID="PageUpdateProgress" runat="server">
                        <ProgressTemplate>
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                <ProgressTemplate>
                                 <img src="images/ajax-loader.gif" alt="image missing" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

  </ContentTemplate>
  </asp:UpdatePanel>
  </form>
  </body>
 </html>

Answer №1

It appears that you forgot to include the line

prm.add_beginRequest(onPrmBeginRequest);
.

The loading progress should be displayed at the start of the request:

onPrmBeginRequest = function (sender, args) {
    var postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Button1') {
        $get('UpdateProgress1').style.display = 'block';
    }
}

Therefore, make sure to transfer the appropriate code block from initializeRequest to beginRequest.

You can now hide it in the endrequest.

Note:

The id might have been altered by ASP.Net unless clientIDMode is specified. Thus, ensure that you utilize the correct id such as

ctl00_ContentPlaceHolder1_UpdateProgress1
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the issue with my code? (Threejs spotlight shadow)

I recently created a Three.js scene featuring two cubes on a plane. The spotLight I placed in the top-left corner is intended to look at the coordinates 50, 0, -50. However, I noticed that the shadows appear odd and the light does not seem to be focusing ...

Send the cookie with the JSON request

While logged into a secure website with a login, I came across some valuable data that is transmitted through the server in JSON format. By opening Chrome and inspecting the page using the "Network" tab, I discovered a URL utilizing XHR which contained the ...

Problems with the functionality of the remote feature in Twitter Bootstrap Modal

Utilizing Twitter Bootstrap, I aim to retrieve HTML from another page and inject it into the modal on my current page. This led me to create a JavaScript function to facilitate this process. Within my 'index.php' file, I include the following: ...

Ways to transmit information to the frontend JavaScript of one server from a different server

In my express js app, I have set up two routes as follows: router.get('/route', function (req, res) { res.redirect('/newRoute'); }); router.get('/newRoute', function (req, res) { var data = someCalculation(); }); I a ...

Can you explain the significance of this error message that occurs when attempting to execute a node.js script connected to a MySQL database?

const mysql = require('mysql'); const inquirer = require('inquirer'); const connection = mysql.createConnection({ host: "localhost", port: 8889, user: "root", password: "root", database: "bamazon" }) connection.conn ...

Adding a background image to a box in MUI is a simple task that can enhance

I've been attempting to include a background image in the Box component of mui, but I can't seem to get it to work. Here is the code I've been using: const Main = () => { return ( <Box sx={{backgroundImage:'images/cove ...

What is the process for decrypting the data that was encrypted using node-jose?

I am currently in the process of incorporating basic JOSE encryption and decryption functionalities by utilizing node-jose. This is my code implementation (using Node 8.2.1) const { JWE } = require('node-jose'); const jose = (publicKey, privat ...

What is the best way to retrieve the value of a checkbox element in React.js when submitting a form?

Whenever I try to submit a form, I encounter an issue where I am unable to retrieve the value of the checked boxes (I don't mean the check value but the actual value attribute of the HTML element). Here is an example of my element in the parent compo ...

Creating an Angular table row that can expand and collapse using ng-bootstrap components is a convenient and

I need assistance with an application I am developing, where I want to expand a table row to display details when it is clicked. The issue I am facing is that currently, all rows expand and show the data of the clicked row as seen in the image result below ...

Unchecked checkbox displays as checked in UI

I am facing an issue with checking checkboxes using JavaScript. Even though the checkbox appears to be checked in the program, it does not reflect the updates on the user interface. If anyone has a solution for this, please share. <!DOCTYPE html> ...

Attaching to directive parameters

I've been working on creating a draggable div with the ability to bind its location for further use. I'm aiming to have multiple draggable elements on the page. Currently, I've implemented a 'dragable' attribute directive that allo ...

What are some strategies for speeding up CRUD operations in a Django app that uses Ajax and Json? Is the sluggishness related to handling 7000 records, and if so, what steps can be taken

I am currently working with a remote legacy MySQL database that contains around 7000 records. The Update / Delete / Create operations are taking approximately 1.5 minutes to complete. I have imported the necessary files which are not included in Views.py b ...

Utilizing Node.Js for Asynchronous Operations

I have a situation in my code where the Process1() function contains a database loop, causing Process2() and Process3() to be called multiple times. Which function from async should I use to properly wait for a for loop? async.waterfall([ function(ca ...

Working on asynchronous processing of Highland stream fragments

My current setup involves utilizing highland.js to process a file using a stream and extract content between specific delimiters. Additionally, I am incorporating async.js to perform a sequence of http requests. I am seeking a way to pass the output x fro ...

Creating a new object in an empty array within my profile model (mongodb/mongoose) is simple. Just follow these steps to successfully add a

Presenting my Profile model: const ProfileSchema = new mongoose.Schema({ user: { type: mongoose.Schema.Types.ObjectId, ref: "User", }, company: String, website: String, location: String, status: { type: String, require ...

Arranging items in Angular based on selection from the database

i have data in table: Id, word, score , score_list. score are 0.4, 0.2, -0.5, 0, -0.3 .... in score_list i have positive, negative , neutral. How can i sort data with select by score_list? This is html <select class="form-control"> <option> ...

Tips for beginning a counter that displays online status from the ground up

I have implemented a script on my website that displays the online player count for the GTA server without needing to refresh the page. You can check out the counter script here. var updateInterval = 700; setInterval(updatePlayerCount, updateInterval); // ...

Creating a registration and authentication system using firebase

When using Google authentication with Firebase, is the Signup and Login logic the same? I am creating a page for user authentication but I'm unsure if I should have separate pages for signing up and logging in. This confusion arises from the fact that ...

Creating the jquery/javascript code needed to produce an event or alert similar to the "Confirm Navigation" prompt used on sites like Stack Overflow

Similar Question: How can I have a confirmation message when navigating away from a page after making changes? I've noticed an interesting feature on Stackoverflow: when you start writing a new question and attempt to leave the page, it prompts y ...

How to Automatically Display the First Tab in Bootstrap 3

Having a dynamic modal with two tabs, I aim for #tab1 to always be the default tab upon opening the modal. The issue arises when the modal is opened, #tab2 is clicked, and then the modal is closed. Subsequent reopenings still display #tab2. See JSFiddle e ...