Load a GIF/show text on AJAX start and hide on AJAX stop

Question

Following is a sample/duplication of what I'm working currently. I'm unable to load a GIF/alert/show image, when AJAX starts. The click on save button will show nothing, but just an alert message after the specified timeout. As a developer I know that an error message is going to appear, but an ordinary user will never know that and tries to click multiple times which will result in a messing up of the whole page.

I have found a lot of questions in SO that are similar to mine. But nothing worked. You can mark this as duplicate, but before doing please check my fiddle here. I've used the answer Sampson's answer that is answered here, which has got nearly 1000 positive responses. I'm unable to figure out where I'm going wrong. I'm supposed to call AJAX in submit function only as per the requirements. Is it because of AJAX in submit function blocking? I'm also instructed to use jquery1.10.2, only. Is there anything like AjaxStart and AjaxStop will work only in particular frameworks?

NOTE: In my fiddle, the timeout is 10 seconds. Once you fill the details and click on save, 10th second you will get an error message. I want to display loading GIF here, for the interval of 10seconds.

The code goes like this:

HTML

<body>
  <form action="" method="POST" name="form" id="form">
    <div id='container'>
      <h1>Enter User Details</h1>
      <div class='signup'>
        <input type='text' name="Name" id="Name" placeholder='Name* (Ex:Andrew Flintoff)' maxlength="30" required title="Enter only characters with proper spaces" />
        <input type='date' id='DOB' name="DOB" style="width:80%; padding:5px 0px 5px 0px; margin-top:2%;" placeholder='Date of Birth* : ' id="mydate" required/>
        <div class="radiobtn">
          <table cellpadding="6" cellspacing="0">
            <tr>
              <td style="color:rgba(0,0,0,0.5); font-weight:300">
                <label>Gender*</label>
              </td>
              <td>
                <input type="radio" id="radio01" name="Gender" value="Male" required>Male
                <input type="radio" id="radio02" name="Gender" value="Female" required>Female </td>
            </tr>
          </table>
        </div>

        <input type='text' id="EmailId" name="EmailId" placeholder='Email* (Ex:adamclarke@yahoo.com)' required />
        <input type="submit" name='submit' value="Save" />
        <a href="usersList.html">
          <input type='button' name="cancel" value="Cancel" />
        </a>
      </div>
    </div>
    <!-- <pre id="result">
</pre> -->
  </form>
  <div class="modal">
    <!-- Place at bottom of page -->
  </div>
</body>

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}


/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */

body.loading {
  overflow: hidden;
}


/* Anytime the body has the loading class, our
   modal element will be visible */

body.loading .modal {
  display: block;
}

JS

$body = $("body");

$(document).on({
  ajaxStart: function() {
  console.log("ajax started");
    $body.addClass("loading");
  },
  ajaxStop: function() {
    $body.removeClass("loading");
  }
});

$(function() {
  $('form').submit(function() {
    var temporaryTimeOut = 10000;
    $.ajax({
      url: "http://localhost/xmlString", //Url,
      type: 'POST',
      crossDomain: true,
      dataType: 'jsonp',
      reTry: 1, //setRetry,
      timeout: 10000, //setTimeOut,
      success: function(response) {
        var maximumUsers = 4;
        if (2 != maximumUsers) {
          var dialog = confirm("Add another User?");
          if (dialog == true) {
            window.location.href = "userDetails.html";
          } else {
            window.location.href = "usersList.html";
          }
        } else {
          alert("Maximum users limit of " + maximumUsers + " has been reached");
          window.location.href = "usersList.html";
        }
        alert(serverResponse + "\nData saved successfully");
        return;
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        if (textStatus === "timeout") {

          alert("Server connectivity error! Pls check your internet connection");
          var maximumUsers = 4;
          if (2 != maximumUsers) {
            var dialog = confirm("Add another User?");
            if (dialog == true) {
              window.location.href = "userDetails.html";
            } else {
              window.location.href = "usersList.html";
            }
          } else {
            alert("Maximum users limit of " + maximumUsers + " has been reached");
            window.location.href = "usersList.html";
          }

        }
      }
    });
    return false;

  });
});

add `$("#loader").fadeIn()` just before `$.ajax({...` and in `success` and `error` callbacks add `$("#loader").fadeOut()`. Now `#loader` is the loader element that you need to add and style it using css. — Mohit Bhardwaj, Apr 21 '17 at 05:45

Jeric Cruz · Accepted Answer · 2017-04-21T06:09:34.930

2

add a property beforeSend in your ajax code.

$.ajax({
      url: "http://localhost/xmlString", //Url,
      type: 'POST',
      beforeSend: function(){ 
          //show image/text code....
      },

then put your hide text/image code in success and error properties of ajax.

edited Apr 21 '17 at 06:09

answered Apr 21 '17 at 05:53

Jeric Cruz

1,899
1
14
29

This really helped. I'll make further modifications accordingly. Thank you. – Venky Apr 21 '17 at 06:32

Load a GIF/show text on AJAX start and hide on AJAX stop

1 Answers1