Problème formulaire AJAX avec Firefox

Problème formulaire AJAX avec Firefox - HTML/CSS - Programmation

Marsh Posté le 11-12-2008 à 17:59:25    

Bonjour
 
C'est la première fois que je poste sur ce forum, j'espère que cela me sera profitable. :ange:  
Je vous explique mon problème
Sur un de mes sites web j'ai créé un formulaire dynamique. Ce formulaire s'ouvre avec des valeurs et des listes de choix par défaut et il est possible de modifier ces valeurs par défaut en choisissant dans un champ SELECT (javascript : onchange="..." ).  
J'utilise pour cela AJAX et un objet XHR qui en envoyant un paramètre (GET) vers une page php annexe va modifier d'un coup une partie du formulaire (2 listes de choix et un INPUT). Je ne rentre pas dans les détails car jusque là tout va bien.
Donc il me modifie impeccablement mon formulaire, me donne de nouvelles listes, etc, mais quand je le valide (Submit) avec Firefox, la page de destination ne reçoit pas les valeurs modifiées (récupération via $_POST['...']) alors que sous IE cela fonctionne sans problème :pfff:  
 
Je sais que Firefox est plus sensible à la syntaxe mais il faut savoir que ici la routine AJAX réécrit le code HTML de la même manière que la situation de départ et que le formulaire fonctionne tant que je ne lance pas le script...
 
Bon voilà je ne sais pas si c'est un problème déjà rencontré :sarcastic:  
Pour résumé : "Est-ce que l'utilisation d'un script AJAX pour modifier plusieurs "SELECT" et "INPUT" d'un formulaire peut empêcher le transfert des données par la méthode POST sur Firefox?"
 
Merci

Reply

Marsh Posté le 11-12-2008 à 17:59:25   

Reply

Marsh Posté le 11-12-2008 à 19:08:31    

