Displaying advancement as the child row is being loaded

Here's another question for you!

This time, I need to display some progress while loading child rows. There is an API call that takes a short amount of time to return data, so I want to show some progress to indicate to the user that the call has been made and the child rows are loading.

What I have tried:

I created a CSS class that includes an image called loader-small.gif:

tr.loading td.details-control {
    background: url('/Images/loader-small.gif') no-repeat center center;
}

And then applied it like this:

$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {
        // Code block continues here...

The Issue:

In Firefox, the progress image shows up after clicking the parent row, but in Edge and Chrome it does not. Both browsers seem to skip over this code when debugging using their developer tools.

Could this be a browser compatibility problem? Is there a solution to make it work on all browsers? Any help would be appreciated.

javascriptjquerycssasp.net-mvcdatatables

Answer №1

When working with Chrome, there seems to be an issue with displaying the loading bar while making a server call. To address this problem, you can implement the following changes in your code where the service call is being made. Start by adding the class "loading" to the table element:

tr.addClass('loading');

Next, execute the service call within a setTimeout function to introduce a slight delay:

setTimeout(function(){
     var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
     ......
    //Include your service calls and response callbacks here
},1);

By including a small timeout (such as 1ms), Chrome will have enough time to bind the loading bar to the DOM. Without this delay, the DOM object may not be immediately available to display the spinner.

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

Styling HTML divs to fit together like a puzzle in CSS

I'm attempting to fit these divs together like a jigsaw puzzle. My goal is to position div 4 between div 1 and 3. Currently, div 4 starts below div 3. What would be the solution to make the divs seamlessly fit into each other? <div style='ove ...

css

What is the process for reversing the texture application direction on a CylinderGeometry object?

Is it possible to reverse the orientation of texture mapping on a CylinderGeometry object? var obj = new THREE.Mesh( new THREE.CylinderGeometry(20, 15, 1, 20), new THREE.MeshLambertMaterial({color: 0x000000}) //the material is later changed to the ...

javascript3dthree.jstexture-mapping

`json_encode does not output a UTF-8 character`

I send an AJAX request to the PHP server, and receive back an array encoded in JSON. This array has only two indexes. When I log it using console.log(), this is what I see: {"1":"\u00d9\u0081\u00db\u008c\u00d9\u0084\u0 ...

javascriptphpjqueryajaxjson

ngOptions failing to reflect changes when new objects are added to array

I am facing an issue with updating the view when a new object is pushed to an array that contains objects. It seems like the problem lies with $scope.$apply, but I'm not sure how to implement it properly. I attempted wrapping the push function in $sco ...

javascriptangularjsscopeng-options

What is the best way to incorporate gl-matrix into a ReactJS application?

Recently, I dabbled in using ReactJS and decided to experiment with this project that involves importing JS modules like this: import Particle from './Particle' I wanted to switch the project to use gl-matrix for practice with the framework, bu ...

javascriptnode.jsreactjsnpm

Ways to conceal a column within columnSelection

Can anyone help me with setting the Column selection for Sender and Receiver in bootgrid without including Id in the column selection dropdown? I need some guidance on how to achieve this. Check out the image below for reference https://i.sstatic.net/4EEW ...

javascriptjqueryuser-interfacejquery-bootgrid

Guide to utilizing exact matching functionality in ExpressJs router

In my ExpressJs application, I have defined two routes like so: router.get("/task/", Controller.retrieveAll); router.get("/task/seed/", Controller.seed); When I make a request to /task/seed/, the Controller.retrieveAll function is call ...

javascriptnode.jsexpressbackendrouter

Encountering an issue with an AngularJS form containing ng-repeat when attempting to submit

Here is my form structure: two text inputs followed by an ng-repeat with a text input and radio button inside. <form class="form-horizontal" id="myForm" name="myForm"> <div class="form-group"> <label for="name" class="co ...

javascriptangularjsforms

What is the functionality of the :global (colon global) notation?

When browsing through certain SCSS files, I've noticed the following syntax: :global { /* ... */ } It's unclear to me if this is a native feature of SCSS or CSS. I attempted to research it but didn't come across any definitive answers im ...

csscss-modules

Why isn't my JavaScript variable visible in the HTML code?

I am currently facing an issue with my Angular app where I am trying to display a JavaScript variable in HTML. The variable successfully shows up in an older part of my application, but it fails to do so in the new section. Below is the functional code sn ...

javascriptangular

What is the best way to conceal additional images and display the correct one?

Is it possible to create a hover effect where the first span shows image number 1, and when another span is hovered over, it hides the first image and displays a different one? Below is an example of what I have so far: <div class="overlays"> &l ...

htmlcss

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

cssbootstrap-4

Resolving conflicting event handlers within vue.js

I have a situation where I'm trying to use two buttons on a page to navigate to different sections. When I include only one button, everything works fine. But when I include both buttons, only one of them functions properly. Upon debugging, I noticed ...

javascriptvue.jsbuttonevent-handling

Exploring the concept of array declaration in JavaScript

I am exploring different ways to create arrays in JavaScript and would like to understand the fundamental differences between two methods. I am also interested in knowing if there is a performance gap between these two "styles" var array_1 = new Array(" ...

javascriptarrays

Node.js encountering difficulty extracting JSON data

Within this JSON object, the Variable SNS holds valuable information that I need to extract and save in a new variable. `const sns = event.Records[0].Sns.Message;` The specific values I aim to retrieve are Trigger.Namespace, Trigger.Dimensions.value, an ...

javascriptnode.jsjsonaws-lambdaamazon-sns

Having trouble developing a custom jQuery tool for textareas

I am currently attempting to customize this script that mimics the Word 2007 minibar within a textarea. My approach involves encapsulating it in a plugin, but I am encountering an issue where it does not function properly with multiple textareas. If you w ...

javascriptjquery-pluginstextareajquery

JavaScript - Changing the position of an item within a JSON object

I have implemented JQuery sortable to rearrange items in a JSON object into a JSON array. Let's assume we have the following JSON file: [ { "ID_id": "I3Y0RAmsr5", "DT_createdAt": "2020-12-02T14:39 ...

phpjqueryarraysjsonsorting

Could someone assist me in figuring out the reason behind my fetch method sending undefined values?

Looking for some assistance with my fetch implementation issue. I am currently working on integrating stripe into my online grocery store website utilizing a node.js server with express, and ejs for frontend integration. The client-side JavaScript uses a f ...

javascriptnode.jsexpress

Preserve a data point without causing any alterations

I am working with a device that continuously sends values until it is stopped. These values are then saved inside an array. deviceMonitoring( device2 ){ // In this function, I populate the arrayTimestamp and then copy the first value. this.arrayElement = t ...

javascriptreactjsreact-native

Using Jquery to apply a class if the height of an image is larger than its width

Can someone assist me with a jQuery question regarding adding classes to images? I am currently working on a DEMO on codepen.io The issue I'm facing is that the JavaScript isn't adding a class to the image if the height is greater than the widt ...

javascriptjquerycss