Problème dans le JavaScript du tuto sur les Systèmes d'Alerte

iMacode
Javascript

Bonsoir bonsoir amis codeurs :)

Voilà, j'ai suivi le tuto de notre génialissime Grafikart sur les Systèmes d'Alerte en PhP mais je suis confronté à un problème.

Lui, dans son tuto, utilise les sessions, moi non. Donc je n'ai pas le unset($_SESSION'flash']) mais je ne pense pas que ça pose un réel problème.

Moi je vérifie donc ma variable dans ma page (car je ne passe pas par une autre page comme lui, traitement.php)

if($_POST'bouton']){
    $alert_message = "Le bouton est sélectionné";
    $type = "success";
}

Et après je fais ceci 

<?php if(isset($alert_message)){ ?>
                    <div id="alert" class="alert alert-<?php echo $type; ?>">
                        <?php echo $alert_message; ?>
                        <a class="close">x</a>
                    </div> 
                <?php } ?>

Avec le bootstrap de Twitter et tout ça fonctionne, ça l'affiche sans problème avec le JS.

MAIS et c'est là mon problème, quand je fais le delay(3000).slideUp, ou la reconnaissance de la croix pour fermer l'alerte, bah ça marche pas...

Voici le code JS 

jQuery(function($){

   var alert = $('#alert'); //On récupère l'élément d'id alerd
   if(alert.length > 0){ //Si il existe au moins un élément d'id alert
       alert.hide().slideDown(500).delay(3000).slideUp(); //On affiche l'alert en la faisant descendre du haut avec slideDown
       alert.find('close').click(function(e){ //On récupère dans l'alert l'élément close
           e.preventDefault(); //On annule d'abord le comportement par défaut des liens
           alert.slideUp(); //On cache l'alert
       })
   }

});

Erreur de ma part ? Est-ce le unset() ? Si oui, comment y remédier en gardant ma méthode.

Merci d'avance :)

Ps : Je suis un novise en JavaScript.

6 réponses

djtec

Il manque le point devant close car close est une classe et la pour lui close est une balise donc rajoute un point devant

iMacode
Auteur

Merci, j'ai corrigé mais ça ne change rien, ni la croix ni le delay ne fonctionne pour fermer mon alert...

djtec

Et ben la je vois pas le problème dsl

iMacode
Auteur

Merci quand même..

iMacode
Auteur

Bon alors, j'ai refais tout comme Grafikart dans son tuto en passant par les $_SESSION. Ca à l'air de fonctionner à part que firebug me retourne une erreur dans le js...

La voici : alert.hide().slideDown(500).delay is not a function

Une idée ?

Tralala8

Ce n'est pas exactement le même que le tuto de Grafikart, mais celui que j'ai fait fonctionne parfaitement.

Voici ma fonction qui gère la construction du message d'alerte.

<?php
    function alert($alert,$text){
        $return=null;
        $return.='<div id="alert" class="alert-message alert-'.$alert.'">';
            $return.='<div class="alert-icon-'.$alert.'"></div>';
            $return.='<div class="close-'.$alert.'">';
                $return.='<a href="#" id="close">X</a>';
            $return.='</div>';
            $return.=$text;
        $return.='</div>';
        unset($_SESSION'alert']);
        unset($_SESSION'alert-msg']);
        return($return);
    }
?>

Ceci, c'est ma partie jQuery. Il faudra évidemment l'adapter à tes besoins. 

$(function(){
    $('#alert').fadeIn(600).delay(4000).animate({top:'-43px'},700);
    $('#close').click(function(){
        $('#alert').stop().animate({top:'-43px'},700);
        return(false);
    });
});

Après, je te laisse faire ton css comme tu l'entends ;)