In internet explorer with AJAX, the UI is refreshed by Javascript only when an alert() function is triggered

Having an issue in Internet Explorer, works perfectly in Firefox.

There is a javascript function that updates the UI (screen content) before an AJAX call. However, it does not update the UI unless an alert box prompt is used. Without the alert box, the UI is not updated before the AJAX call but after. Even when called before the AJAX function

When using the following code, the UpdateUI() function does not update the UI at all before the AJAX call, instead updating it after. I need it to update the UI before the AJAX call (I am actually showing a loading bar before the AJAX call)

UpdateUI(); // Javascript function that updates the inner HTML of a DIV

// AJAX function call here with Async = false

However, if I use the following code, the UpdateUI() function does update the UI before the AJAX call but requires an alert prompt. I do not want to use an alert

UpdateUI(); // Javascript function that updates the inner HTML of a DIV

alert('hello');

// AJAX function call here with Async = false

Works well on Firefox, but encountering issues on Internet Explorer 8

Answer №1

When there is an active JS thread, browsers typically do not immediately refresh or reflow the UI. Instead, they wait until all events from the event queue have been processed before triggering a reflow. This process can be likened to a single-threaded loop where the browser must handle all events.

In certain situations, reflows are given low priority. However, you can prompt the browser to perform a reflow by requesting specific attributes on DOM elements such as getComputedStyle or offsetX/y. Any request that necessitates the browser to rearrange the UI for a response will trigger a reflow.

If you're looking for more information on this topic, I recommend checking out this article that provided me with valuable insights when I encountered similar challenges in the past.

An easy and reliable workaround is to divide your code into two methods and then call the method that requires a prior reflow using a timeout set to 0 milliseconds. By doing so, you allow the browser to carry out a reflow before proceeding to execute method2. This approach functions similarly to the alert() strategy you experimented with and found effective.

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

Tips for implementing a page loading spinner within my HTML content with jQuery Mobile or jQuery

Looking for a way to display a page loading spinner within the content of an HTML page using jQuery mobile or jQuery. I've attempted some coding with jQuery and AJAX, but it's not functioning correctly. Any suggestions or solutions would be great ...

Tips for resolving the issue of the '$interval is not a function' error in AngularJS

When I click on the up/down arrows, I am attempting to continuously increase/decrease a value using AngularJS $interval function. However, I keep encountering an error message that says "TypeError: $interval is not a function." Can someone please help me s ...

Loading jsp content into a div dynamically within the same jsp file upon clicking a link

Currently, I am working on creating a user account page. On this page, my goal is to display related JSP pages in a div on the right side when clicking links like 'search user' or 'prepare notes' on the left side. In my initial attempt ...

Utilizing dynamic routes and incorporating additional search parameters within the URL structure in NextJS has never

Is there a way to use router.push(url); to redirect a user with a URL structure like this: [:lang]/something/[...dynamicRouteParams]?searchParam=true. The problem I'm facing is that the user ends up being redirected to a page with a URL structure lik ...

Is it preferable to include in the global scope or the local scope?

When it comes to requiring a node module, what is the best approach? Should one declare the module in the global scope for accuracy and clarity, or does declaring it in the local scope make more sense? Consider the following examples: Global: let dns = r ...

What is the reason behind ASP MVC model binder's preference for JSON in POST requests?

Is there a way to bind data to a model when sending a 'GET' request with JSON.stringify() using AJAX? Currently, the model value is always null when using 'GET', but it works fine with 'POST'. Are there any solutions for this ...

Generate dynamic forms utilizing JSON data

I am in the process of developing an application that enables users to answer questions about themselves. The questions are being retrieved from an API. My next step is to generate a form with these questions as entry fields. I am currently utilizing a met ...

Troubleshooting unexpected behavior with Custom Guest middleware in Nuxt Project

I have implemented the Nuxt auth module for my project. To manage the login page, I created a custom middleware called guest.js, which has the following code: export default function ({ $auth, store, redirect }) { if (!process.server) { if ($auth ...

Vue.js encountered an uncaught TypeError while trying to execute the 'drawImage' function

I am facing an issue with my vue.js application where I can successfully apply a filter to a photo, but I am unable to post it. The error message I am encountering is: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingCon ...

What is the process for creating an Account SAS token for Azure Storage?

My goal is to have access to all containers and blobs in storage. The Account SAS token will be generated server-side within my Node.js code, and the client will obtain it by calling the API I created. While Azure Shell allows manual creation of a SAS toke ...

Restangular is throwing an error because it cannot find the reference for _

I encountered an issue with Restangular where I'm getting the error message: Uncaught ReferenceError: _ is not defined from restangular when trying to use it. Code Snippet: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angula ...

Learn how to execute JavaScript code in Selenium without launching a web browser

I am currently using the Selenium API for web scraping on pages that contain JavaScript code. Is there a way to retrieve the code without having to open a web browser? I am still learning how to use this API Is this even feasible? ...

Attempting to insert the symbol "$gt" into a query for a search. {[CastError: Unable to convert value "[object Object]" to date at path "createdAt"]}

In the following code snippet: Reviews.find({createdAt : {"$lt" : app.locals.lastDate}}), I am trying to dynamically change the $lt to $gt. app.post("/scroll", function(req, res){ console.log("req.body...", req.body); var sortCreate = req.body.old ...

Slideshow of table rows in HTML

On a webpage, I am populating an HTML table with a random number of rows ranging from 1 to 100. Regardless of the total number of rows, the requirement is to display only 10 rows at a time on the screen and then shift to the next set of 10 rows every 5 sec ...

Can you explain the distinction between rxjs/observable and the traditional jQuery AJAX approach?

Can you explain the distinction between rxjs/Observables and JQuery in terms of asynchronous functions like $.get()? Are both frameworks considered to be asynchronous and reactive? ...

Learn the steps to invoke a JavaScript function from a <td> element within an ng-repeat loop

How can I call an Angular function inside ng-repeat td and replace the value from the function with the value in the td element? The code snippet provided below is not functioning as expected. Instead of getting the date, the same getCSTDateTime function i ...

What is the best way to connect the "areaName" with the <TextBox> attributes value="" and onChange=""?

After calling an API and mapping the array, I have successfully bound the data on <TableCell> {this.state.allArea.map((allArea, i) => ( <TableRow > <TableCell >{allArea.areaName}</TableCe ...

Is there a tool that can help pinpoint the original collection for shared elements across multiple collections?

When given multiple collections/arrays, I am interested in identifying the common elements and which collections they belong to. This request is somewhat similar to this query, but there may be matching elements between collection1 and collection3, or eve ...

Exploring and Presenting Arrays using React JS

Recently, I have started working with react js and I am trying to add a search functionality to filter an array in React. My goal is to allow the user to enter a character in the textbox and only see the names that contain that specific character. So far, ...

Display or conceal the location where the click event occurs within a single div

progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...