Steps to create inactive HTML with a loading GIF displayed

When the sign-up button is clicked, a modal pops up. After inputting data, upon hitting the "sign up" button, I would like the actual popup's HTML content to become inactive and display a loading GIF icon in the center until an AJAX response is received.

For example, the code for the modal structure:

<div class="modal" id="mymodal">
  <div id="modalcontent">
   <div id="modalhead"> </div>
   <div id="modalbody"> </div>
   <div id="modalfooter"> </div>
  </div>
</div>

JavaScript code snippet:

$('#modalcontent').html('<img src=\'/static/img/modalloader.gif\'/>');

However, this code does not make the background HTML elements inactive. Instead, it removes all the content, causing the large modal to shrink to the size of the loading GIF icon.

How can this issue be resolved?

javascriptjqueryhtmlcssajax

Answer №1

Dealing with browser compatibility, especially on mobile browsers, can be tricky when trying to position a modal using absolute positioning within the content. To work around this issue, I create separate containers for the content and a loading gif.

<div id='content'>
  <!-- Your site's content goes here -->
</div>
<div id='loading' class='hidden'>
  <div class="modal" id="mymodal">
    <div id="modalcontent">
      <div id="modalhead"> </div>
      <div id="modalbody"> </div>
      <div id="modalfooter"> </div>
    </div>
  </div>
</div>

For the CSS:

.hidden{display: none !important;}

And for the JavaScript:

//onlaoad function yadayadayada {

  // (...whatever way you trigger the request...)
  showLoading();
  $.ajax(url: //Idontknow,
         success: //handle it here or in complete,
         error: //handle it here or in complete,
         complete: function(){
           hideLoading();
         });

  // some more whatever

// end of onload function }

function showLoading(){
  $('#content').addClass('hidden');
  $('#loading').removeClass('hidden');
}

function hideLoading(){
  $('#content').removeClass('hidden');
  $('#loading').addClass('hidden');
}

While it may seem cumbersome to toggle between hiding and showing elements, this approach has proven to be the simplest and most reliable method for avoiding browser issues related to absolute positioning.

Answer №2

Display a loading spinner using the ajaxStart method.

For example, as shown on the jQuery website:

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

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 AJAX/HTTP communication

Looking for a solution to update link text dynamically based on tag count using AJAX? Take a look at this code snippet: <%= link_to "#{(@video.topics.count == 0) ? 'Add descriptive topics so people can find your song!' : 'Edit Topics&apo ...

ruby-on-railsrubyajaxruby-on-rails-3jquery

Serving pages with Node JS and loading .js files on the client side

