How to show loading spinner in on ajax request?

Question

Hello I have included given html code

#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"}/

and js code is

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

Now I need to show loading spinner on my ajax request. lease guide me how I will include given code in my ajax request

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

Please guide me how to include this code.

there are couple of things missing in code js code, 1. There is flower braces to mention define the block structure. 2. `$.ajax` contains callback for `success:` & `error:`, so you can place your show/hide spinner code in respective callbacks. **http://api.jquery.com/jQuery.ajax/ref:** — dreamweiver, Apr 04 '16 at 05:32

Rino Raj · Answer 1 · 2016-04-04T05:31:21.020

0

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

► ajaxStart

► ajaxError

► ajaxComplete

edited Apr 04 '16 at 05:31

answered Apr 04 '16 at 05:21

Rino Raj

6,041
2
22
37

How to show loading spinner in on ajax request?

1 Answers1