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

What is the best way to trigger an AJAX request when a user navigates away from a webpage or closes the

The Challenge at Hand Greetings, I am currently developing a database-driven game that involves users answering questions and earning the right to change the question by providing the correct answer. However, I have encountered a significant issue which ...

javascriptphpjqueryajaxforms

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

asp.nethtmlcssbuttonwebforms

Utilizing Radio buttons for validation in react-hook-form

After creating a form with radio buttons and implementing validation using React Hook Form, I encountered an issue where the console always displayed "on" regardless of the selected radio button. <div className=""> <label ...

javascriptreactjsvalidationnext.jsreact-hook-form

Is there a way to determine if a string is empty, even if it contains hard returns?

I am currently working on a function that checks if a string is empty or not, but it seems to be missing the detection of new lines. export const isStrEmpty = function(text: string): boolean { return !text || text.match(/^ *$/) !== null; }; I attempted ...

javascripttypescript

Adjust the width of a textarea to expand evenly within its container when exceeding the specified width limit using CSS

I am currently attempting to adjust the size of this textarea proportionally. However, when I try to increase it beyond 100% width, it only expands to the right side. I have already experimented with using margin: auto and display: block but unfortunately, ...

htmlcsspug

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

The issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...

javascripthtmljquerycssslick.js

Automatically refreshing a div element upon inserting new data into a database

After developing a PHP page to retrieve data from the names database, I successfully set up an HTML page with Javascript code that automatically refreshes a specific div tag every 5 seconds. Here's the implementation: <script> function Ajax(){ ...

phpajaxdatabase

Trigger an event, pause, and subsequently trigger another one within Vue

I have successfully emitted the following events to the parent component: this.$emit('sendToParent1', true); this.$emit('sendToParent2'); this.$emit('sendToParent3'); this.$emit('sendToParent4', true); this.$emit(&ap ...

javascriptvue.jsemitprop

React Context Matters: Troubles Unleashed

I've been facing some difficulties with passing a value from one file to another. The problem seems to be related to implementing context, but I can't seem to figure out where I went wrong! import React from 'react' const Mycontext = ...

javascriptreactjs

What is the best method to transfer information between main.js and a specific directory?

Is there a way to efficiently pass data between the main and directory components? I would like to automatically activate the directive when main.js loads. Directive code: angular.module('dmv.shared.components'). directive('doImportPackag ...

javascriptangularjsangularjs-directiveangularjs-scopeelectron

A windows application developed using either Javascript or Typescript

Can you provide some suggestions for developing Windows applications using Javascript, Typescript, and Node.js? ...

javascriptnode.jstypescriptwindows

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

javascripttypescriptvue.js

What are the issues with using AJAX in conjunction with a for-loop?

I'm currently developing a small application that needs to create work schedules and calculate hours: . I've written the function kalkulacja() to calculate the inputs for each row and output the results through ajax. However, I'm facing an i ...

javascriptphpajaxfor-loop

Repurposing JavaScript objects after clearing their contents

Here's my issue. I'm working with a Javascript object, initialized as var stack = {}. This object is used in my project to store arrays. When the user clicks the add button, an array is added to the object with a specific key that is inputted in ...

javascriptphpjqueryhtmlajax

When attempting to submit data, the Magnific Popup page is restored to its default format

I am facing an issue with my Magnific Popup page: function dataLink(){ $.magnificPopup.open({ items: { src: 'datapage.html', type: 'ajax' }, closeOnContentClick : false, clos ...

javascriptajaxmagnific-popup

Remove Chosen Pictures (Checkbox/PHP/MySQL)

I am currently displaying images from a Database using the following HTML code: <li> <input type="checkbox" id="1" /> <a rel="gallery_group" href="images/big/1.jpg" title="Image 1"> <img src="images/small/1.jpg" alt="" ...

javascriptphpjqueryhtmlmysql

Ways to retrieve information from a POST request

I am looking for assistance on extracting data from a post request and transferring it to Google Sheets while also confirming with the client. Any guidance or support would be highly appreciated. Thank you. My project involves creating a web application f ...

javascriptjsonnode.jsexpressgoogle-sheets-api

Using Jquery to insert content into HTML using the .html() method is not possible

I am inserting Dynamic Code into a Div via Ajax and I also need to include some Javascript, but it's not displaying in the code. Below is the code snippet: $.ajax({ url: "ajax_add_logo_parts.php", data: 'act=getPartIm ...

javascriptjqueryhtml