Jquery ajax success function displaying message...

Question

On the success function of jquery ajax request i am creating div with a message... But it doesn't seem to show up....

success: function(data) {
    $(function() {
        $('<div id="alert">Successfully Updated</div>');

        var $alert = $('#alert');

        if ($alert.length) {
            var alerttimer = window.setTimeout(function() {
                $alert.trigger('click');
            }, 3000);

            $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() {
                window.clearTimeout(alerttimer);
                $alert.animate({ height: '0' }, 200);
            });
        }
    });

css:

#alert
  {
   overflow: hidden;
   width: 100%;
   text-align: center;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #FF0000;
   height: 0;
   color: #FFFFFF;
   font: 20px/40px arial, sans-serif;
   opacity: .9;
  }

Answer 1

You have to insert the newly created element to the DOM. Then only it will appear. You can either append the element to body or to a container element.

And also some part of your code is confusing, the timeout function and triggering the click event for the div.

Also .length will return a number and not a boolean. And also there is no need for document ready event handler inside the success function.

Answer 2

you can either have the div placed within the DOM and use css display: hidded and then on a success response you can change display: block this way the div will be included in the DOM and you can just toggle kinda.

Answer 3

You need to append the newly created element to the DOM tree.

jQuery (better said Sizzle) can't query it otherwise. Extend your code like this:

 $('<div id="alert">Successfully Updated</div>').appendTo(document.body);

Another thing, you should use a class instead an id. What if there are more than one alerts? You would create multiple divs with identical ids which is a big nono.