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

Add axios requests to the axios.all array

Good evening. I am currently trying to insert an array into the axios.all([]) structure! This is the code snippet I am working on: app2.js new Vue({ el: '#central', data: { estilo: 'resize:none;text-align:center;color: ...

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

My chat box consists of two frames... The first frame displays all the usernames, while the second frame shows the full chat when a user is clicked from the first frame. I need to reload the second frame every time to check for new messages from the send ...

modifying the placeholder font and relocating chips/tags beneath the search bar

I'm encountering some challenges with material-ui that I could use assistance with. Firstly, is there a method to have the tags/chips displayed below the search bar instead of above it? Additionally, I've been attempting to italicize and adjust ...

An error occurs even before any Components are rendered, with a TypeError stating that the property 'type' cannot be read because it is undefined

I'm facing an issue with my Redux App where the first component (App.js) is not rendering due to continuous errors. The reducer mentioned below is being triggered at some point without any action, causing the compiler to interpret action as null and f ...

Experiencing difficulties with $watch in my Angular controller

Having trouble getting a $watch function to work properly while testing a controller. In this scenario, the goal is to display ctrl.value in either ARI format or AEP format, but the underlying $scope.model is always kept in the ARI format. When ctrl.value ...

Is it possible for a PHP form to generate new values based on user input after being submitted?

After a user fills out and submits a form, their inputs are sent over using POST to a specified .php page. The question arises: can buttons or radio checks on the same page perform different operations on those inputs depending on which one is clicked? It ...

Is there a way to confirm if one field value is greater than another using the Ajv JSON schema validator?

Is it feasible to receive a validation error using ajv when minPrice exceeds maxPrice? What is the recommended method of achieving this, ideally adhering to the JSON schema standard? ...

AngularJS withCredentials Issue causing data not to be transmitted

When using AngularJS, I encountered an issue where the cookie/session was not being shared across domains for my Restful API in a subdomain. To address this problem in Angular, I added the following configuration: app.config(['$httpProvider', fu ...

Objects for requesting and responding

When utilizing express.js, middlewares have the ability to modify both the request object and the response object. This raises the question: what exactly do these request and response objects represent, and what information do they hold? ...

One approach to animating elements on a web page is by utilizing Node.js

Imagine you want to programmatically define animated movement for elements on a web page. In JavaScript, this can be achieved using techniques outlined in this helpful guide: How TO - JavaScript HTML Animations. But how would you do this in Node.js? UPDAT ...

Using Rails 3 to Connect Pre-AJAX Request

I am currently working on implementing a button_to feature to trigger an update to a record. Due to the Ajax request taking some time, I want to enhance the user interface by updating it before sending out the request. Inspired by this article that demonst ...

Any modifications made to a copied object will result in changes to the original object

The original object is being affected when changes are made to the cloned object. const original = { "appList": [{ "appId": "app-1", "serviceList": [{ "service": "servic ...

The addition of ngRoute causes the controller in AngularJS to malfunction

Currently, I am attempting to implement routes in my angularJS application and have encountered an issue where integrating 'ngRoute' into the app causes the main controller to malfunction. Furthermore, I am experiencing difficulties with ngRoute ...

I'm new to Angular, so could you please explain this to me? I'm trying to understand the concept of `private todoItems: TodoItem[] = []`. I know `TodoItem` is an array that

//This pertains to the todoList class// The property name is todoItems, which is an array of TodoItem objects fetched from the TodoItem file. I am unable to make it private using "private todoItems: TodoItem[] = []," is this because of Dependency Injectio ...

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

Errors encountered in the ajax request, specifically 404 and 401 errors

Using jQuery's ajax method, I am submitting an ajax request in the following manner: $.ajax({ type: "PUT", url: specifiedURL, contentType: "application/json", data: JSON.stringify(data), dataType: "json" ...

React is generating an error when attempting to use hooks without the appropriate class name prefix

I'm encountering an error when I use hooks without a class name prefix. Can someone help me troubleshoot this issue? import React, {Fragment,useState} from 'react'; function App (props) { const [x,updateX] = useState(1) /* throwing error ...

The table is not reloading via table.ajax.reload() function after a successful operation

Introduction Currently, I am working on implementing datatables.net with jQuery for server-side processing using JSON, AJAX, and PHP. My issue lies in the fact that even though I am able to delete a row from the database upon clicking the row button, the ...

Leveraging batchWriteItem with dynamodb

I am trying to utilize batchWriteItem in my DynamoDB to add data to two tables: candidate table and user table. The formatted query is shown below: var user = { userid: usrid, role: 'candidate', password: vucrypt.encryptp ...