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 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.