在它们之间添加一个微调加载程序

时间:2014-04-28 14:48:11

标签: jquery ajax loading

在我想添加微调器的步骤之间(只是暂时加载消息)是否可能?

也许是这样的?

$('#loader').show();
   $.ajax({
      success: function(data) {

      //Hide the progress div if loading data is done
      $('#loader').hide();
      }
   });

我的演示的JS代码:

var prevLink = '<button class="button cancel" type="button">Cancel</button>';
var nextLink = '<button class="button continue" type="button">Confirm purchase</button>';
var navHTML = '<div class="buttons">' + prevLink + nextLink + '</div>';
var FormData = [];

$(function() {
  $('#stepbystep > fieldset').hide().append(navHTML);
  $('#first-step .cancel').remove();
  $('#last-step .continue').remove();

  $('#first-step').fadeIn();
  setHeight();

  $('button.continue').click(function() {
      var whichStep = $(this).parent().parent().attr('id');            
      if (whichStep == 'first-step') {               
      } else if (whichStep == 'second-step')    {
      } else if (whichStep == 'third-step')     {
      } else if (whichStep == 'fourth-step')    { 
      } else if (whichStep == 'last-step')      {
      }
      $(this).parent().parent().hide(300).next().show(300);
      setHeight();
  });
  $('button.cancel').click(function() {
      $(this).parent().parent().fadeOut(300).prev().fadeIn(300);
  });
})

FIXED DEMO:

http://jsfiddle.net/59fNR/2/

1 个答案:

答案 0 :(得分:0)

你可以注册一个函数来运行每个jQuery ajax调用的开始和结束,如下所示:

$(document).ajaxStart(function () {
    $("#loading").show();
}).ajaxStop(function () {
    $("#loading").hide();
});

然后你不必对每个实际的ajax请求做任何事情,它会自动运行。只需将#loading更改为你的loader元素的id。