A versatile function that displays a loading icon on top of a specified div

Is it possible to pass an identifier for a particular div element to a function, where the function will display a loading image that covers the entire div, and then pass the same identifier to another function to hide the loading image? I am looking to create a versatile solution here rather than something specific.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loaderDiv').show();
  },
  complete: function(){
     $('#loaderDiv').hide();
  },
  success: function() {}
});

I want to display a loading icon uniquely for each individual div. I do not want a single large overlay that covers the entire page. Can someone provide assistance with this?

javascriptjqueryajaxhtmlcss

Answer №1

By specifying a setting in the $.ajax(url, [settings]) function, it is possible to adjust the position of a loading div.

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        var $target = $(settings.targetSelector);
        var $loading = $('#loaderDiv');
        $loading.css($target.position());
        $loading.width($target.width());
        $loading.show();
    },
    complete: function() {
        $('#loaderDiv').hide();
    }
});

//later on, during a button click or similar action
$.ajax('URL', {
    targetSelector: "#DIV_TO_OVERLAY"
});

https://jsfiddle.net/x3f8ntdv/

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 organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Improving React code by using conditional statements such as IF and Else

Currently, I am delving into the world of React and have managed to devise some logic for rendering a DIV. However, upon reflection, it has become evident that there is redundancy present in my code structure and I am uncertain about how to efficiently ref ...

javascriptreactjsrefactoring

How can I maintain only one Bootstrap accordion panel open at a time while utilizing the hashchange event and click event?

I am experimenting with Twitter Bootstrap and using the accordion and jQuery plug-in hash change plugin. I am facing an issue where if I open a page using location.hash and click on other items multiple times, the previously opened item cannot be toggled c ...

jquerytwitter-bootstrapaccordionhashchange

How can we eliminate the need for specifying the order of generic arguments in TypeScript?

In the development of my middleware engine, I have incorporated various generic arguments that are specific to the particular implementation in use. export type Middleware< Store = never, Args = unknown, Response = unknown > = ( context: { ...

javascripttypescripttypescript-generics

Storing dynamically generated images into a database and linking them to an image button

Random rd = new Random(); string data = rd.Next(111111111, 999999999).ToString(); QRCodeGenerator q = new QRCodeGenerator(); QRCodeGenerator.QRCode qc = q.CreateQrCode(data, QRCodeGenerator.ECCLevel.Q); ...

htmlsqlasp.netimageqr-code

Exploring a Ring with Three.js OrbitControls Rotation

I am having an issue with my OrbitControls camera setup. Currently, the camera rotates around a fixed point at player.position.x, y, and z coordinates. While it works fine, I need the camera to rotate around a ring instead. In the examples provided, the fi ...

javascriptthree.js3d

Is there a TypeScript alternative to triggering a click event on a specific class using $(".class").click()?

I am currently utilizing a date range picker within an Angular project. <button type="button" class="btn btn-danger daterange-ranges"> <i class="icon-calendar22 position-left"></i> <span></span> <b class="caret"></b ...

jqueryangulartypescript

Is your Firebase Google sign-in popup window flashing and not successfully signing in while using Vue.js?

After implementing the Google sign-in pop-up method in Vue.js, I encountered an issue where the live Google sign-in popup window kept flashing and never successfully signed in. However, this problem did not occur when testing locally. Below is the code fo ...

javascriptfirebasevue.jsfirebase-authenticationgoogle-signin

Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

I am having trouble getting my Bootstrap dropdown to toggle correctly, despite placing the JS script last. I have checked multiple resources and it was suggested that CDN may not have been imported correctly. I have also tested this on different browsers w ...

htmlcssbootstrap-4

What is the reason for the binding event being triggered following the re-render of the setstate?

The Test component has a state of num. This component is designed to increase the value of num by 1 when a button is clicked. The button is linked to a self-increment method, and the keyup event is also connected to this method. When the method is triggere ...

javascriptreactjs

Tips for creating integration tests for modal components

Despite my efforts, I have been unable to find a method for writing integration tests for modals successfully. Using Rspec, the code functions properly and the modals appear correctly in the browser. The controller tests pass successfully with the followi ...

jqueryruby-on-railsrspecxmlhttprequest

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

When attempting to call the servlet that returns JSON data, I encounter an error while parsing the data. var jsonResponse = jQuery.parseJSON(data); var ht_4year_risk_opt = jsonResponse.ht_4year_risk_opt; ...

javascriptjson

JavaScript code using jQuery's ajax method is sending a request to a PHP server, but

Attempting to utilize jQuery ajax for PHP call and JSON return. The test is quite simple, but only receiving an empty object in response. No PHP errors appearing in the LOG File. jqXHR is recognized as an object with 'alert', yet not displayin ...

javascriptphpjqueryajaxjson

Error: TokenMismatchException occurred while verifying CSRF token in VerifyCsrfToken.php line 46 during an AJAX request after completing another process

I keep encountering a TokenMismatchException when I try to send another ajax request after the first one in jQuery within laravel-5.0. Despite trying different browsers, I am consistently faced with the same issue. var settings = { ...

jqueryajaxlaravel-5

Unique style pattern for parent links with both nested and non-nested elements

I am in the process of designing a website and I have a specific vision for how I want my links to appear, but I am unsure of how to achieve it. Here is the desired outcome: a red link a green link a red link a green link … Below is the HTM ...

javascriptjqueryhtmlcss

Verifying multiple button selections in a Django template

Within my django template, there is a block of code that appears like this: {% block b %} { % for foo in foos %} { % if foo.some_variable % } <form method="LINK" action="{% url "some_view" foo.id %}" id="button"> ...

javascriptjquerypythondjango

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12

Using jQuery and HTML to create numerous links that direct to a solitary iframe

I created a basic overlay setup using css, html, and jQuery. Here's how it looks: <a class="activator" id="activator" style="" href="#">hello</a> <div class="overlay" id="overlay" style="display:none;"></div> <div style="d ...

jquerycsshtmljquery-ui

Interactive checkboxes within a classic ASP webpage

I'm encountering an issue while generating checkboxes dynamically on a .asp page. Within a table cell, I am utilizing the following code (note - rsMaint is a recordset): <% if not rsMaint.EOF then rsMaint.moveFirst index = 1 %> ...

htmlasp-classicdynamic-controls

How to transfer data from JavaScript to PHP using AJAX

After spending countless hours attempting to make this function properly, I have come to you for assistance :) I have created a PHP page that can exhibit files from a server. I am able to modify the files using an editor plugin, where the Textarea tag is ...

javascriptphpajaxvariables