Question

我有这个代码提交了一个ajax调用来重新计算运费税和我们系统中订单的总数。当ajax调用正在加载时，我将一个加载微调器放入运费税和总计框中。当调用返回时，它会使用相应值的数字填充这三个字段。唯一的问题是，一旦淡入淡出完成，微调器就会返回输入字段并停留在那里。一旦返回值，我怎么能让它消失？

$("#recalc_btn").click(function(){
  //Grab the order number and site ID from the URL
  var order_id = getQueryVariable("o");
  var site_id = getQueryVariable("s");

  $(document)
  .ajaxStart(function () {
    $('#total_shipping').css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center");
    $('#total_tax').css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center");
    $('#order_total').css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center");
  });
  //Make an AJAX call for the updated shipping
  $.ajax({
    type: "POST",
    url: "ajax.php",
    dataType: "json",
    timeout: 20000,
    //Pass the order ID and site ID through post
    data: {
      'action': 'recalculate_shipping',
      'order_id': order_id,
      'site_id': site_id
    },
    //When success is true change the values of shipping and total and make them green
    success: function(msg) {
      $("#total_shipping").effect("highlight", {color: '#84e779'}, 3000);
      $("#total_tax").effect("highlight", {color: '#84e779'}, 3000);
      $("#order_total").effect("highlight", {color: '#84e779'}, 3000);
      $("#total_shipping").val(msg.shipping);
      $("#total_tax").val(msg.tax);
      $("#order_total").val(msg.total);
    }
  });
  return false;
});

Answer 1

您可以使用beforeSend的{{1}}选项替换附加要在元素每次点击时调用的新处理程序;使用$.ajax()

的完整回调

.effect()

Answer 2

也许只是通过设置为none来反转过程？

$("#recalc_btn").on("click", function() {
  //Grab the order number and site ID from the URL
  var order_id = getQueryVariable("o");
  var site_id = getQueryVariable("s");
  var mythings = $('#total_shipping').add('#total_tax').add('#order_total');
  mythings.css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center");
  //Make an AJAX call for the updated shipping
  var myajax = $.ajax({
    type: "POST",
    url: "ajax.php",
    dataType: "json",
    timeout: 20000,
    //Pass the order ID and site ID through post
    data: {
      'action': 'recalculate_shipping',
      'order_id': order_id,
      'site_id': site_id
    }
  });
  myajax.done(function(msg) {
    var mythings = $('#total_shipping').add('#total_tax').add('#order_total');
    mythings.effect("highlight", {
      color: '#84e779'
    }, 3000);
    $("#total_shipping").val(msg.shipping);
    $("#total_tax").val(msg.tax);
    $("#order_total").val(msg.total);
  });
  myajax.always(function(msg) {
    var mythings = $('#total_shipping').add('#total_tax').add('#order_total');
    mythings.css("background", "none");
  });
  return false;
});

返回

2 个答案: