Ajax Start Ajax Stop works only once

Question

Ajax stop/Ajax start works only the first time either button is clicked after the page is loaded, and I can't see why. If either button is clicked after the initial click, the loading div does not appear. I would like to show the loading div whenever I click either the Click 1 or Click 2 button and for the div to disappear once the contents have been fully loaded. Please see the code below:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function() { 
   $('#loading').hide().ajaxStart( function() {
    $(this).show();
 }).ajaxStop ( function(){
    $(this).hide();
});

$(document).on('click', '.menu1', function(){
 $('.maincontent').load("1.php");
});

$(document).on('click', '.menu2', function(){
 $('.maincontent').load("2.php");
});
});

</script>

<style>
  #loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
  }

  #loading-image {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 100;
  }
</style>
</head>
<body>
<button class="menu1">Click 1</button>
<button class="menu2">Click 2</button>

<div class="maincontent">
  <div id="loading">
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
  </div>
</div>
</body>
</html>

Check console. You should see an error. You can post in here. — Gynteniuxas, Sep 18 '16 at 11:13
instead of using `$('#loading').hide().ajaxStart` you can try `$('document').ajaxStart` — Patrick, Sep 18 '16 at 11:19
@Pat 6 - Thanks but that still does not seem to work for me? — Silly Question Boy, Sep 18 '16 at 11:25
http://stackoverflow.com/questions/1191485/how-to-call-ajaxstart-on-specific-ajax-calls — Patrick, Sep 18 '16 at 11:30
@Pat 45 thanks I've tried solution 1 and 2 in this post but neither of them work still — Silly Question Boy, Sep 18 '16 at 12:16

Ajax Start Ajax Stop works only once

0 Answers0