返品後にajaxStart関数が呼び出されました

Question

私はこのコードを使ってajax呼び出しを送信し、配送税とシステムの注文の合計を再計算します。 ajaxコールがロードされている間、私は配送税と総箱にローディングスピナーを入れました。呼び出しが返ると、3つのフィールドにそれぞれの値の数値が入力されます。唯一の問題は、フェードが完了すると、スピンナーが入力フィールドに戻ってそこにとどまることです。値が返されたら、どうすればそれを消すことができますか？

$("#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

あなたは要素の各クリックで呼ばれるように新しいハンドラを取り付けるため$.ajax()のbeforeSendオプションを使用して置き換えることができます。 .effect()

var totalShipping = $('#total_shipping') 
    , totalTax = $('#total_tax') 
    , orderTotal = $('#order_total'); 

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

    //Make an AJAX call for the updated shipping 
    $.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    dataType: "json", 
    timeout: 20000, 
    beforeStart: function() { 
     totalShipping.css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center"); 
     totalTax.css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center"); 
     orderTotal.css("background", "url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat left center"); 
    }, 
    //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) { 
     totalShipping.effect("highlight", {color: '#84e779'}, 3000, function() { 
      $(this).val(msg.shipping) 
     }); 
     totalTax.effect("highlight", {color: '#84e779'}, 3000, function() { 
      $(this).val(msg.tax) 
     }); 
     orderTotal.effect("highlight", {color: '#84e779'}, 3000, function() { 
      $(this).val(msg.total) 
     }); 
    } 
    }); 
    return false; 
}); 

Answer 2

のいずれかを設定することで、プロセスを逆にすることができますか？

$("#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; 
});