Enhancing interactivity with jQuery's ajax event functionality

Alright, let me share my code with you:

$("#content_Div").ajaxStart(function () {
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

I'm facing a simple issue: the cursor changes to the hourglass immediately on ajaxStart, but it doesn't switch back to default until I move the mouse. Interestingly, I found out that if you click after ajaxComplete, the cursor changes back to default. This happens because after ajaxComplete, clicking triggers the change in cursor, not just moving the mouse. What I really want is for the cursor to change without needing any extra clicks or movements.

My aim is to use the cursor as an indicator for when the request is finished.

Thank you in advance!

For Thomas:

function DF() { //Deletes selected File
if (selectedfiles.length == 0) {
    alert("No file selected!");
    return
};
var selectedtxt = (selectedfiles.length == 1) ? "'" + basename(selectedfiles[0]) + "'?" : 'these ' + selectedfiles.length + ' files?';
if (confirm("Are you sure you want to delete " + selectedtxt)) {
    $.each(selectedfiles, function () {
        $.post("server/editfile.php", {
            user: user,
            oper: "del",
            path: "../" + this
        }, function (res) {
            if (res) {
                alert(res);
            }
            else LT(dirHistory[current]);
        });
    })
}

}

Answer №1

It seems that the user must move the cursor to trigger a change, but there is another issue as well. If the user moves the cursor away from the #content_Div, they will not be able to see if the data is loading or not, since the CSS only applies when hovering over that specific DIV element.

An effective way to clearly indicate that data is being fetched, regardless of user interaction, is to use an animated gif, text like "Loading....", or both. This solution is less intrusive than altering the user's cursor.

One option is to append a loading image to the div where the data will appear when requested, and this image will disappear once the data has loaded. For example:

$("#content_Div").ajaxStart(function () {
    $("#content_Div").append('<img src="loading.gif" />');
});

In this scenario, ajaxStop is unnecessary because the loaded data takes the place of the image.

Here is a jsFiddle example using both an image and text for loading indication.

jsFiddle with multiple buttons and a loading div at the center of the page.

Answer №2

It has been five hours since I posted this question and no one has attempted to answer it yet. So, I will share what I have discovered.

This issue seems to be a bug specific to Google Chrome and Safari. Here is the link to the Chromium bug report.

In all other browsers, you can change the mouse cursor dynamically without requiring the user to click or move the mouse.

Unfortunately, this behavior contradicted my original intention of informing the user when a request was completed. If the user removed their hand from the mouse and waited for the cursor to change, they would wait indefinitely. There doesn't seem to be a fix for this as the bug remains unconfirmed according to the provided link. I couldn't find a workaround either, so here is what I ended up doing:

$("#content_Div").ajaxStart(function () {
    if(!$.browser.safari)//ignores ajaxStart if browser is safari or chrome
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

Answer №3

I prefer handling it in a more refined manner:

$(document).ready(function(){  
  $("html").on("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).on("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS:

html.busy, html.busy * {  
  cursor: wait !important;  
}  

Reference:

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

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3. My goal is to achieve the following: I have experimented with pull and push commands, but it seems like I still need more practice. Code: <div class="container"> ...

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

I'm trying to implement Bootstraps Affix feature in a sticky subnav. <div class="container" data-spy="affix" data-offset-top="417" id="subnav"> I've adjusted the offset to ensure there's no "skip" or "jump" when the subnav sticks. Ho ...

Design challenges, consisting of both fixed width and elastic elements, have been resolved

After searching through various posts, I couldn't find the solution I needed. Currently, I am working on a design in Photoshop and foresee a potential issue when translating it into html+css. Picture this: my center div is set at 960px with a semi-tr ...

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

XMLHttpRequest encounters issues with 'Access-Control-Allow-Origin'

I have developed a JavaScript file that tracks and saves the coordinates of mouse clicks on a web page using an AJAX call. In one website (domain2), I have included the following code in the head section: <script src="http://www.domain1.com/scan/track/ ...

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

I am currently utilizing Soup and Selenium to access a particular page . My objective is to extract a comprehensive list of pricing and ratings for different types of packaging available on this webpage. Displayed below is the code I have composed: impor ...

Steps for populating a dropdown list with a JSON response

I'm facing a challenge in inserting server data into a dropdown list because each object name begins with a random ID. Here's what I'm attempting to achieve here: $("#CampaignOpenActionSubscriber_campaign_id").change(function() { var el ...

The canvas map has an unseen boundary on the right, causing all other div sections to be

When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...

What are some ways to create a larger-than-life mui button size?

The current MUI button supports size prop values as the following small medium large Although this feature is handy, I find myself wishing I could specify the height and width using the style prop to customize the size like <Button v ...

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

Problem encountered in Vue.js web application when running NPM, resulting in Error 126

When attempting to compile my Vue.js application using the command npm run prod, I encountered the following error: sh: /Users/antoinevandenheste/Downloads/magicfactory-1/node_modules/.bin/webpack: Permission denied npm ERR! code ELIFECYCLE npm ERR! errno ...

CSS Begin the background repeat from a specific origin

I am trying to achieve a specific background effect starting from the line shown in the screenshot below: I attempted to implement it using the following CSS code: background : ('path/to/image') 0 650px repeat-y However, the light part of the ...

I utilized the `<script src="sample.pdf"></script>` tag in my HTML code and surprisingly, the JavaScript within the PDF document was still able to execute

Recently, I encountered a situation where I included a PDF file with JavaScript code in the src attribute of a script tag in my code. Surprisingly, the JavaScript code executed without any issues. This made me wonder if I can use any type of file extension ...

The $_POST request was interrupted and data was severed

I am currently facing an issue with my $_POST request. I am sending an array with 855 records through AJAX, but my AJAX controller is only receiving 833. The strange part is that it consistently cuts out at the same point: Here is my JQuery code: var for ...

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

How can I resolve the issue of React not identifying the prop on a DOM element?

Currently, I am learning React and facing an issue with a warning message: "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell i ...

Is it possible to relocate a function that relies on the success callback of Ajax outside of the callback?

According to JSHint.com: Avoid placing function declarations inside blocks. Opt for a function expression or move the statement to the outer function's top. JSHint advises against keeping this function within the success callback. function matchC ...

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

In my case, I have two distinct pages: let's call them the first and second pages. On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on ...