Bon je vais qd meme donner un peu de code.  
Je prends le cas ici où une liste de choix modifie une autre liste de choix (le problème reste le même sur firefox où il me transmait la nouvelle liste mais le formulaire n'envoie pas les valeurs :( )
Aussi préciser le contexte : il s'agit d'un site de comptabilité, je veux que quand je choisis un type de frais il ne me met dans la liste déroulante que les factures correspondantes
 
Fichier cherche_compte.js (trouvé sur le net et adapté)

Code :
  1. /**
  2. * Lister les factures pour un type de frais donné avec un objet
  3. * XMLHTTPRequest.
  4. */
  5. /* Création de la variable globale qui contiendra l'objet XHR */
  6. var requete = null;
  7. /**
  8. * Fonction privée qui va créer un objet XHR.
  9. * Cette fonction initialisera la valeur dans la variable globale définie
  10. * ci-dessus.
  11. */
  12. function creerRequete()
  13. {   try
  14.     {   /* On tente de créer un objet XmlHTTPRequest */
  15.         requete = new XMLHttpRequest();
  16.     }
  17.     catch (microsoft)
  18.     {   /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
  19.         try
  20.         {   requete = new ActiveXObject('Msxml2.XMLHTTP');
  21.         }
  22.         catch(autremicrosoft)
  23.         {   /* La première méthode a échoué, on en teste une seconde */
  24.             try
  25.             {   requete = new ActiveXObject('Microsoft.XMLHTTP');
  26.             }
  27.             catch(echec)
  28.             {   /* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
  29.                 requete = null;
  30.             }
  31.         }
  32.     }
  33.     if(requete == null)
  34.     {   alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
  35.     }
  36. }
  37. /**
  38. * Fonction publique appelée par la page affichée.
  39. * Cette fonction va initialiser la création de l'objet XHR puis appeler
  40. * le code serveur afin de récupérer les données à modifier dans la page.
  41. */
  42. function getAll(Ref_frais)
  43. {   /* Si il n'y a pas d'identifiant de frais, on fait disparaître la seconde liste au cas où elle serait affichée */
  44.     if(Ref_frais == 'vide')
  45.     {   document.getElementById('blocFactures').innerHTML = '';
  46.     }
  47.     else
  48.     {  /* À cet endroit précis, on peut faire apparaître un message d'attente */
  49.         var blocListe = document.getElementById('blocFactures');
  50.         blocListe.innerHTML = "Traitement facture en cours, veuillez patienter...";
  51.         /* On crée l'objet XHR */
  52.         creerRequete();
  53.         /* Définition du fichier de traitement */
  54.         var url = 'liste_facture2.php?Ref_frais='+ Ref_frais;
  55.         /* Envoi de la requête à la page de traitement */
  56.         requete.open('GET', url, true);
  57.         /* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
  58.         requete.onreadystatechange = function()
  59.         {  /* Lorsque l'état est à 4 */
  60.             if(requete.readyState == 4)
  61.             {  /* Si on a un statut à 200 */
  62.                 if(requete.status == 200)
  63.                 {  /* Mise à jour de l'affichage, on appelle la fonction apropriée */
  64.                     actualiserFactures();
  65.                 }
  66.             }
  67.         };
  68.         requete.send(null);
  69.     }
  70. }
  71. /**
  72. * Fonction privée qui va mettre à jour l'affichage de la page.
  73. */
  74. function actualiserFactures()
  75. {  var listeFacture = requete.responseText;
  76.     var blocListe = document.getElementById('blocFactures');
  77.     blocListe.innerHTML = listeFacture;
  78. }


 
le fichier php qui me renvoye la nouvelle liste : liste_facture2.php

Code :
  1. <?php
  2. /**
  3. * Code qui sera appelé par un objet XHR et qui
  4. * retournera la liste déroulante des factures
  5. * correspondant au type de frais sélectionné.
  6. */
  7. /* Paramètres de connexion */
  8. header('Content-type: text/html; charset=iso-8859-1');
  9. $connection=mysql_connect($host,$user,$password)
  10.     or die ("Connexion au serveur impossible" );
  11. $db = mysql_select_db($database,$connection)
  12.     or die ("Sélection de la base de données impossible" );
  14. /* On récupère l'identifiant de la section choisie. */
  15. $Ref_frais = isset($_GET['Ref_frais']) ? $_GET['Ref_frais'] : false;
  16. /* Si on a une section, on procède à la requête */
  17. if(false !== $Ref_frais)
  18. {
  19.     /* Création de la requête pour avoir les factures qui ont déjà traité avec ce frais */
  20.     $liste = "";
  21.     $query_compte = "SELECT blablabla...";
  22.     $result_compte=mysql_query($query_compte) or die ("Impossible d'exécuter la requête 5." );
  23.     $num_list = mysql_num_rows($result_compte);
  24.     $liste .= '<select id="bana" name="bana">'."\n";
  25.     if($num_list!=0)
  26.     {  for($i=0; $i<$num_list; $i++)
  27.        {   ...
  28.            if($i==0) $liste .="<option Selected=\"Selected\" value=\"$Ref_compte\">$number - $numero_compte ($nom_compte)</option>\n";
  29.            else $liste .="<option value=\"$Ref_compte\">$number - $numero_compte ($nom_compte)</option>\n";
  30.        }
  31.        $liste .="<option value=\"0\">- - - - - - - - - - - </option>\n";
  32.     }
  33.     $liste .="<option>- - - - - - - - - - - </option>\n";
  34.     $liste .="<option value=\"0\">Pas de compte</option>\n";
  35.     /* Un petit coup de balai */
  36.     mysql_free_result($result_compte);
  37.     /* Affichage de la liste déroulante */
  38.     echo($liste);
  39. }
  40. /* Sinon on retourne un message d'erreur */
  41. else
  42. {
  43.     echo("<p>Une erreur s'est produite. Le frais sélectionné comporte une donnée invalide.</p>" );
  44. }
  45. ?>


 
et enfin la page html(php) qui reçoit les données (initialise une première liste) via un bloc "span"

Code :
  1. <head>
  2. ...
  3. <script type="text/javascript" src="gewbank.js"></script>
  4. <script type="text/javascript" src="prototype.js"></script>
  5. <script type="text/javascript" src="scriptaculous.js?load=effects,controls"></script>
  6. <script type="text/javascript" src="cherche_compte.js" charset="iso_8859-1"></script>
  7. </head>
  8. <body>
  9. ...
  10. ...
  11. <SELECT name="Ref_frais" onchange="getAll(this.value);">
  12. ...
  13. </SELECT
  14. ...
  15. ...
  16. <td class='row3'>
  17. <span id="blocFactures">
  18. <?php
  19.     $query_compte = "SELECT blablabla...";
  20.     $result_compte=mysql_query($query_compte) or die ("Impossible d'exécuter la requête5." );
  21.     $num_list = mysql_num_rows($result_compte);
  22.     $liste = "";
  23.     $liste .= '<select id="bana" name="bana">'."\n";
  24.     if($num_list!=0)
  25.     {  for($i=0; $i<$num_list; $i++)
  26.        {   ...
  27.            $liste .="<option value=$Ref_compte>$number - $numero_compte ($nom_compte)</option>\n";
  28.        }
  29.        $liste .="<option>- - - - - - - - - - - </option>\n";
  30.     }
  31.     $query_compte = "SELECT * FROM compte ORDER BY numero_compte, nom_compte";
  32.     $result_compte=mysql_query($query_compte) or die ("Impossible d'exécuter la requête $query_compte." );
  33.     $num_list = mysql_num_rows($result_compte);
  34.     if($num_list!=0)
  35.     {  for($i=0; $i<$num_list; $i++)
  36.        {   ...
  37.            $liste .="<option value=$Ref_compte>$numero_compte ($nom_compte)</option>\n";
  38.        }
  39.     }
  40.     $liste .="<option>- - - - - - - - - - - </option>\n";
  41.     $liste .="<option value=0>Pas de compte</option>\n";
  42.     /* Un petit coup de balai */
  43.     mysql_free_result($result_compte);
  44.     /* Affichage de la liste déroulante */
  45.     echo($liste);
  46. ?>
  47. </span>
  48. </td>
  49. ...
  50. </body>


Message édité par ewbs le 12-12-2008 à 09:45:23
Reply

Marsh Posté le 31-12-2008 à 00:08:53    

pour répondre à ta question :  
Est-ce que l'utilisation d'un script AJAX pour modifier plusieurs "SELECT" et "INPUT" d'un formulaire peut empêcher le transfert des données par la méthode POST sur Firefox?
 
Non, ça doit marcher
 
Mets une page en ligne, ce sera beaucoup plus facile pour te répondre
 
Hors contexte : je vois que tu utilises prototype, n'hésite pas à t'en servir pour l'ajax  :bounce:

Reply

Marsh Posté le 11-02-2009 à 12:55:17    

Cool une réponse :bounce:  
 
Alors je ne vais pas mettre une page en ligne car c'est un site privé de compta mais je vais montrer quelques print screen pour expliquer tout ça.
J'ai donc un formulaire qui me permet de noter les dépenses/rentrées d'argent sur un compte qui s'ouvre avec des valeurs par défaut. Exemple
http://www.jeunesdinantaisagreables.be/images/print1.jpg
Si ici je ne touche à rien et que je valide, il encode parfaitement les données dans la base  
Si je modifie les champs où il n'y a pas d'AJAX c'est à dire les champs "Facture", "Montant", "numero de compte" ou le dernier, cela passe aussi
=> le code semble bon
Maintenant là où ça coince, c'est quand je change la "rentrée/sortie" ou le "type de frais" qui eux mettent à jour les 3 champs en-dessous via AJAX
Par exemple si je passe à un montant négatif (une dépense) le formulaire se met à jour automatiquement ce qui nous donnerait par exemple
http://www.jeunesdinantaisagreables.be/images/print2.jpg
et là quand je valide, il n'arrive pas à exécuter la requête qui est interprétée comme

Code :
  1. INSERT INTO tresorerie values(NULL,1,,'09-0034','2009-01-29',1,0,0,,1,'')


au lieu de  

Code :
  1. INSERT INTO tresorerie values(NULL,1,214,'09-0034','2009-01-29',1,145,0,81.38,1,'')


=> les 3 champs changés par AJAX ne passent pas en POST... :(  
 
Alors que sur Explorer... ça passe
 
une idée? :sarcastic:


Message édité par ewbs le 11-02-2009 à 12:56:13
Reply

Marsh Posté le 01-09-2009 à 14:41:13    

Bonjour,
j'ai exactement le meme probleme. Ca fonctionnait tres bien l'année dernière (aout) et la mon script ne fonctionne plus.
 
Y a t'il une solution ou cela n'est plus compatible de remplacer une div contenant un formulaire par une autre div contenant un formulaire?
 
merci pour l'aide

Reply

Sujets relatifs:

Leave a Replay

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