Notification Dynamique

Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014 - 28 févr. 2014 à 13:13
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 - 2 mars 2014 à 19:55
Bonjour,
J'ai un petit JavaScript qui me permet lors d'un clic d'ouvrir une petite fenêtre de notification.
Toute simple.
Serait il possible de la rendre dynamique ?
De cliquer sur le lien ouvrir un script PHP, et renvoyer le résultat dans la fenêtre de notification ?
J'espère que je me suis bien fait comprendre...
Je peux poster ce que j'ai déjà (directement ici ?)

Merci de votre aide.

Pesaluta

14 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
Modifié par jordane45 le 28/02/2014 à 13:25
Bonjour,


Je peux poster ce que j'ai déjà (directement ici ?)
Oui. c'est même fortement conseillé.

Serait il possible de la rendre dynamique ?
Sans plus d'informations (c.a.d sans le code) il sera difficile de te répondre... mais à mon avis il ne devrait pas y avoir de soucis.


De cliquer sur le lien ouvrir un script PHP, et renvoyer le résultat dans la fenêtre de notification ?
Si tu souhaites utiliser un script PHP pour renseigner des données via Javascript il va te falloir utiliser de l'AJAX (xmlhttprequest)

http://www.commentcamarche.net/faq/18745-utilisation-de-l-objet-xmlhttprequest


.

Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
28 févr. 2014 à 13:36
jordane45 merci de ta réponse :)

Voici le petit code : (J'espère que cela ne va pas faire trop long !? J'ai un peu nettoyé!)

<html>	
<head>
<title></title>
	
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts//jquery.notify.js"></script>
	
<script type="text/javascript">
$( document ).ready( function ()
{
$( '.modifi' ).click( function () 
{
var notice = '<div class="notice">'
+ '<div class="notice-body">' 
+ '<img src="../scripts/notify/purr/info.png" alt="" />'
+ '<h3>Modifié !!</h3>'
+ '<p>Lorem ipsum dolor sit amet.</p>'
+ '</div>'
+ '<div class="notice-bottom">'
+ '</div>'
+ '</div>';
							  
$( notice ).purr(
{
usingTransparentPNG: true
}
);

return false;
}
);
}
);
</script>
	
<style type="text/css">
// ICI tout mes CSS !
</style>
</head>

<body>
		
<div id="test">
<ul>
<li><a class="modifi" href="#show">Regular</a></li>
</ul></div>

</body>
</html>



Merci
Je regarde ton lien Merci

Pesaluta.
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
28 févr. 2014 à 14:44
jordane45,
Je viens de regarder le lien.

Cela fonctionne super bien...

Mais comment faire fonctionner les deux en même temps ?

je sèche :(

Pesaluta
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
Modifié par jordane45 le 28/02/2014 à 16:47
Il faut que dans ton click( function () tu fasses appel à ton AJAX.

vu que tu utilises du Jquery, tu auras quelque chose du genre :

$( '.modifi' ).click( function () {
   $.ajax({ 
  type: "POST",
  url:"url_de_ta_page_php",
  data: "variable1="+mavariable1+"&variableN="+mavariableN ,
        async: false,
  dataType: "text",
        success: function(reponse){
              // Ici ton code à faire lorsque tu obtiens un résultat
              // Exemple :
              alert(reponse);

             var notice = '<div class="notice">'
             + '<div class="notice-body">' 
               + '<img src="'+reponse['img']+'" alt="" />'
               + '<h3>'+reponse['titre']+'</h3>'
               + '<p>'+reponse['texte']+'</p>'
              + '</div>'
              + '<div class="notice-bottom">'
             + '</div>'
            + '</div>';
 
           $( notice ).purr(
                {
                   usingTransparentPNG: true
                }

 },
       error:function(){
             alert('error');
         }
  });




Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
Modifié par f0xi le 28/02/2014 à 19:19
salut,

n'inclus pas l'html dans des phrases javascript... ça rend difficile le maintient du code.

il faut ajouter des test sur le retour ajax pour ne pas afficher une boite avec des null ou undefined dedans ... c'est moche.

j'ai développé un truc similaire sur notre intra au boulot, je l'ai adapté pour toi, ça pourrait t'intéresser :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- devrait être : 
  <script src="plugins/notice/notice.js"></script> 
--> 
<script> 
  /* id automatique */
  var __id_notice = 0;

  /* crée une notice */
  function createNotice(img, title, text)
  {
    // incrementation de l'auto id
    __id_notice++;
    
    // récupération du template HTML de la notice
    var tpl = $('#notice_template').html();
    
    // insertion de l'id
    tpl = tpl.replace(/@/g, ''+__id_notice);
    
    // insertion du src de l'image
    tpl = tpl.replace('%%notice_img_src%%', img);
    // insertion du titre
    tpl = tpl.replace('%%notice_title%%', title);
    // insertion du texte
    tpl = tpl.replace('%%notice_text%%', text);
    
    // affichage dans l'objet notice_screen 
    // (changer selon... pourrait être body par exemple)
    $('#body').append( tpl );
    
    // retourne l'id de la boite
    return __id_notice;
  }

  /* efface une notice */
  function deleteNotice(id){
    /* parce qu'un fade out c'est super sympa */
    $('#notice_'+id).fadeOut(200, function(){
      /* et on kick la node html */
      $('#notice_'+id).remove();
    });
  }
  
  /* charge une notice depuis un fichier 
     peut etre txt, csv, json, ou généré par php etc.
  */
  function loadNotice(){
   $.ajax({
      type: "GET",
      url: 'plugins/notice/notice_abc.txt',
      success: function(result){ 
        // on retourne une chaine CSV par exemple
        // image|titre|texte
        var t = result.split('|'); 
        if(t.length == 3)
        {
          /* on crée la notice */
          createNotice(t[0], t[1], t[2]);
        }
      },
      error: function(){
        /* en cas d'erreur */
      }
    });

  }
</script>

<!-- devrait être : 
  <link href="plugins/notice/notice.css" rel="stylesheet"/> 
-->
<style>
/* Styles pour notice */
.notice{ 
  /* fenetre centrée fixe de 320px sur 240 a 600px */
  width:320px;
  height:240px;
  padding:8px;
  
  background-color:#fff;
  box-shadow:0 0 8px #444;

  /* fixed, absolute, relative */
  position:fixed;
  
  /* ne pas modifier le reste */
  z-index:10000; /* doit être le plus grand z-index des éléments */
  display:block;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.notice header{
}
.notice content{
}
.notice content > img{
  max-width:320px;
  height:32px;
}
.notice content > h3{
}
.notice content > p{
  overflow:auto;
  max-height:480px;
}
.notice footer{
}
</style>

<script>
/* test */
$(document).ready(function(){
  for(i=0;i<10;i++){
    createNotice('https://developers.google.com/_static/af26327896/images/developers-logo.svg', 'Test '+i, 'bla bla bla bla bla');
  }
});
</script>
</head>

<body id="body">

<!-- devrait être : 
 /* php
   include_once("plugins/notice/notice.tpl"); 
 */
-->
<content id="notice_template" style="display:none;width:0;height:0;left:-9999px;position:absolute;">
  <div id="notice_@" class="notice">
    <header>
    </header>
    <content> 
      <img id="notice_img_@" src="%%notice_img_src%%" alt="" />
      <h3 id="notice_title_@">%%notice_title%%</h3>
      <p id="notice_text_@">%%notice_text%%</p>
    </content>
    <footer>
      <input type="button" value="fermer" onclick="deleteNotice(@);"/>
    </footer>
  </div>
</content>

</body>
</html>



et le test d'affichage : http://jsfiddle.net/j8PZw/1/


________________________________________________________
[ besoin de câbles audio, vidèo, informatique pas cher ?]
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
28 févr. 2014 à 22:09
jordane45, f0xi,

Merci de vos réponses, je vais regarder cela.

En vous en remerciant

Pesaluta.
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
1 mars 2014 à 00:06
Bonsoir / Bonjour :)

Voilà ce que j'ai fait grâce à votre aide : (Je l'ai épuré!)

<script type="text/javascript">
  $( document ).ready( function ()
  {	
     $( '.modifi' ).click( function () { // A
	var var1 = encodeURIComponent(document.getElementById("var1").value);
	var var2 = encodeURIComponent(document.getElementById("var2").value);
				   
				   
 $.ajax({  // B			   
  type: "POST",
  url:"notification-7-rep.php",
  data: "var1="+var1+"& var2="+var2 ,
  async: false,
  dataType: "text",

success: function(reponse){ // C
// Ici ton code à faire lorsque tu obtiens un résultat
 // Exemple :
// alert(reponse);
				
var notice = reponse;
				 
   $( notice ).purr(
     {
	usingTransparentPNG: true
     }	
     );
						
return false;
	}// FIN C						
					   
				  });	// FIN B			
				
				});// FIN A
				
			}
		);
   	</script>
	

</head>

<body>
		
	<div id="example">
	
		<p> </p>
		
		<ul>
	    <li><a class="modifi" href="">Notification</a></li>
        <input name="var2" id="var2" type="hidden" value="40" />
        <input name="var1" id="var1" type="hidden" value="ABCDEF" />
		</ul>
	</div><!--end #example-->
    <div id="resultat"></div>
</body>
</html>


Dans le fichier appelé : "notification-7-rep.php" .. .je fais juste la récupération des variables lignes 51 et 52 et j'ajoute un bout de texte histoire de vérifier que mes variables passent bien par le PHP.

Lorsque je dé-commente la ligne 19 ( // alert(reponse);)
Une fenêtre d'alerte apparait bien avec les bonnes variables en retour.

Mais sinon le fenêtre de "notification" toute jolie n'apparait pas ? :(

Auriez vous une idée ?
Ou ai-je ... merdé ? :)

Merci de votre aide !

Pesaluta
P.S. : Si j'instal ce script (lorsqu'il fonctionnera) dans une page avec d'autres Javascripts. Y aura t'il des soucis de comptabilité ou autres ?
0
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
Modifié par f0xi le 1/03/2014 à 04:19
assure de bien avoir dans ton head tout les scripts

<script src="jquery.js"></script>
<script src="jquery.purr.js"></script>
<script>


la correction du javascript, compare avec le tiens pour voir les différences :
$(document).ready(function(){ 
    /* 
      note l'utilisation de -> .on('event' 
      note la correction dans notifieGet sur la récupération des valeurs en jquery
      note la forme de "url" dans ajax
      note l'utilisation du datatype "html" plutot que "text"
      note l'utilisation de "console.log" pour le débogage 
        (Firefox / Chrome : click droit sur la page -> examiner -> console)
      note l'utilisation de .html() pour envoyer la reponse dans le div #notice
      et enfin l'utilisation de .purr() sur #notice et non sur reponse
    */  
     
    // GET
    $('#notifieGet').on('click', function(){// A
      var var1 = encodeURIComponent( $("#var1").val() );
      var var2 = encodeURIComponent( $("#var2").val() );
      $.ajax({// B      
        type:"GET",
        url:"notification-7-rep.php?var1="+var1+"&var2="+var2,
        dataType:"html",
        success: function(reponse){// C
          console.log(reponse);
          $('#notice').html(reponse);
          $('#notice').purr({
            usingTransparentPNG: true
          });
        },// FIN C      
        error: function(){
          console.log('Ajax -> erreur');
        }
      });// FIN B   
  });// FIN A
    
    
    /* 
      note les différences de déclaration et utilisation avec un Form post
      note l'utilisation de .serialize() pour "récupérer" toutes 
        les valeurs du formulaire en une fois
      note que Success et Error sont exactement les mêmes que précédement  
    */
    // POST     
    $('#notifiePost').on('click', function(){// A
      $.ajax({// B      
        type:$('#notificationPost').attr('method'),
        url:$('#notificationPost').attr('action'),
        data:$('#notificationPost').serialize(),
        dataType:"html",
        success: function(reponse){// C
          console.log(reponse);
          $('#notice').html(reponse);
          $('#notice').purr({
            usingTransparentPNG: true
          });
        },// FIN C      
        error: function(){
          console.log('Ajax -> erreur');
        }
      });// FIN B   
  });// FIN A
  
});

tes erreurs :
1- Ton data dans l'ajax est incorrect, étrange qu'il fonctionne quand même ... bref.
2- Tu applique .purr() sur la reponse et non sur un id d'element hmtl ! d'ou le non affichage.
3- Tu demande un type POST avec une URL GET ... je suis fatigué ou bien ?
4- Tu demande un retour en TEXT alors que tu es censé retourner de l'HTML.


la correction de l'html :
</script>
</head>

<body>
<!-- version GET, note la non utilisation de "name" sur var1 et 2 -->
<input type="hidden" id="var1" value="ABCDEF" />
<input type="hidden" id="var2" value="40" />
<input type="button" id="motifieGet" value="Notification Get"/>
<!-- // -->

<!-- version FORM POST, note la non utilisation de "id" sur var1 et 2 -->
<form id="notificationPost" method="POST" action="notification-7-rep.php">
  <input type="hidden" name="var1" value="GHIJKLMN" />
  <input type="hidden" name="var2" value="30" />
  <input type="button" id="motifiePost" value="Notification Post"/>
</form>
<!-- // -->

<div id="notice"></div>
</body>
</html>


________________________________________________________
[ besoin de câbles audio, vidèo, informatique pas cher ?]
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
1 mars 2014 à 12:38
Bonjour f0xi,
Merci de ta réponse.

Oui il y a bien les scripts dans mon "head". (j'ai juste aéré pour poster ici)

Petite chose amusante : Avec mon script posté plus haut, lorsque je clique sur le lien plus la touche "CTRL" les notifications apparaissent correctement avec les variables... Mais aussi les nouveaux onglets du script comme tu t'en doute :(

Concernant les 4 points, tu as surement raison... Je suis novice en JavaScript, je tâtonne, j'essaye de comprendre... Et la j'avoue être dans un épais brouillard :(

J'ai essayé ce que tu écrivais, il y a une erreur

la console Chrome dit :

Uncaught TypeError: Object #<Object> has no method 'on'

Correspondant à la ligne :

$('#notifieGet').on('click', function(){// A

Et firebug :

TypeError: $(...).on is not a function

toujours même ligne.

Et là ! Je ne sais quoi dire ?
Et en plus ils ne sont pas d'accord ! :)

Merci

Pesaluta.
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
1 mars 2014 à 12:55
Je viens de mettre une version de Jquery plus ressentes : jQuery JavaScript Library v2.0.2.

Il n'y a plus de message d'erreur à l'ouverture de la page.

Mais en cliquant sur les boutons, il ne se passe rien.
Et les deux consoles restent muettes ?

Pesaluta.
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
1 mars 2014 à 13:09
Je viens de m'apercevoir que les noms des boutons et des fonctions n'étaient pas les mêmes :

motifieGet pour notifieGet etc...

Voilà pourquoi il ne se pasait rien...

Alors maintenant j'ai un nouveau message d'erreur dans la console Chrome, (Firebug reste muet !?) :

Uncaught TypeError: Cannot read property 'msie' of undefined

Qui correspond à mon retour depuis mon fichier : "notification-7-rep.php"

Ce que je met en "echo"... que ce soit un simple : "echo "Bonjour"; ou le code HTML de ma notice... le même message?

Mais peut être (surement) je me trompe quant à la méthode de retour ?

Pesaluta.
0
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
1 mars 2014 à 14:23
mettre le code complet ? pour jquery oui, tu devais utilise une lib trop ancienne (< 1.7 ?) idéalement tu peu prendre la 1.11 qui fonctionne bien, je crois que la 2.0 à beaucoup de modification qui peuvent empéché purr de fonctionner.
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
Modifié par Pesaluta le 1/03/2014 à 15:51
f0xi

Voici le code complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Notification 7</title>
 
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/notify/purr/jquery.purr.js"></script>


    <script type="text/javascript">
$(document).ready(function(){ 
    /* 
      note l'utilisation de -> .on('event' 
      note la correction dans notifieGet sur la récupération des valeurs en jquery
      note la forme de "url" dans ajax
      note l'utilisation du datatype "html" plutot que "text"
      note l'utilisation de "console.log" pour le débogage 
        (Firefox / Chrome : click droit sur la page -> examiner -> console)
      note l'utilisation de .html() pour envoyer la reponse dans le div #notice
      et enfin l'utilisation de .purr() sur #notice et non sur reponse
    */  
     
    // GET
    $('#motifieGet').on('click', function(){// A
      var var1 = encodeURIComponent( $("#var1").val() );
      var var2 = encodeURIComponent( $("#var2").val() );
      $.ajax({// B      
        type:"GET",
        url:"notification-7-rep.php?var1="+var1+"&var2="+var2,
        dataType:"html",
        success: function(reponse){// C
          console.log(reponse);
          $('#notice').html(reponse);
          $('#notice').purr({
            usingTransparentPNG: true
          });
        },// FIN C      
        error: function(){
          console.log('Ajax -> erreur');
        }
      });// FIN B   
  });// FIN A
    
    
    /* 
      note les différences de déclaration et utilisation avec un Form post
      note l'utilisation de .serialize() pour "récupérer" toutes 
        les valeurs du formulaire en une fois
      note que Success et Error sont exactement les mêmes que précédement  
    */
    // POST     
    $('#motifieGet').on('click', function(){// A
      $.ajax({// B      
        type:$('#notificationPost').attr('method'),
        url:$('#notificationPost').attr('action'),
        data:$('#notificationPost').serialize(),
        dataType:"html",
        success: function(reponse){// C
          console.log(reponse);
          $('#notice').html(reponse);
          $('#notice').purr({
            usingTransparentPNG: true
          });
        },// FIN C      
        error: function(){
          console.log('Ajax -> erreur');
        }
      });// FIN B   
  });// FIN A
  
});    </script>
 
 <style type="text/css">
  body {
   margin: 0;
   padding: 0;
   font-family: Georgia;
   font-size: 0.9em;
   line-height: 1.4em;
  }
  
  #example {
   position: relative;
   width: 500px;
   padding: 20px;
  }
  
  p {
   margin: 7px 0 0 0;
  }
  
  #purr-container {
   position: fixed;
   top: 0;
   right: 0;
  }
  
  .notice {
   position: relative;
   width: 324px;
   -khtml-border-radius: 7px;
   border-radius:7px;
   -khtml-border-radius: 7px;
   behavior: url(scripts/PIE.htc); /* POUR IE */
   -moz-box-shadow: 2px 2px 20px #888;
   -webkit-box-shadow: 2px 2px 20px #888;
   box-shadow:2px 2px 26px #888;
   background-color:#999;
   margin-bottom:10px;
  }
   .notice .close {position: absolute; top: 12px; right: 12px; display: block; width: 18px; height: 17px; text-indent: -9999px; background: url(../scripts/notify/purr/purrClose.png) no-repeat 0 10px;}
  
  .notice-body {
   min-height: 50px;
   padding: 22px 22px 0 22px;
   /*background: url(../scripts/notify/purr/purrTop.png) no-repeat left top;*/
   color: #f9f9f9;
  }
   .notice-body img {width: 50px; margin: 0 10px 0 0; float: left;}
   .notice-body h3 {margin: 0; font-size: 1.1em;}
   .notice-body p  {margin: 5px 0 0 60px; font-size: 0.8em; line-height: 1.4em;}
  
  .notice-bottom {
   height: 22px;
   /*background: url(../scripts/notify/purr/purrBottom.png) no-repeat left top;*/
  }
 </style>
</head>

<body>
  
 <div id="example">
 
<!-- version GET, note la non utilisation de "name" sur var1 et 2 -->
<input type="hidden" id="var1" value="ABCDEF" />
<input type="hidden" id="var2" value="40" />
<input type="button" id="motifieGet" value="Notification Get"/>
<!-- // -->

<!-- version FORM POST, note la non utilisation de "id" sur var1 et 2 -->
<form id="notificationPost" method="POST" action="notification-7-rep.php">
  <input type="hidden" name="var1" value="GHIJKLMN" />
  <input type="hidden" name="var2" value="30" />
  <input type="button" id="motifiePost" value="Notification Post"/>
</form>
<!-- // -->

<div id="notice"></div>

</body>
</html>




Comme tu peux le voir j'ai inclus : "jquery-1.11.0.js"

Mais rien ne s'affiche à l'écran !?

Et la console Chrome me dit : "Uncaught TypeError: Cannot read property 'msie' of undefined"

Qui correspond à mon echo de mon fichier : "notification-7-rep.php" ?

Seulement lorsque je clique sur le bouton "GET".. .sinon ne dit rien (et n'affiche rien) lorsque je clique sur le bouton "POST".

Firebug reste muet dans les deux cas ? (et n'affiche rien)

As tu une idée ? Merci

Pesaluta
0
Pesaluta Messages postés 10 Date d'inscription vendredi 28 février 2014 Statut Membre Dernière intervention 1 mars 2014
1 mars 2014 à 16:06
Je viens de faire un petit test (...),

Il se trouve que sur le code qui affiche juste une notification (purr) et qui fonctionne, lorsque je passe à "jQuery JavaScript Library v1.11.0", cela ne fonctionne plus ?

Avec la librairie "jQuery 1.2.6" ça re-fonctionne :)

Il semblerai que cela ne soit pas compatible ? :(

Je vais trouver un autre script de notification compatible :(

Merci à vous de votre aide :(

Pesaluta
0
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
2 mars 2014 à 19:55
JQuery Growl fait a peu près la même chose et est compatible Jq > 1.9
0
Rejoignez-nous