2011-04-16 3 views
1

как использовать загрузчик изображений с $ .get , когда im делает ajax-вызовы с $ .get, иногда требуется, чтобы эффект имел место . Как я могу поставить загрузчик, чтобы пользователь знал, что ждать , пока данные не будут загружены?

благодаря

редактировать:

$.ajax({ 
    url: 'ajax.php', 
    type: 'GET', 
    dataType: 'json', 
    data: 'shipping=' + sval, 
    onBeforeSend: function() 
    { 
     $("table#cart tbody tr#line_top td ul#total li#shipping span").html("<img src='images/spinner.gif'>"); 
    }, 

    complete: function() 
    { 

    }, 

    success: function(out) 
    { 
     getShippingPrice = out.shippingPrice; 
     getTotalPrice = out.cartTotal; 
     $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice); 
     $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice); 
    } 
}); 

edit2:

<script type="text/javascript"> 

var getShippingPrice; 
var getTotalPrice; 

$(document).ready(function() { 
    $(".shipmethod").change(function() { 
     sVal = $(this).val(); 
     $.ajax({ 
      url: "ajax.php", 
      type: "GET", 
      dataType: "json", 
      data: "shipping=" + sVal, 

      beforeSend: function() 
      { 
       $('.ajaxSpinner').show(); 
      }, 

      complete: function() 
      { 
       $('.ajaxSpinner').hide(); 
      }, 

      success: function(out) 
      { 
       getShippingPrice = out.shippingPrice; 
       getTotalPrice = out.cartTotal; 
       $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice); 
       $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice); 
      } 
     }); 
    }); 
}); 

</script> 

ответ

7

У вас есть две возможности.

Либо использовать полный $.ajax() метод, который дает вам больше энергии:

$.ajax({ 
    url: '/foo.cgi', 
    type: 'GET', 
    beforeSend: function() { 
     // TODO: show your spinner 
     $('#ajaxSpinner').show(); 
    }, 
    complete: function() { 
     // TODO: hide your spinner 
     $('#ajaxSpinner').hide(); 
    }, 
    success: function(result) { 
     // TODO: handle the results 
    } 
}); 

или использовать метод $.ajaxSetup(), чтобы обеспечить глобальные хуки настройки для всех Ajax запросов:

$.ajaxSetup({ 
    beforeSend: function() { 
     // TODO: show your spinner 
     $('#ajaxSpinner').show(); 
    }, 
    complete: function() { 
     // TODO: hide your spinner 
     $('#ajaxSpinner').hide(); 
    } 
}); 

, а затем сделать свой $.get() как обычно:

$.get('/foo.cgi', function(result) { 
    // TODO: handle the results 
}); 
+0

check above in edit, я опубликовал w Я попробовал, но это не работает –

+0

@Sarmen B., вы используете событие под названием 'onBeforeSend', тогда как оно должно быть' beforeSend'. Пожалуйста, внимательно ознакомьтесь с моим примером. –

+0

спасибо, что я получил его для работы сейчас, проблема заключается в том, что в первый раз я делаю выбор, который он работает, во второй раз, когда я делаю выбор, загрузчик не появляется. как я могу заставить его отображаться каждый раз, когда выбор изменяется? –

Смежные вопросы