how do I create a Ajax Loading view

Question

I have seen this done many times but when I go look this up there does not seem to be an easy way or at least a website that tells me what it is doing and why.

Ideally what I want to do is create a container (div) that has both a loading and the actually form inside of it.

<div id="mycontainer" class="container">
    <div class="loading">//Image of a loading gif or message
        <div>
            <div class="myactualform">
                <input id="firstname" />
                <input id="btnSend" type="button" />
            </div>
        </div>

My question comes to be is how do I make "myactualform" hide and "loading" show? So that loading class takes up the same space as the "myactualform" took. Imagine it has something to do with changing z-indexs. I am pretty sure this is CSS issue.

Note:
I have used the $(".classname1").hide()/$(".classname2").show() from jQuery but the issue I have is the div shrinks.

I created a jsfiddle project at: http://jsfiddle.net/aHW33/ (the HTML code in there is different then here to show an expanded version)

possible duplicate of [jQuery "Please Wait, Loading..." animation?](http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation) — Sudipta Chatterjee, Oct 28 '13 at 15:27
Are you trying to avoid assigning a `height` and `width` to the container class? If you're issue is that the div shrinks, that's the easiest solution. — rogMaHall, Oct 28 '13 at 15:29

score 1 · Answer 1 · answered Oct 28 '13 at 15:33

Here's an updated fiddle, that will fadeOut your form, and fadeIn the button.

basicly, the lines:

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

mean that it will first fadeOut the form, wait for it to be done, then fadeIn the loading gif.

http://jsfiddle.net/aHW33/1/

score 0 · Answer 2 · edited May 23 '17 at 12:05

Although this is similar to the How can I create a "Please Wait, Loading..." animation using jQuery?

What I was looking for was to dump it inside the container that the loading piece runs in. Not a whole page modal.

So to answer my question which rogMaHall helped with my asking the question about height and width.

My total solution is as follows:

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>

And my javascript (Which I think can be shortened)

       $(document).ready(function(){
           $(".loading").hide();
           $("#showhide").click(function(){
              nowLoading();
         });
       });
       //Call these in your Ajax beforeSend
       function nowLoading(){
          //Get the original height and width of the container with the form (rogMaHall thanks)
           $(".loading").height($(".loading").parent().height());
           $(".loading").width($(".loading").parent().width());
           //I liked this technique from Sidney Liebrand (it answers a different question I have not asked yet
           $(".formstuff").fadeOut().promise().done(function() {
              $('.loading').fadeIn();
           });
           return false;
       }
       //Call this after Ajax returns (success, error, finished)
       function loadingComplete(){
           $(".loading").fadeOut().promise().done(function() {
              $('.formstuff').fadeIn();
           });
       }

score 0 · Answer 3 · answered Nov 05 '13 at 13:29

You should use below code:

    $(document).ajaxStart(function () {           
        PageLoadWorkerStart();
    });
    $(document).ajaxStop(function () {
        PageLoadWorkerEnd();
    });        

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

how do I create a Ajax Loading view

3 Answers3