jQuery fadeTo only firing once

I had a simple div that appears when a record saved. How simple?

    
        Record Saved    

The jQuery to make it popup then fade away after two seconds was not much more complex:

   function showMessage() {
       $("#rs").fadeTo(2000, 500).slideUp(500, function () { $("#rs").alert('close'); });
   }

This worked great… once. If I was updating multiple records, only the first time I saved a record would the popup appear. After that, nada.

My fix was to remove the div from the HTML code and modify the showMessage function. Instead of fading an existing div, I would create one on the fly:

   function showMessage() {
       $("body").append('
Record Saved
')     $("#rs").fadeTo(2000, 500).slideUp(500, function () { $("#rs").alert('close'); }); }

This worked. The problem with the original method is that the fadeTo method, on completion, set the div tag’s “display” property to “none”, meaning the div was completely removed from the page. So when a second record was updated, there was no div left to reference. The new method creates one every time the function is executes, and fades it away into oblivion.

Advertisements

,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: