[jQuery] Code non exécuté

Code non exécuté [jQuery] - HTML/CSS - Programmation

Marsh Posté le 21-10-2011 à 20:06:39    

Bonjour à tous,
 
J'aurais besoin d'un peu d'aide pour comprendre pourquoi une partie de mon code n'est pas exécuté avec jQuery. Je débute encore avec l'utilisation de la lib donc je suis preneur pour tous vos conseils.
 
Ajax.js

Code :
  1. $(document).ready(function(){
  4. // On affiche la liste des taches
  5. $.post("ajax/traitement.php",{action:"lister"},function(tab){
  6.  for(var i = 0, lg = tab.length; i < lg; i++){
  7.   switch(tab[i].priorite){
  8.    case "1":
  9.     var prio = "info";
  10.     break;
  11.    case "2":
  12.     var prio = "warning";
  13.     break;
  14.    case "3":
  15.     var prio = "error";
  16.     break;
  17.   }
  18.   var div = '<div class="alert-message block-message '+prio+'"><b>'+tab[i].nom+'</b><ul class="pb"><li><b>Date début</b> - '+tab[i].date_debut+'</li><li><b>Problème</b> - '+tab[i].probleme+'</li></div>';
  19.   $(".taches" ).append(div);
  20.  }
  21. },"json" );
  24. // Envoie du formulaire
  25. $("#form" ).submit(function(){
  27.  var isOk = true;
  28.  var titre = $("#titre" ).val();
  29.  var prio = $("#prio" ).val();
  30.  var desc = $("#desc" ).val();
  32.  if(titre == "" ){
  33.   $("#titre" ).addClass("alert" );
  34.   isOk = false;
  35.  }
  37.  if(desc == "" ){
  38.   $("#desc" ).addClass("alert" );
  39.   isOk = false;
  40.  }
  42.  if(isOk){
  43.   $.post("ajax/traitement.php",{action:"add",nom:titre,priorite:prio,description:desc},function(data){
  44.    if(data == "ok" ){
  45.     $(".displayMsg" ).html("<div class=\"alert-message block-message success\"><b>Nouvelle tâche ajoutée.</b><div>" );
  46.     $.post("ajax/traitement.php",{action:"refresh"},function(tab){
  47.      if(tab.err == "ok" ){
  48.       switch(tab.data.priorite){
  49.        case "1":
  50.         var prio = "info";
  51.         break;
  52.        case "2":
  53.         var prio = "warning";
  54.         break;
  55.        case "3":
  56.         var prio = "error";
  57.         break;
  58.       }
  59.       var div = '<div class="alert-message block-message '+prio+'"><b>'+tab.data.nom+'</b><ul class="pb"><li><b>Date début</b> - '+tab.data.date_debut+'</li><li><b>Problème</b> - '+tab.data.probleme+'</li></div>';
  60.       $(".taches:first" ).before(div);
  61.      }
  62.     },"json" );
  63.    }
  64.   },"json" );
  65.  $("#form" ).reset();
  66.  }
  67.  return false;
  68. });
  71. // On cache le commentaire du problème
  72. $(".pb" ).hide();
  75. // Hover sur les taches
  76. $(".alert-message" ).hover(function(){
  77.  $(this).append($("<span id=\"finir\"><b>x</a></b></span>" ));
  78. },function(){
  79.  $(this).find("span:last" ).remove();
  80. });
  83. // Affiche de la description
  84. $(".alert-message" ).click(function(){
  85.  $(this).find(".pb" ).toggle(300);
  86. });
  89. });


Mon problème vient du fait que le code suivant n'es pas exécuté. <code type="javascript">

Code :
  1. $(".pb" ).hide();


 
 
Pourtant que je lance cette fonction dans la console de chrome elle fonctionne.
 
J'ai aussi remarqué que lorsque je rafraîchis la page avec l'inspecteur ouvert j'ai une exception qui est levée à ce niveau là:
 

Code :
  1. matches.call( document.documentElement, "[test!='']:sizzle" );


 
 
Si vous avez des pistes, je suis preneur.
 
Merci


Message édité par Profil supprimé le 21-10-2011 à 20:06:56
Reply

Marsh Posté le 21-10-2011 à 20:06:39   

Reply

Marsh Posté le 22-10-2011 à 08:46:18    

tu caches pb en dehors de la methode de callback, car c'est dans la callback que tu le créés.
Je te rappelle que l'ajax se fait en asynchrone en général (sauf si comme un gros porc tu décides de le faire en synchrone, mais tu bloques le navigateur dans ce cas là


---------------
Blablaté par Harko
Reply

Marsh Posté le 22-10-2011 à 14:16:56    

Euh, j'ai vraiment du mal à comprendre là, tu pourrais être un peu plus précis s'il te plait ? [:cupra]  
 
Pour moi (enfin de ce que je pige), c'est qu'avec ma première fonction j'affiche mes taches avec leur description dans une div.pb. Donc une fois que c'est affiché, je vois pas pourquoi mon $(".pb" ).hide() ne pourrais pas les cacher.
 

Reply

Marsh Posté le 22-10-2011 à 17:24:57    

ton .pb existe QUAND ?
Est-ce qu'il existe avant que le javascript se lance ?  
 
Regarde bien comment se produit ton code, je te rappelle que l'ajax est asynchrone et donc ne se déroule pas dans le même ordre que le javascript.
 
 

Code :
  1. $(document).ready(function() {
  2. //premier post ajax
  3. $.post("ajax/traitement.php",{action:"lister"},function(tab){
  4.   //fonction de callback, tu ne sais pas quand cette fonction sera exécutée.
  5. });
  7. //deuxieme post ajax
  8. $("#form" ).submit(function(){
  9. //fonction de callback, tu ne sais pas si la premiere est finie d'executée ou pas, et cette fonction elle pourrait aussi bien s'exécuter avant ou apres la premiere fonction de callback
  10. });
  12. //code javascript qui suit l'ordre des choses  
  13. $(".pb" ).hide(); //tu essaye de cacher un élément qui n'existe pas encore, car cette ligne de code s'éxécute AVANT les deux première fonctions de retour ajax (callback)
  15. //idem pour le reste du code


---------------
Blablaté par Harko
Reply

Marsh Posté le 22-10-2011 à 18:23:40    

Ahh ok je viens de comprendre.
 
Pour te répondre mon .pb n'existe que lorsque la fonction callback de la première requête ajax vient de se terminer.

Reply

Marsh Posté le 22-10-2011 à 19:53:50    

maintenant tu sais ce qu'il te reste à faire :)
La premiere fonction doit s'executer, dans la callback tu fais l'appel ajax, et dans la callback de l'appel ajax, tu fait le reste de ton code. voila


---------------
Blablaté par Harko
Reply

Marsh Posté le 22-10-2011 à 20:00:42    

Ouep j'ai pu corriger tout ça, merci bien  :jap:

Reply

Sujets relatifs:

Leave a Replay

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