Question

I’m trying to preload an image while waiting for a change of text in my tag.

I have an ajax where if user clicks a text, they can be able to change the text, then when user submits it, it will be updated in mysql from the ajax.

My problem is that, when the user is finished changing the text, it takes awhile for the text to finally change. NOt sure if its cause I have a lot of “if(isset)” in my file where its going to be updated, or my algorithm… whatever it is, I’m trying to have a preloader image fix this.

            $.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);

            }
            });

The image is not showing up, and it is in the right path and everything.

To Summarize my problem:

User clicks text -> user changes text -> submits text -> text stays the same for a bit -> then new text pops up.

To summarize what I’m trying to do:

User clicks text -> user changes text -> submits text -> original text goes up and then the preloader image shows up -> preloader image goes away -> new text

Thanks for your time!

Answer 1

success: function(data)
{
    $('textarea#item_'+id).load('<img src="img/ajax-loader.gif"/>');
    $('span#selector_'+id).html(selector);

}

problems I can see…

1. you shouldn’t have load the image on a textarea
2. you’r showing the image and the new text at the same time.

My suggestions..

when the user submit the text, show/append the image loader.

maybe do it on the <form>‘s submit (or on the click of the button). then do your ajax. Once the ajax is done, hide the image then show the text.

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

});

this is really a simple example, you can still do much more…