What are the steps to create a dynamic Ajax Loading view?

Question

What are the steps to create a dynamic Ajax Loading view?

I have encountered this situation multiple times, but unfortunately, I have not been able to find a simple solution or a website that explains the process and reasoning behind it.

My goal is to create a container (div) that includes both a loading element and the actual form within it.

<div id="mycontainer" class="container">
    <div class="loading"&gT;// Displaying a loading GIF or message
        <div>
            <div class="myactualform">
                <input id="firstname" />
                <input id="btnSend" type="button" />
            </div>
        </div>

My question revolves around how to hide "myactualform" and show "loading", while ensuring that the loading space occupies the same area as "myactualform". I believe this may involve altering z-indexs, indicating a CSS-related issue.

Note:
I attempted to use

$(".classname1").hide()/$(".classname2").show()

from jQuery, but encountered an issue where the div size reduces.

I have created a jsfiddle project at: http://jsfiddle.net/aHW33/ (the HTML code on the page differs slightly to demonstrate an expanded version)

jquery html css ajax

Answer 1

Answer №1

Take a look at this updated code snippet, it will smoothly fade out your form while fading in the button.

Essentially, these lines of code do the magic:

  $(".formstuff").fadeOut().promise().done(function() {
      $('.loading').fadeIn();
  });

This sequence ensures that the form fades out first, waits for the process to finish, and then displays the loading animation.

Check out the demo here!

Answer 2

Take a look at this updated code snippet, it will smoothly fade out your form while fading in the button.

Essentially, these lines of code do the magic:

  $(".formstuff").fadeOut().promise().done(function() {
      $('.loading').fadeIn();
  });

This sequence ensures that the form fades out first, waits for the process to finish, and then displays the loading animation.

Check out the demo here!

Answer 3

Answer №2

Similar to the query on creating a "Please Wait, Loading..." animation using jQuery on Stack Overflow, my specific need was to place it within the loading container itself rather than as a whole page modal.

I received assistance from user rogMaHall regarding the height and width requirements for achieving this setup. The complete solution I came up with is outlined below:

Html:

            <div id="testit">
                <div style="display: none;" class="loading">
                    My loading message
                </div>
                <div class="formstuff">
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="button" id="showhide" />
                </div>
            </div>
            <p>This text should not move</p>

The Javascript code (which may be further optimized) is as follows:

       $(document).ready(function(){
           $(".loading").hide();
           $("#showhide").click(function(){
              nowLoading();
         });
       });
       
       //Call these in your Ajax beforeSend
       function nowLoading(){
          //Obtain original height and width of the form container (with thanks to rogMaHall)
           $(".loading").height($(".loading").parent().height());
           $(".loading").width($(".loading").parent().width());
           
           //Using technique by Sidney Liebrand (answering an unasked question), fade out form content and show loading message
           $(".formstuff").fadeOut().promise().done(function() {
              $('.loading').fadeIn();
           });
           return false;
       }
       
       //Call after Ajax returns (success, error, finished)
       function loadingComplete(){
           $(".loading").fadeOut().promise().done(function() {
              $('.formstuff').fadeIn();
           });
       }

Answer 4

Similar to the query on creating a "Please Wait, Loading..." animation using jQuery on Stack Overflow, my specific need was to place it within the loading container itself rather than as a whole page modal.

I received assistance from user rogMaHall regarding the height and width requirements for achieving this setup. The complete solution I came up with is outlined below:

Html:

            <div id="testit">
                <div style="display: none;" class="loading">
                    My loading message
                </div>
                <div class="formstuff">
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="button" id="showhide" />
                </div>
            </div>
            <p>This text should not move</p>

The Javascript code (which may be further optimized) is as follows:

       $(document).ready(function(){
           $(".loading").hide();
           $("#showhide").click(function(){
              nowLoading();
         });
       });
       
       //Call these in your Ajax beforeSend
       function nowLoading(){
          //Obtain original height and width of the form container (with thanks to rogMaHall)
           $(".loading").height($(".loading").parent().height());
           $(".loading").width($(".loading").parent().width());
           
           //Using technique by Sidney Liebrand (answering an unasked question), fade out form content and show loading message
           $(".formstuff").fadeOut().promise().done(function() {
              $('.loading').fadeIn();
           });
           return false;
       }
       
       //Call after Ajax returns (success, error, finished)
       function loadingComplete(){
           $(".loading").fadeOut().promise().done(function() {
              $('.formstuff').fadeIn();
           });
       }

Answer 5

Answer №3

Here is the suggested code snippet for handling AJAX requests:


$(document).ajaxStart(function () { 
    showLoader();
});
$(document).ajaxStop(function () {
    hideLoader();
});

function showLoader() {
    $("#PageLoader").css("display", "block");
    $("#LoaderWrapper").css("display", "block");
}

function hideLoader() {
    $("#PageLoader").css("display", "none");
    $("#LoaderWrapper").css("display", "none");
}

Answer 6

Here is the suggested code snippet for handling AJAX requests:


$(document).ajaxStart(function () { 
    showLoader();
});
$(document).ajaxStop(function () {
    hideLoader();
});

function showLoader() {
    $("#PageLoader").css("display", "block");
    $("#LoaderWrapper").css("display", "block");
}

function hideLoader() {
    $("#PageLoader").css("display", "none");
    $("#LoaderWrapper").css("display", "none");
}

What are the steps to create a dynamic Ajax Loading view?

Answer №1

Answer №2

Answer №3

Similar questions

Adjustable height for the absolute element

Tips for personalizing PNG images within an SVG element

The image is non-adjustable to different screen sizes

Is it possible to include two functions within a single HTML script?

It is imperative that the HTML div element remains within the boundaries of the page

Utilizing conditionals for CSS minification with C# Regular Expressions

Which is more efficient in JavaScript: Arrays, Object literals, or JSON for achieving better performance?

Tips for creating horizontal scrolling in the div element

Ways to display an icon with an underline effect upon hovering over text

Utilize the power of Nuxt and Vue 3 to create sortable columns in a table, with the ability to only change the icons on the sorted column

Retrieving JSON values from a CodeIgniter model using AJAX

jQuery: The ultimate solution for preventing any interruptions while waiting for Ajax requests to finish

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

Updating to a newer version of jQuery causes issues with pop-out submenus

List of nested HTML tags in Javascript

Managing several instances of NgbPagination on a single webpage

Adjust text size using the "increase toggle"

What are some ways to handle the unique selected text behavior of the jQuery MaskedInput plugin?

Using a custom font in a Django project without relying on the Google Fonts API