[RÉSOLU] Problème fenêtre modale et notifications

Problème fenêtre modale et notifications [RÉSOLU] - Javascript/Node.js - Programmation

Marsh Posté le 17-10-2014 à 22:41:43    

:bounce: [SUJET RÉSOLU] :bounce:  
Bonjour,
J'ai trouvé sur un site deux scripts Javascript différents qui me conviennent parfaitement :
Un système de fenêtre modale et un système de notifications
Seulement j'ai trouvé les deux scripts sur un site différent, et lorsque j'essaye de combiner les deux sur la même page, j'ai une erreur à propos de mon fichier demo.js qui correspond aux fenêtres modales :
Uncaught TypeError: undefined is not a function
Voici mon fichier demo.js :

Code :
  1. /*
  2. * Mootools Simple Modal
  3. * Version 1.0
  4. * Copyright (c) 2011 Marco Dell'Anna -
  5. */
  6. window.addEvent("domready", function(e){
  7. /* Modal Ajax */
  8.   $("modal-ajax" ).addEvent("click", function(e){
  9.     e.stop();
  10.     var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
  11.         // Aggiunge Bottone Conferma
  12.         SM.addButton("Confirmer", "confirm-btn", function(){
  13.                         // Check
  14.                         if( $("confirm-text" ).get("value" ) != "DELETE" ){
  15.                             $("confirm-delete-error" ).setStyle("display", "block" );
  16.                         }else{
  17.                             // Your code ...
  18.                             this.hide();
  19.                         }
  20.         });
  21.         // Aggiunge Bottone annulla
  22.         SM.addButton("Fermer", "btn" );
  23.         SM.show({
  24.           "model":"modal-ajax",
  25.           "title":"Connexion",
  26.           "param":{
  27.             "url":"connexion.php",
  28.             "onRequestComplete": function(){ }
  29.           }
  30.         });
  31.   })
  33.  
  34. });
  36. window.addEvent("domready", function(e){
  37. /* Modal Ajax */
  38.   $("modal-ajax-2" ).addEvent("click", function(e){
  39.     e.stop();
  40.     var SM = new SimpleModal2({"btn_ok":"Confirm button", "width":600});
  41.         // Aggiunge Bottone Conferma
  42.         SM.addButton("Confirmer", "confirm-btn", function(){
  43.                         // Check
  44.                         if( $("confirm-text" ).get("value" ) != "DELETE" ){
  45.                             $("confirm-delete-error" ).setStyle("display", "block" );
  46.                         }else{
  47.                             // Your code ...
  48.                             this.hide();
  49.                         }
  50.         });
  51.         // Aggiunge Bottone annulla
  52.         SM.addButton("Fermer", "btn" );
  53.         SM.show({
  54.           "model":"modal-ajax-2",
  55.           "title":"Inscription",
  56.           "param":{
  57.             "url":"inscription.php",
  58.             "onRequestComplete": function(){ }
  59.           }
  60.         });
  61.   })
  63.  
  64. });


 
L'erreur serait à propos de la ligne 8 :

Code :
  1. $("modal-ajax" ).addEvent("click", function(e){


 
Ce que j'ai remarqué, c'est que cette erreur est apparue UNIQUEMENT lorsque j'ai mentionné dans mon header, le fichier jQuery indispensable au fonctionnement non pas des fenêtres modales, mais du système de notifications :
 

Code :
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


 
Cela vient bien d'ici car, lorsque je retire ce bout de code, tout fonctionne, sauf les notifications bien sûr ... :-°
Selon un ami, ça viendrait de l'ordre dans lequel je mentionne le ficheir jQuery et le fichier demo.js :

Code :
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  2. <script src="demo.js" type="text/javascript" charset="utf-8"></script>


 
J'ai essayé en intervertissant le sens des deux fichiers :

Code :
  1. <script src="demo.js" type="text/javascript" charset="utf-8"></script>
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


 
Sauf que cela ne change rien : j'ai toujours la même erreur ..
Merci à mon (ou mes :lol: ) futurs sauveurs !  :)  
PS : Je ne connais pas jQuery, c'est juste un script trouvé mais je maîtrise le Javascript normal.


Message édité par alantheo le 19-10-2014 à 14:00:59
Reply

Marsh Posté le 17-10-2014 à 22:41:43   

Reply

Marsh Posté le 17-10-2014 à 22:52:32    

Le système de notification fonctionne avec JQuery aussi?
 
Enfin bref, tu appelles le fichier JQuery avant de lancer ton demo.js puisque JQuery est une bibliothèque et que demo.js utilise la bibliothèque JQuery.
 
Seulement si ton système de notification fonctionne sous JQuery aussi alors il ne faut pas appeler de nouveau le script JQuery. Je te conseille d'appeler simplement la version la plus récente de JQuery puis tes 2 scripts en espérant que ça fonctionne.
 
Si ça ne fonctionne pas, je pense que tu peux mêler les versions JQuery mais doit falloir faire une démarche spécifique (probablement préciser lors de l'appelle de foncyions JQuery la version à utliser).

Reply

Marsh Posté le 17-10-2014 à 23:10:34    

Oui les notifications fonctionnent avec jQuery.  
 
Mais ce que je suis certain, c'est que j'appelle qu'un seul fichier jQuery.


Message édité par alantheo le 17-10-2014 à 23:13:25
Reply

Marsh Posté le 18-10-2014 à 11:47:42    

Voilà ce que ça donne :
http://jsfiddle.net/5rjosroa/6/
 
Vous pouvez voir les fichiers externes en cliquant sur "External Resources".

Reply

Marsh Posté le 19-10-2014 à 12:13:37    

J'ai un nouvel élément ! :D
 
D'après un (autre) ami, ça vient de là :
 
"bah tu utilises pas jquery mais Mootools c'est écrit en gros, et mootools c'est un autre framework javascript, ça doit être ça le souci ! c'est pas la syntaxe de jquery ton code"
 
 Et dans mon header, j'ai ceci :
 
 

Code :
  1. <script src="javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>


 
 :bounce: SUJET RÉSOLU  :bounce:


Message édité par alantheo le 19-10-2014 à 14:00:41
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed