Intégrer fonction javascript dans php [Résolu/Fermé]

Signaler
Messages postés
149
Date d'inscription
lundi 15 juillet 2013
Statut
Membre
Dernière intervention
3 mai 2020
-
Messages postés
149
Date d'inscription
lundi 15 juillet 2013
Statut
Membre
Dernière intervention
3 mai 2020
-
Bonjour,
J'ai une fonction en js qui me permet d'afficher un message du style notification.

(function($){
    
    $.fn.notif = function(options){
        
        var settings = {
            html : '<div class="notification animated fadeInLeft {{cls}}">\
          <div class="left">\
          {{#icon}}\
            <div class="icon">\
              {{{icon}}}\
            </div>\
            {{/icon}}\
            {{#img}}\
            <div class="img" style="background-image:url({{img}});"></div>\
            {{/img}}\
          </div>\
          <div class="right">\
            <h2>{{title}}</h2>\
            <p>{{content}}</p>\
           </div>\
        </div>',
        icon : 'ℹ',
        timeout:false
        }
        if(options.cls == 'error'){
            settings.icon = '❌'
        }
        if(options.cls == 'success'){
            settings.icon = '✓'
        }
        var options = $.extend(settings, options);
    
        return this.each(function(){
            var $this = $(this);
            var $notifs = $('> .notifications', this);
            var $notif = $(Mustache.render(options.html, options));
            if ($notifs.length == 0){
                $notifs = $('<div class="notifications animated flipInX"/>');
                $this.append($notifs);
            }
            $notifs.append($notif);
            if(options.timeout){
                setTimeout(function(){
                    $notif.trigger('click');
                },options.timeout)
            }
            $notif.click(function(event){
                event.preventDefault();
                $notif.addClass('fadeOutLeft').delay(500).slideUp(300, function(){
                    if($notif.siblings().length == 0){
                        $notifs.remove();
                    }
                    $notif.remove();
                });
            })
        })
    }
    $('.add').click(function(event){
        event.preventDefault();
        $('body').notif({title:'Mon titre', content:'Mon contenu', cls:'success', timeout:2000});
    })
})(jQuery);


Sur mon script la notification s'affiche si on clic sur un élément qui a pour class "add".
Mais je voudrais pour voir l'afficher dans mon code php.

Par exemple:
if(){
//On affiche la notification
}


j'ai essayer quelque truc mais sans succès.. Je suis pas très fort...

Merci de votre aide :D

2 réponses

Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 254
Bonjour,

Aïe, aille hailleuuu....

Vous mélangez du HTML dans du Javascript qui contient des marqueurs de template, non?

Exemple:
<div class="img" style="background-image:url({{img}});"></div>


Or, si vous utilisez un template, sauf erreur de ma part, ledit template est traité en amont par PHP. Je ne vois pas JS remplir votre template ou alors vous avez d'autres scripts JS pour "remplir les trous"....

Pour remplir les trous depuis PHP:

<div class="img" style="background-image:url(<?php echo $image; ?>);"></div>


A+

public function meilleurProgrammeurDuMonde() { return "MOI"; } // humour
Messages postés
149
Date d'inscription
lundi 15 juillet 2013
Statut
Membre
Dernière intervention
3 mai 2020
3
Ma "fonction" est "jquery.notif.js".
Pour remplir le template Mustache.js est utiliser.

Dans <head> de la page php:
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>


Et après </body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="mustache.js"></script>
    <script type="text/javascript" src="jquery.notif.js"></script>


Si je met
<a href="#" class="add">Notif !</a>
dans ma page php.
Au clic sur "Notif !" la notification s'affiche gràce à
$('.add').click(function(event){
        event.preventDefault();
        $('body').notif({title:'Mon titre', content:'Mon contenu', cls:'success', timeout:2000});
    })

dans mon js

Si je met directement
$('body').notif({title:'Mon titre', content:'Mon contenu', cls:'success', timeout:2000});
    })

dans mon js, la notification s'ouvre directement à l'ouverture de la page php.
Messages postés
149
Date d'inscription
lundi 15 juillet 2013
Statut
Membre
Dernière intervention
3 mai 2020
3
up