Bonjour,

Je voudrais savoir comment ajouter une notification flash car je n'utilise pas le boostrap twitter, et mon template ne le propose pas.

Ce que je ne comprends pas , c'est comment déclencher la notification, et ou mettre le bout de script js

Voici la documentation

<html>
..
<body>
<div class="BoxContainer">
    <div class="contentBox">
        <span class="inBoxTitle green">Small Notification</span>
        <button class="botGreen" id="botSmallPic1">Picture 1</button>
    </div>
</div>
 <script type="text/javascript">
    // ======== Small Notification Demo
    $("#botSmallPic1").click(function(){
        $.smallBox( 
        {
            title: "Small Information box",
            content: "With picture, timeout 8 seconds, no icon and custom color.",
            timeout: 8000,
            color: "#ec008c",
            img: "static/img/pic1.png",
            icon: "static/img/cloud.png"
        }
        );
    });

 </script>

</body>
</html>

9 réponses


sylvain
Auteur
Réponse acceptée

J'ai résolu le probleme et ca marche tres bien.

sylvain
Auteur

Voila tout ce que j'ai

$.smallBox({title:"Some title",content:"Lorem ipsum dolor sit amet, consectetur adipisicing elit",img: "static/img/pic1.png",icon: "static/img/cloud.png",sound: false,color: '#5F08A6',timeout: 4000',colortime: 1000,colors: {color:"#405AA1"}]});

Alors il semblerait que tu ais besoin du plugin smallBox que tu ne charges pas. Mais du coup j'ai essayé de regarder et je n'ai pas trouvé grand' chose sur internet, a part peut-être ce truc dont tous les liens sont morts :/ ...

Du coup je te suggère de voir pour un autre plugin.
Pour des notifications (petit machin dans un coin de l’écran qui disparaît après X secondes), Growl est pas mal, mais il y en a d' autres.
Si c'est plus pour des trucs du genre modal (grosse fenetre qui s'affiche en superposition de l'écran), il ya SimpleModal, d' autres, et n'oublions pas celui de graph'

sylvain
Auteur

Tout semble etre chargé maintenant
il s'agit de ce js acheté ici http://codecanyon.net/item/metro-notifications/full\_screen\_preview/3903495
mais rien ne fonctionne encore, j'ai toujours mon message sans l'effet

mon notif.ctp

<div id="smallBox" class="smallBox">
    <?php echo $message; ?>
</div>

mon layout contient

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">
            <!--nocache -->
            <script type="text/javascript">
                // ======== Small Notification Demo
                $(document).ready(function() {
                    $.smallBox({
                        title: "Some title",
                        content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
                        sound: false,
                        color: '#5f08a6'
                    });
                });
            </script>

et ma methode contient

if ($this->Auth->login()) {
                $this->Session->setFlash("<b>Vous êtes maintenant connecté</b>", 'notif', array('type' => 'success','escape'=>false));
                return $this->redirect('/');
            } else {
                $this->Session->setFlash("Identifiants incorrects", 'notif', array('type' => 'error'));
            }

Alors là désolé mais le plugin que tu veux utiliser ne supporte pas le rechargement de la page. Il s'agit d'un plugin javascript. Il ne peut pas afficher les notifs après une action via la session, du moins pas comme ça en brut.

sylvain
Auteur

Je vois pas pourquoi on ne pourrait pas, si on peut le faire avec growl http://ksylvest.github.io/jquery-growl/
vu que c'est pratiquement la meme chose.

sylvain
Auteur

Je vais essayer ça ce soir

<?php
echo $this->Html->css(array('freeow')); ?>
echo $this->javascript->link('jquery.freeow.min.js', true);
?>

<div id="freeow"></div>

<script type="text/javascript">
$("#freeow").freeow("<?php echo __('Information', true); ?>", "<?php echo $message; ?>", {
    classes: "smokey", "pushpin"],
    autoHide: true,
});
</script>

Je ne connais pas cake (donc pas capable de te donner la syntaxe), mais essentiellement ce qui serait une solution viable pourrait etre :

Coté serveur

--> Quand tu génères ta vue, vérifie si tu as un message flash en session
--> SI c'est le cas, inclue un script tag dans ta vue qui soit du genre

$(document).ready(function{
    // Script de déclanchement de ta notif, avec les options que tu veux qui déendent de ton flash (contenu, type, etc ...)
});
Coté client

--> Si un script tag a été ajouté, la notif se déclanchera lorsque le DOM est pret

Ca te parait faisable ?

sylvain
Auteur

c'est ce que j'ai fait, mais il s'affiche tout le temps
mon notif

<div id="smallBox" class="smallBox">
    <?php echo $message; ?>
</div>

et mon js

$(document).ready(function() {
                    $.smallBox({
                        title: "Some title",
                        content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
                        sound: false,
                        color: '#5f08a6'
                    });

                });

je pense qu'il faudrait mettre $("#smallBox") a la place de document, mais ca ne m'affiche plus rien