Chrome not updating dynamically changed CSS in jQuery

I'm currently working on a code where I need to display a div before making an ajax request and then hide it once the request is completed. For some reason, the show() function isn't working properly, although the hide() function works fine. This issue seems to only occur in browsers like Firefox.

$("#btnpst").click(function () {
   $('#dvloading').show();
   $.ajax({
       url: url,
       type: "POST",
       async: false,
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (data, st) {
           if (st == "success") {
               $('#dvloading').hide();
           }
       },
       error: function () {
           $('#dvloading').hide();
       }
   });
});

HTML

<div id="dvloading" style="width: 480px; height: 320px; position: absolute; overflow: hidden;">
    <image src="../loading_2.gif" style="margin-top: 120px;">
</div>

Answer №1

It seems like your test is running locally and the response time is quite fast. Why not try updating this line

$('#dvloading').hide();

to

setTimeout(function(){$('#dvloading').hide();},5000);

and see if that makes a difference. It might also be helpful to check for any JavaScript errors in the browser console.

Answer №2

"I noticed that placing the alert before hide() makes it visible, but without the alert, it remains hidden. The ajax call seems to be taking around 10 seconds."

These two statements may appear contradictory at first glance. If your DIV is shown and then hidden while the ajax call is in progress for 10 seconds, it should still be visible without the need for an alert box. It's possible that there could be some other issue causing this delay.

To better understand your situation, I created a fiddle where I removed the content type attribute from the ajax call and used Flickr’s JSON response page. Everything seems to be functioning properly.

Check out the jsfiddle here

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

In what part of my code should I integrate the .sort() method?

I am working on rendering a list of items in alphabetical order to the browser. I have previous experience using .sort() in other scenarios, but I am unsure about where to place it in this particular situation. In my current code, I initially placed the . ...

Issues with 'md-sidenav' in AngularJs failing to respond to click event in Firefox

Currently, I am working on an Angular project that includes a sidenav based on the specifications of AngularJS Material Design. Everything seems to be functioning correctly when I click on the menu icon to control the sidenav in Chrome and other major brow ...

Initiating CSS animation from the start

Having an issue with the "Start button" that plays both animation and background sounds. When I pause it, the animation does not stop where it left off and starts from the beginning again. I tried using animation-play-state: pause and animation-fill-mode: ...

Ending a session in JavaScript using session_destroy()

I am seeking a JavaScript code that can automatically end the session of inactive users on a live chat website. The website tracks user activity every 5 minutes and updates the database with a timestamp of their last activity. For example, if a user has n ...

Using Selenium in Python to capture console logs from Chrome

Can Selenium be used to extract Chrome console messages (such as those visible when pressing F12 and viewing the console tab with a blue line below it)? I am looking to search for and copy specific data from these messages in order to compile them into a ...

Alert triggers a transformation in the background

Can someone help me figure out this issue? https://jsfiddle.net/eddnhc5f/ I've noticed that when I press the key c on Firefox and Microsoft Edge, the background changes before the alert pops up. However, in Opera and Chrome, the background changes a ...

`The <fieldset> element is positioned outside of the <div> element

I'm facing an issue with my markup that occurs when I resize the browser window. Below is the ASP.NET code snippet: <asp:Panel ID="PanelGrid" runat="server" CssClass="frame"> <fieldset class="fs"> ...

How can I get rid of the table borders and set colors for every other row in the

How can I remove the border lines from a table and assign colors to alternate rows in the table? Follow this link for the code: https://stackblitz.com/angular/kooxxyvddeqb?file=app%2Ftable-sticky-columns-example.css Thank you in advance ...

Tips for adapting the position of a floating div according to its height and environment

Important Note: The code below utilizes the rubuxa plugin for handling JS sortables. Javascript: function querySelector(expr){return document.querySelector(expr)} var container = querySelector('.ITEST'); var sortable = Sortable.create(container, ...

How can I use jQuery to set the color of every other row in a

I'm facing an issue where I want to use jQuery to set the color of alternate rows in an HTML table. However, every time I add a new row, the color of the entire table switches. Below is the JavaScript code snippet that I am utilizing: var alternate = ...

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

Tips for preventing JavaScript errors when making cross-domain requests using AJAX

Is there a way to prevent or handle JavaScript errors without causing the script to crash? Error message: No data returned $.ajax({ type : 'GET', dataType : 'jsonp', url : '//cvrapi.dk/api?search=dsfsdfsd&country= ...

How to identify when a user has reached the bottom of a div element in HTML using JavaScript

Recently, I ventured into the world of JavaScript and attempted to create a script that can detect when a user reaches the end of a div tag. After some searching, I came across this code snippet: <!DOCTYPE HTML> <html> <head> <sc ...

How can I utilize an external file in Node js to output as a response?

I came across a similar inquiry, but I am interested in exploring manual methods. My goal is to achieve this without relying on express or any other external library. var http = require('http'); var server = http.createServer(function(req, res) ...

Alter appearance of images depending on browser window size

I am working on an angular JavaScript code snippet that uses the ng-repeat command to display a row of small images. I want to ensure that these images do not spill over into a second line when the browser window is resized. Instead, I prefer them to eith ...

What's the issue with the jQuery each() function when selecting options?

Below is the function in question: function setDropdownValue(dropdownId,selectedValue){ $('#'+dropdownId+' option').each(function(){ if ($(this).val().toLowerCase()==selectedValue.toLowerCase()){ ...

Troubleshooting Material UI Widget Components

After working diligently on the autocomplete component, I am pleased with how the feature turned out. However, when this component is rendered as a widget on other pages, I'm encountering some style issues due to global styling overrides or additions ...

What are the steps to create a "load more" button that displays additional rows?

Struggling to get the code right for my webpage. I have a layout with 6 rows, each containing 3 columns filled with images. However, when I click on the "load more" button, nothing happens. I've attempted to modify the jQuery code from .slice(0, 3) t ...

Developing a fresh Outlook email using a combination of javascript and vbscript

I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...

JQuery AJAX call not showing the outcome of PHP execution

I have a form that utilizes AJAX to send data to a PHP file for processing on the server-side and then returns the results. Check out the HTML form below: <div id="new_loc"> <form id="loc_form" method="post" action=""> <p><b> ...