Create a loading Div

I am trying to create a stupid loading div. I just want it to show everytime a button is clicked. I have a gif named ajaz-loader.gif located in img/

I have this a开发者_运维知识库nd it doesn't work... I just found it on the internet. Any ideas?

    <script>
    $('#loadingDiv').ajaxStart(function() {
      $(this).show();
    }).ajaxComplete(function() {
    $(this).hide();
    });
     </script>

---

Make sure to wrap your code inside a

$(function() {
  // YOUR CODE HERE
});

Then if it still doesn't work, double check if your #loadingDiv

That looks like this :)

Display loading while webservice is running

---

    $(document).ready(function () {
        $("#btnid").click(function () {
            $("#loadingDiv").show();
            $.ajax({
                url: "url"
                cache: false,
                type: "GET",
                dataType: "text",
                success: function (data) {
                    //Success code here
                }
            });
            $("#loadingDiv").hide();
        });
    });

This will show your loading div before the Ajax call then hide it after weather its successful or not.

---

You might want to post more code. With what you have above, it's unclear what the problem might be. Perhaps it's something simple, such as you're not loading jQuery properly or the ID speicified for the element is incorrect. Perhaps it's somewhat more involved, such as the event that triggers ajaxStart never fires.

With the caveat that there are some suboptimal practices in the code below (e.g., putting style information directly in the HTML) and that I'm not handling ajax or hiding after success, this should might you started:

<div id="loadingDiv" style="display:none">
Congratulations! You clicked the button and can see the loading div now!
</div>

<input type="button" onclick="document.getElementById('loadingDiv').style.display='block';" value="Click me to see the div!"/>

That might get you going in the right direction. I suspect it's not enough to do everything you want to do, but if all you really want is "to just...show everytime a button is clicked", well, it does that much, and modifying it for jQuery is likely not difficult...

---

I made my own loading pseudo-class and works fine in big web (jsp) application.

My Code is something like this:

var CMSLoading =
{
        loading_div: null,
        queue: 0,
        start: function(never_stop)
        {
               //Create div with getLoadingDiv (wrong name) or show if exist
               // and increment queue
        },
        stop: function(turn_off)
        {
                //Check queue and hide or destroy div
        },
        getLoadingDiv: function()
        {
                // Create DIV and store in local variable loading_div
        }
}

When I run an ajax call CMSLoading.start() and when ajax finish or die call CMSLoading.stop();