Задержка и запрос jQuery - PullRequest
Новая
       11

Задержка и запрос jQuery

0 голосов
/ 19 апреля 2011

Привет, ребята,

То, что я пытаюсь сделать, это отобразить анимированный GIF, пока кто-то печатает текст в текстовое поле с помощью keyup, и после завершения ввода GIF исчезает и отображает сообщение «Сохранено» в течение нескольких секунд который затем исчезнет.

То, что я сделал до сих пор: 

if ($('.gallery_items li input').length > 0) {
    $('.gallery_items li input').keyup(function() {         
        var li = $(this).parent();
        li.children('.gallery_saving').removeClass('dn');
        var identity = li.attr('id').split('_');
        var v = $(this).val();
        var url = '/caption/id/' + identity[1];
        $.post(url, { caption : v });   
        $.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');          
        return false;
    });
}

Где у класса 'gallery_saving' есть анимированный GIF, назначенный в качестве фонового изображения, а у класса 'dn' просто css 'display: none'. Первоначально в «gallery_saving» также есть класс «dn» - так что он не виден, когда кто-то начинает набирать, класс «dn» удаляется - показывая загрузчик.

Вы, очевидно, видите проблему уже с: 

$.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');

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

Ответы [ 2 ]

1 голос
/ 19 апреля 2011

Попытка сделать это не очень хорошая идея, потому что в конечном итоге вы совершите много вызовов ajax, если пользователь на самом деле не закончил печатать. Если пользователь медленно печатает, вы будете сохранять данные много раз без всякой причины.

Вы также можете использовать show() и hide() вместо dn класса. Или используйте toggleClass ()

1 голос
/ 19 апреля 2011

Вы должны удалять загрузчик не по времени задержки, а по успешному сохранению введенных данных.

Что-то вроде 

url = "/echo/html";
v = "test";
$.ajax({
  url: url,
  type: 'POST',
  data: ({ caption: v}),
  success: function(){
    $('.gallery_saving').html('Saved...').delay(1000).fadeToggle("slow");
  },
  error:  function() {
    $('.gallery_saving').html('Error...').delay(1000).fadeToggle("slow");
  }
});

Пример: http://fiddle.jshell.net/gabel/udvbx/

Подробнее http://api.jquery.com/jQuery.ajax/ Подробнее ...

...