2010-06-22 7 views
0

la fonction succès de la demande ajax jquery je crée div avec un message ... Mais il ne semble pas montrer ....Jquery fonction ajax succès affiche un message

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; 
    } 
+1

qu'en est-il de var alert = $ ('

Successfully Updated
'); et attachez-le au dom via append - $ ("body"). append (alert); – xijo

+0

@joe votre réponse a fonctionné ... –

+0

Est-ce que le rappel contient un appel "sur DOM prêt" pour une raison quelconque? –

Répondre

2

Vous devez ajouter le nouveau created element à l'arborescence DOM .

jQuery (mieux dit Sizzle) ne peut pas interroger autrement. Prolongez votre code comme ceci:

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

Une autre chose, vous devez utiliser un class plutôt une id. Que faire s'il y a plus d'une alerte? Vous devez créer plusieurs divs avec des ID identiques, ce qui est un gros nono.

0

Vous devez insérer l'élément nouvellement créé dans le DOM. Alors seulement il apparaîtra. Vous pouvez ajouter l'élément au corps ou à un élément de conteneur.

Et aussi une partie de votre code est source de confusion, la fonction de délai d'attente et le déclenchement de l'événement de clic pour la div.

Egalement .length retournera un nombre et non un booléen. Et il n'y a pas non plus besoin de gestionnaire d'événements prêt pour le document dans la fonction de réussite.

+0

sur la fonction de succès, je crée un div et montrant comme un message comme twitter .. –

0

vous pouvez soit avoir le div placé dans le DOM et utiliser css display: hidded et puis sur une réponse de succès, vous pouvez changer display: block de cette façon le div sera inclus dans le DOM et vous pouvez simplement basculer un peu.

Questions connexes