Jquery Ajax: .load () & $ .ajax () - PullRequest
Новая
       3

Jquery Ajax: .load () & $ .ajax ()

0 голосов
/ 02 мая 2011


это мой код jquery для вызова в ajax представления переключателя. Это работает, но для загрузки требуется около 20 секунд, поэтому я хотел бы добавить загрузочный GIF для ожидания (пока XHR). Я не знаю, что делать с методом .load (), я только что видел метод $ .ajax (). Если кто-то может объяснить мне, как отобразить gif с помощью моего метода, или перевести мой код в метод $ .ajax (). 

$(document).ready(function() {

        $('input:checkbox').change(function(){
        var nom = $(this).attr("value");
        if ( $(this).is(':checked') ) {
          var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');
          $('<div id="target_' + $(this).attr('value')+ '"></div>').load(target_url).appendTo($('#target'));
        }
        else {
          $('div#target_' + $(this).attr('value')).remove();
        }
    });

Спасибо
Bye.

Ответы [ 5 ]

1 голос
/ 02 мая 2011

Вам просто нужно внести небольшие изменения в ваш код: 

$('<div id="target_' + $(this).val() + '"></div>')
    .html('<img src="ressources/loading.gif" />') 
    .load(target_url)
    .appendTo('#target');

В исходном коде (теперь отредактированном) вы создаете два независимых элемента div.

0 голосов
/ 02 мая 2011

Вот оптимизированный код, который должен сначала отображать gif загрузки, а затем загруженное содержимое: 

$('input:checkbox').change(function(){
    var nom = $(this).attr("value");
    var id = "target_" + nom;
    var oDiv = $(id);
    if ( $(this).is(':checked') ) {
        var target_url = "cgi-bin/switch.pl?param=" + nom;
        if (oDiv.length == 0) {
            $('#target').append('<div id="' + id + '"></div>');
            oDiv = $(id);
        }
        oDiv.html('<img src="ressources/loading.gif" />');
        oDiv.load(target_url);
    }
    else {
        oDiv.remove();
    }
});

Обратите внимание, что вы можете сохранить значение один раз в локальной переменной (как вы уже сделали) и использовать эту переменную позже.

0 голосов
/ 02 мая 2011

Если вы хотите показать загрузочный gif, когда ajax-запрос не работает, почему бы вам не попробовать .ajaxStart () - Handler?

например, вы получили img с loading-animation-gif с идентификатором «loading»: 

<html>
   <body>
      <img src="images/loading.gif" id="loading"/>
      <!-- some weird AJAX-Actions right here, etc. -->
      <script type="text/javascript">
         $("#loading").ajaxStart(function(){
             $(this).show();
         });
      </script>
   </body>
</html>

Всякий раз, когда вызывается Ajax-Call, будет отображаться ваш Animation-IMG. Может быть, вы поместили свой контент в некоторые собственные элементы div и спрятали его в свой ajaxStart-Handler, чтобы сделать его более простым, возможно ..

0 голосов
/ 02 мая 2011

Вы все еще можете сделать это с .load(). Вам просто нужно установить индикатор загрузки перед выполнением вызова, а затем спрятать индикатор загрузки, передав вашему методу .load() ответный вызов (в моем примере hideLoadingIndicator). 

if ( $(this).is(':checked') ) {
          var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');

          //put your loading indicator code here 

          $('<div id="target_' + $(this).attr('value')+ '"></div>')
                 .load(target_url, {}, hideLoadingIndicator)
                 .appendTo($('#target')); //note callback

           ..
           ..

function hideLoadingIndicator() {
  //code to hide loading indicator
}
0 голосов
/ 02 мая 2011

$. Get () - это то, что вам нужно, просто короткий псевдоним для $ .ajax () 

$(document).ready(function() {
    $('input:checkbox').change(function(){
    var nom = $(this).attr("value");
    if ( $(this).is(':checked') ) {
      var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');
      $.get(target_url, function(data){
        $('#target').html(data);
      });
    }
    else {
      $('div#target_' + $(this).attr('value')).remove();
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...