Here is a simple JS file that will be familiar to those who have worked with Socket.IO in NodeJS and Express: var express = require('express'), app = express(), server = require('http').createServer(app), io = require(&apos ...

javascriptjquerynode.jsexpresssocket.io

Numerous Levels of Dropdown Menus

I am looking to implement a feature on a web page where users can select multiple vehicles using JQuery. The idea is that selecting the brand in the first dropdown will populate the second dropdown with the models available for that specific brand. The ...

javascriptjqueryjsonhtml

Information displayed when Tab is inactive - Material Ui and React

Just diving into the world of React and UI design, seeking some guidance on an issue I'm facing. I'm working on implementing Material Ui Tabs in my Component, but struggling to get a tooltip to show on a disabled Tab. Here's a snippet of my ...

javascriptcssreactjsmaterial-uitabs

Is there a way to transfer the data from a chosen row into a different table?

My task involves using a table with two different conditions. In the first table, I display all incoming data. Then, in the second table (referred to as "select summary"), I want to show the row selected in the first table. To achieve this, I am utilizing ...

javascriptreactjsmaterial-ui

A guide on sorting an array based on elements from a different array

We are currently in the process of developing an application using Vue and Vuex. Our goal is to display a list of titles for venues that a user is following, based on an array of venue IDs. For instance: venues: [ {venue:1, title: Shoreline} {venue:2, ti ...

javascriptarraysvue.jsgoogle-cloud-firestore

I've been working on a script in JavaScript to retrieve lectures for a specific day, but I'm having trouble connecting my jQuery code to it

Exploring a JavaScript function that retrieves today's lectures for a specific section of a class using jQuery. The challenge lies in implementing this array of classes on an HTML file. //function to get today var today = new Date(); var dd = today ...

javascriptjqueryhtmlbootstrap-4

As the second line of Javascript code is being executed, the first line is still

I have a task where I need to execute a SQL SELECT statement and save the results. Then, those results need to be passed into a function to generate a graph using the data points provided. Refer to the code snippet below for details. var dataKWhr = getCov ...

javascriptsqlite

What issues are plaguing my weak AJAX file upload feature?

Although AJAX File Upload may not be possible, I've chosen to use it as a placeholder name. :) My implementation involves utilizing this jQuery plugin. The main issue seems to arise from using it in a slightly different manner. Here's how I&apos ...

javascriptjqueryajax

Double request being sent by Ajax

Sample URL: Note: Please use the test sign in credentials: test/test for username/password. I am currently working on an AJAX request to fetch data from a database. The serverTime.php file appears to be functioning correctly as it is inserting and return ...

javascriptajaxxmlhttprequest

Adjust the size of the font in accordance with the value of the span text

I am looking to adjust the font size based on the value within the span element. The numbers in the class name may vary. Issue: using text() retrieves all values (e.g. 50020) I want to incorporate each() and $this in some way. How can I do this? Thank ...

javascriptjqueryhtmlcss

What steps can I take to guarantee that both images and text adapt well to different screen sizes?

Is there a way I can organize my website to display 3 movies per row with the text centered relative to the image? Here is how it currently looks (the red box is just for reference, please ignore): https://i.stack.imgur.com/w2pgN.jpg Also, when I resize m ...

phphtmlcss

Using the OR operator in a JSON server

One way to retrieve data from a json-server (simulated server) is by using the following call: http://localhost:3000/posts?title_like=head&comments_like=today When this call is made, records will be returned where the title is similar to "head" AND c ...

javascriptjsonnpmjson-server

Could there be a more efficient method to enable support for all video formats?

I have a case statement in my video validation function that checks for specific file extensions of video formats. However, I am wondering if there is a shorter way to write the code in order to allow all video formats instead of creating a long list of al ...

javascriptjquerycase

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

I've been struggling with an error in VueJs require function for the past two days. I'm attempting to pass a prop to the Home component and then display the image. Home.vue <template> <BlogPost :post="welcomeScreen"/> <B ...

javascripthtmlvue.js

Discovering the initial element with a data attribute above zero using JQuery

I am working with a set of divs that have the class .item-wrap. At the moment, I am able to select the first div using this code snippet: $(".item-wrap:first").trigger( "click" ); Each .item-wrap element comes with a data-amount attribute. My challenge ...

javascriptjqueryhtml

Refresh data with Axios using the PUT method

I have a query regarding the use of the HTTP PUT method with Axios. I am developing a task scheduling application using React, Express, and MySQL. My goal is to implement the functionality to update task data. Currently, my project displays a modal window ...

javascriptreactjsexpress

What is the best way to reset the 'aria-expanded' attribute to 'false' as I navigate to the following element?

My menu has 2 dropdown buttons, each with a default 'aria-expanded'=false value. The buttons also have the 'up' and 'down' classes to indicate when they are expanded or closed. The issue arises when I click on the first button ...

htmljquerywai-aria

Sending an Array from a ReactJS Frontend to a Django Backend using JavaScript and Python

I successfully created a website using Django and React JS. In my project, I am working on passing an array named pict from the frontend JavaScript to the backend Python in Django. let pict = []; pictureEl.addEventListener(`click`, function () { console ...

javascriptpythonreactjsdjango

Error message: "NAN encountered while attempting to extract a numerical value from

I've encountered a strange bug in my coding. I'm working on a weather forecasting website that uses geolocation to identify your city and then utilizes the wunderground API to provide the forecast. The issue arises when manually searching for a c ...

javascriptjqueryjsonnan