CODEWITHSUNDEEP
jqueryhtmlcssajax
DanScan
DanScan

Reputation: 901

how do I create a Ajax Loading view

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)

Upvotes: 0

Views: 316

Answers (3)

Ramakant Shukla
Ramakant Shukla

Reputation: 147

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");
    }

Upvotes: 0

DanScan
DanScan

Reputation: 901

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();
           });
       }

Upvotes: 0

SidOfc
SidOfc

Reputation: 4584

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/

Upvotes: 1

Related Questions