2016-04-04 11 views
0

こんにちは、私は与えられたhtmlコードajaxリクエストでスピナーを読み込む方法を教えてください。

#expressShippingCalculation  
    %li.list-group-item 
    %label 
     %input#shipping_method3{:name => "shipping_method", :type => "radio", :value => "1"} 
     Shipping 
     %small (Delivery within 4-5 days) 
    %li.list-group-item#method4 
    %label 
     = form_for @order, :url => update_express_shipping_path,:method => 'patch', :html => { :id => "shippingDetails" }, :remote => true do |form| 
     = form.radio_button :express_shipping, true, :value => true, :id => 'shipping_method4', :name => 'shipping_method' 
     Express Shipping 
     %small.maroonColorText (Additional Charge of USD 10 applicable.) 
    #spinner.spinner{:style => "display:none;"} 
    %img#img-spinner{:alt => "Loading", :src => "spinner.gif"}/ 

とjsのコードが含まれている

$('#expressShippingCalculation input').change -> 
    if $('#shipping_method4').is(':checked') 
     additionalAmountExpress() 
     data = $('#shippingDetails').serialize() 
     expressValue = true 
    else 
     $('#additional-charge').hide() 
     expressValue = false 
    $.ajax 
     url: '/update_express_shipping?expressShipping=' +expressValue 
     type: 'PATCH' 
    return  

は今、私は私のAjaxリクエストの負荷スピナーを表示する必要があります。私のAjaxリクエストにコードを含める方法を教えてください

$('#spinner').bind('ajaxSend', -> 
    $(this).show() 
    return 
).bind('ajaxStop', -> 
    $(this).hide() 
    return 
).bind 'ajaxError', -> 
    $(this).hide() 
    return 

このコードを含める方法を教えてください。 ajaxStart

+0

►コードjsのコードに欠けている物事のカップル、1花がありますが、ブロック構造を定義言及するブレースがあります。 2. '$ .ajax'には' success: '&' error: 'のコールバックが含まれているため、それぞれのコールバックにあなたのshow/hideスピナーコードを置くことができます。 ** http://api.jquery.com/jQuery.ajax/ref:** – dreamweiver

答えて

0
$(document).ajaxStart(function(){ 
    $('#spinner').show(); 
}); 
$(document).ajaxComplete(function(){ 
    $('#spinner').hide(); 
}); 
$(document).ajaxError(function(){ 
    $('#spinner').hide(); 
}); 

ajaxError

ajaxComplete

関連する問題