Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done.
I have a div container block: 

<div class="wrapper_div">
//some other divs here
    </div>

Along with the following CSS style: 

.wrapper_div{

    margin: auto;

    width: 1000px;

    height: 545px;

}

Despite its simplicity, I can't seem to overlay this div when making an AJAX request. All I need is to display a loader animation (gif) at the center of this div block and overlay it with a grey background, for example.
Please provide the solution as requested. Thank you.

EDIT

Apologies for the confusion earlier - the problem does not lie in AJAX, but rather in the CSS and HTML layout. I'm struggling to create the correct layout.

javascriptjqueryhtmlcssajax

Answer №1

When sending an ajax request, you can use the 'beforeSend' option to manipulate a loading overlay. This overlay can be shown before the request is sent and then hidden once it is complete.

    $.ajax({
        url: "/Home/SomeThing",
        data: {name: name},
        error: function () {

        },
        beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay

        success: function (data) {
            $('#UnitAjaxDump').html(data);
        },
        type: 'GET',
        complete: function () { HideLoadingScreen(); } //<Hide Overlay
    }

To style your overlay, make sure to position it either absolutely or fixed in your CSS:

#overlay{
    position: fixed;
    top:50%;
    left:50%;
    width:500px;
    height:500px;
    margin-left:-250px;
    margin-top:-250px;
    background: somebackground;
}

Answer №2

Your ajax request lacks sufficient detail for a comprehensive solution, but here's a suggestion that might help. I've implemented a timeout to mimic the request process, toggling the overlay display from '' to 'none' before and after the timeout.

Check out this plnkr

<div>
  <span>My Content</span>
  <button onclick="submitForm()">Submit</button>
</div>
<div id="overlay" style="display: none;"></div>

#overlay {
  background: blue;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.2;
}

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

Please type the file name into the provided text box

Is there a way to automatically insert the filename of an uploaded file into an existing text input using either or valums.com/ajax-upload/? (I am working with php) For example, in a textbox: <input name="image" type="text" value="file_name" /> ...

phpjavascriptajaximage-uploading

Give properties to a function that is being spread inside an object

While working with React, I am facing a challenge of passing props from the instanced component into the mockFn function. The code example below is extracted and incorporates Material UI, but I am struggling on how to structure it in order to have access t ...

javascriptreactjsmaterial-uistyled-componentsemotion

developing an associative object/map in JavaScript

I have a form featuring various groups of checkboxes and I am attempting to gather all the selected values into an array, then pass that data into an Ajax request. $('#accessoriesOptions input').each(function(index, value){ if($(this).prop(& ...

javascriptjqueryajax

Exploring the capabilities of referencing MongoDB documents with the populate method in Node.js

I have been working on referencing in Node.js using the populate method, but I am unsure about how exactly it works. In my code, I am creating a reference to the user collection from my child collection. I have two collections - one for children and anothe ...

javascriptnode.jsmongodb

Animating elements with CSS keyframes for scaling and translating transformations

I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation. I suspect that this issue is caused by the fixed coordinates of ...

htmlcssanimationcss-animations

How can the backgroundImage css in react admin <Login /> be replaced using Material-UI?

I have been refering to the following resources: Learn about customizing login page background in React-Admin: Explore themes customization in Material-UI: https://material-ui.com/customization/components/ Instead of using a preset background, I want to ...

javascriptcssreactjsmaterial-uireact-admin

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

htmlcsspositionheightabsolute

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

jquerycssjquery-uiprogress-barjquery-effects

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

The Problem Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping ...

javascriptjqueryhtmlcss

Persistent banner designed to accompany blog posts

I've been attempting to insert a banner ad that runs along the left side of my blog post. Unfortunately, all my efforts so far have caused it to display above the content, pushing the blog post down the page. You can view the live link here. Here i ...

htmlcsswordpress

What is the reason behind the absence of unwrapping when utilizing a ref as an element within a reactive array or reactive Map?

The Vue documentation states the following: Unlike reactive objects, there is no unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map Here are some examples provided in the documentation: c ...

javascriptvue.jsvuejs3

RobotFramework encounters difficulty locating an element using JavaScript

After working with RF for the past few weeks, I came across a persistent issue that has been bothering me. I keep getting the following error: The element with the locator 'XXX' (just a template) cannot be found. Upon investigating the span tha ...

javascriptseleniumrobotframework

Transferring a boolean model value to a JavaScript function triggers a reference to the onchange function

An onchange event is triggered in an input tag of type checkbox, calling a JavaScript function and passing three parameters from the model: <input type="checkbox" ... onchange="changeRow('@Model.Id', '@Model.Type', @Model.AwaitingAp ...

javascriptasp.net-mvc-4

The div's innerHTML is consistently cleared after a php page loads, even though it loads successfully

When using jQuery, I am loading a div dynamically $('#Detailvolunteer').load("http://localhost/../somepage.php") After the content is loaded, the div appears to be empty even though it has been loaded successfully. The innerHTML value shows not ...

phpjqueryajax

$http({method}) is malfunctioning while $http.get is functioning properly

Issue Description: While working on my project, I encountered an issue where using $http({ method : 'GET', url : data : ..... param works fine for both GET and POST requests. However, when the same method is used in JSFiddle, it blocks my reques ...

javascriptjqueryajaxangularjsxmlhttprequest

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?

Curious about the possibility of a video page layout featuring a main screen and smaller clickable screens below it. When clicking on one of the smaller screens, the main screen would display the selected video, similar to YouTube. We have obtained data f ...

javascriptjqueryjsonhtmlhtml5-video

Navigating through the DOM using JavaScript or regular expressions

I have a DOM string called innerHTML and I am looking to extract or display the node value using either JavaScript's DOM API or JavaScript RegEx. "<nobr> <label class="datatable-header-sortable-child" onmousedown="javascript:giveFeedback(&ap ...

javascriptregex

Ways to compare UTC timestamps using JavaScript

Insight into Time Data I have obtained UTC start and end times from a database query, which are stored in an array format as follows: [ '9145001323', '08:00', '12:00' ] The second and third elements in the array indicate t ...

javascriptarraysdatetime

Tips for handling the disappearance of table rows while waiting for search data to load in Selenium using C#: How to handle the situation when the table rows

When the table is initially opened, it loads data. I have created a method that searches for random data and displays "No result" while waiting for the old data to clear and new search results to load. The first row of the table always remains visible with ...

c#jqueryseleniumwebdriverwaitwebautomation

Triggering a click event on an anchor <a> element

Seeking help with a Javascript event query. I have an <a> tag set up like this: <a id='aTag' href='http://example.com'>Click to redirect</a> When attempting to trigger the click event using: <script> $('#a ...

javascriptjqueryajaxmagentojquery-events