пытаясь предварительно загрузить изображение в AJAX успеха - PullRequest
Новая
       21

пытаясь предварительно загрузить изображение в AJAX успеха

0 голосов
/ 16 сентября 2011

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

У меня есть ajax, где, если пользователь щелкает текст, он может изменить текст, а затем, когдаПользователь отправляет его, он будет обновлен в MySQL от AJAX.

Моя проблема в том, что, когда пользователь заканчивает изменять текст, требуется некоторое время, чтобы текст окончательно изменился.Не уверен, что по его причине у меня много «if (isset)» в моем файле, где он будет обновляться, или в моем алгоритме ... что бы это ни было, я пытаюсь, чтобы образ предварительной загрузки исправил это. 

            $.ajax({
            type: "POST",
            url: "ajax_table_edit.php",
            data: Data,
            cache: false,
            success: function(data)
            {
                $('textarea#item_'+id).load('<img src="img/ajax-loader.gif"/>');
                $('span#selector_'+id).html(selector);

            }
            });

Изображение не отображается, и оно находится на правильном пути и все.

Подводя итог моей проблемы:

Пользователь щелкает текст -> пользователь изменяет текст -> отправляет текст -> текст остается прежним -> затем появляется новый текст.

Подводя итог, что я пытаюсь сделать:

Пользователь щелкает текст -> пользователь изменяет текст -> отправляет текст -> исходный текст увеличивается, а затем появляется изображение предварительного загрузчика -> изображение предварительного загрузчика исчезает -> новый текст

Спасибо за потраченное время!

1 Ответ

1 голос
/ 16 сентября 2011 
success: function(data)
{
    $('textarea#item_'+id).load('<img src="img/ajax-loader.gif"/>');
    $('span#selector_'+id).html(selector);

}

проблемы, которые я вижу ...

  1. у вас не должно быть load изображения в текстовой области
  2. вы показываете изображение и новыйтекст в то же время.

Мои предложения ..

когда пользователь отправит текст, покажите / добавьте загрузчик изображений.

возможно, сделайте это на<form> отправить (или на click кнопки).тогда сделай свой аякс.Как только Ajax закончен, скройте изображение, затем покажите текст. 

$('form').submit(function(){

   // use .after() or whatsoever, just show the image on this line.
   // while the form is about to execute the ajax codes below.
   var image = $('.preloader');
   if (image.length > 0) { // if preloader image exist... just show it..
       image.show();
   } else { // if it doesn't exist, create it.
       image = $('<img class="preloader" src="img/ajax-loader.gif"/>');
       $('textarea#item_'+id).after(image);
   }

   $.ajax({
       type: "POST",
       url: "ajax_table_edit.php",
       data: Data,
       cache: false,
       success: function(data)
       {
          image.hide(); // hide the image.
          $('textarea').text(data); // show the data...

          // by the way, I don't understand this next line
          //$('span#selector_'+id).html(selector);

       }
   });
   return false; //prevent form from jumping to another page

});

Это действительно простой пример, вы все равно можете сделать гораздо больше ...

...