set delay in jQuery AJAX call on clicking of a button

Question

I have below code, it executes when I click on a button.

I need to display a progress bar/waiting image in the browser for 5 seconds, when user clicks on a button. How to set time out and how to display progress bar/waiting page image in the page when user clicks on a button

$("#btnSubmit").click(function(){
var formData = $("form").serialize();           
  $.ajax({
    url: 'cgi-bin/config',
    type: 'POST',
    data: formData, // An object with the key 'submit' and value 'true;           
    success: function (result) {
      console.log(result);  
    },
    failure: function () {
      alert("Ajax request failed!!!");
    },error: function () {
      alert("Ajax request failed to update data!!!");
    }           
  });       
});

How do you plan to show that *progress bar*? Using an UI lib or what? — DontVoteMeDown, Mar 07 '14 at 12:53
Nice but you didn't answered how you plan to show that progress bar... — DontVoteMeDown, Mar 07 '14 at 13:00
i too dont have idea how to display an progress bar image :( that's the reason i am posting :( :( — sree, Mar 07 '14 at 13:04

score 0 · Answer 1 · edited Oct 20 '17 at 17:11

0

Use beforeSend and complete

$("#btnSubmit").click(function(){
  var formData = $("form").serialize();           
  $.ajax({
    url: 'cgi-bin/config',
    type: 'POST',
    data: formData, // An object with the key 'submit' and value 'true;           
    success: function (result) {
      console.log(result);  
    },
    failure: function () {
      alert("Ajax request failed!!!");
    },error: function () {
      alert("Ajax request failed to update data!!!");
    },  
    beforeSend: function(){
      $('.progress').show();
    },
    complete: function(){
      $('.progress').hide();
    }         
  });     
});

HTML

<div class="progress" style="display:none;"><img src="loading.gif" />Loading...</div>

edited Oct 20 '17 at 17:11

Shiladitya

12,003
15
25
38

answered Mar 07 '14 at 12:53

Shijin TR

7,516
10
55
122

WTH? This wont even run! You'll got a syntax error. – DontVoteMeDown Mar 07 '14 at 12:55
this will just for before sending, but i need to set time out.. and i need to display the progress image in the middle of the browser – sree Mar 07 '14 at 12:56
@sree I think you need to hide progress image after ajax request is completed,right? – Shijin TR Mar 07 '14 at 12:58
yes i need to set the progress image in MIDDLE of the browser before sending request (like displaying processing request) and need to hide progress image once the ajax request is completed – sree Mar 07 '14 at 13:00
@sree,I updated my answer,you need to add css for .progress,Hope it will work – Shijin TR Mar 07 '14 at 13:07
@shijin, i need to set time out.. and is that loading.gif will displays in middle of the browser? where exactly i need to set the div? – sree Mar 07 '14 at 13:42
@sree have you got the answer?I see your comments now,because of day off – Shijin TR Mar 10 '14 at 04:10
@shijin No i didn't get any solution:( – sree Mar 11 '14 at 06:00
@sree Can you try to style .progress like http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div – Shijin TR Mar 11 '14 at 06:25
@shijin i have tried that div and your ajax before send and after send The loading.jpg is displaying always , its not should be right? I need to display after clicking of the button, and need to hide it see my full code here #container { width: 100px; height: 100px; position: relative; }

– sree Mar 11 '14 at 10:11
@shijin , yes its not working but i could able to fix my code with the link http://jsfiddle.net/joshdavenport/Qw6uv/4/ , this works fine..anyways thanks a lot for your time – sree Mar 11 '14 at 11:58

score 0 · Answer 2 · edited Oct 20 '17 at 17:16

$("#btnSubmit").click(function(){
  var startTime = Date.now(),
  // finish function is called at the end - when request is completed and at least 5s passed
  // result will be null on error or whatever was received by success callback
  finish = function (result) {
    if (result === null) {
      // probably error, handle it..
    } else {
      // handle result
    }
    $('#progress').hide();
  },
  checkDone = function (result) {
    var r = Date.now() - startTime; // time taken by request
    if (r < 5000) { // if less than 5s then set timeout for remaining time
      setTimeout(function () {
        finish(result);
      }, 5000 - r);
    } else { // if there was already 5s finish immediately
      finish(result);
    }
  },
  formData = $("form").serialize();
  $('#progress').show();
  $.ajax({
    url: 'cgi-bin/config',
    type: 'POST',
    data: formData, // An object with the key 'submit' and value 'true;
    success: function (result) {
      console.log(result);
      checkDone(result);
    },
    failure: function () {
      alert("Ajax request failed!!!");
      checkDone(null);
    },
    error: function () {
      alert("Ajax request failed to update data!!!");
      checkDone(null);
    }
  });     
});

progress div example (just put in body):

<div id="progress" style="display:none;position:absolute;z-index:99999;top:0;left:0;width:100%;height:100%;opcity:0.7;background:url('/img/progress.gif') 50% 50% no-repeate #000"></div>

score 0 · Answer 3 · answered Mar 11 '14 at 11:59

0

i could able to fix my code with the link jsfiddle.net/joshdavenport/Qw6uv/4 , this works fine..

answered Mar 11 '14 at 11:59

sree

121
1
18

set delay in jQuery AJAX call on clicking of a button

3 Answers3