[AJAX] Recharger un bloc en Ajax sans perdre les données ?

Version imprimable

Bonjour,

Sur l'un de mes sites j'utilise un formulaire extra long sur lequel une liste déroulante (catégories) est lié à une panoplie de micro formulaires. Par exemple, à la sélection de la catégorie 1, ça va afficher 3 "input", catégorie 2 va afficher une liste, etc...
Pour ce faire, j'utilise actuellement un "onchange="javascript:submit(this)"" sur la liste pour recharger la page puis j'utilise un "if ($_POST["categorie"]==***)" pour afficher ou ré afficher la partie correspondante.

Aujourd'hui, je tente d'améliorer ce formulaire afin d'éviter le rechargement de la page à la sélection et j'essaye donc d'utiliser Ajax pour aboutir à ce résultat. La ou je "coince", c'est que je ne parviens pas à garder la sélection de la seconde partie du formulaire si l'utilisateur valide le formulaire et qu'une erreur survient.

Ma partie teste :

Sur ma sélection (ma liste) j'utilise onchange="montre(this.value);" qui transmet à ma fonction ajax le numéro de l'option qui elle même va chercher en "GET" (dans le fichier 'teste2.php') tout ce qui correspond au numéro transmit puis affiche le résultat dans un <span id="bloc"></span>.

Jusque la, pas de soucis.

Si je valide mon formulaire, la partie du formulaire associée à ma sélection disparaît ... la est mon soucis :? !

La seule solution que j'ai trouvé pour ne pas perdre ma sélection à la validation est d'inclure le fichier appelé via Ajax à la validation du formulaire directement dans mon bloc d'affichage :

Code:

<span id="bloc"><?php if(isset($_POST['Valider'])) include('teste2.php');?></span>

et de vérifier dans ce même fichier (teste2.php) si celui-ci reçoit les informations en GET ou POST pour ré afficher ou pas les données...

Fichier teste2.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php //récupération de la valeur de l'option via Ajax if(isset($_GET['numoption']) && !empty($_GET['numoption'])){ $numoption = $_GET['numoption']; } //si le formulaire a été validé, on inclue cette page dans le bloc lié à la liste déroulante pour récupérer et ré afficher les valeurs associées en cas d'erreur. if(isset($_POST['categorie']) && !empty($_POST['categorie'])){ $numoption = $_POST['categorie']; } //Catégorie 1 if($numoption == 1){?> Cat 1 <input type="text" name="cat1" value="<?php if(isset($_POST['cat1'])) echo $_POST['cat1'];?>" /> <?php } //Catégorie 2 if($numoption == 2){?> Cat 2 <input type="text" name="cat2" value="<?php if(isset($_POST['cat2'])) echo $_POST['cat2'];?>" /> <?php } //etc... ?>
Ma méthode me semble tellement tordu que je préfère vous en faire part afin d'obtenir vos avis...

Merci

09/10/2012, 14h02
v1cent

Je pense que déjà il y a une incompréhension de ta part sur l'AJAX

pardonne moi si je me trompe, mais si je comprend bien ton problème, tu remplace un bout de formulaire par une autre version, et tu es géné parce que un champ est remplacé

la solution serait alors de mettre à jour uniquement le reste tout simplement

sinon tu met ton résultat dans une variable globale en javascript tout simplement aussi

Non ce n'est pas vraiment ça :) en même temps ma compréhension est limité :oops:. J'utilise ajax sur le même principe que 2 listes déroulante liées. La sélection dans ma liste demande via la fonction ajax d'afficher dans un bloc la partie correspondante.

Le fichier qui est appelé via la fonction contient uniquement des bouts de formulaire. Chaque bout de formulaire est donc affiché dans le bloc uniquement à la sélection de la liste.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="form1"> <select name="categorie" id="categorie" onchange="montre(this.value);"> <option value="vide">---Selectionner---</option> <option value="1" <?php if(isset($_POST['categorie']) && $_POST['categorie'] == 1) echo "selected";?>> Cat 1</option> <option value="2" <?php if(isset($_POST['categorie']) && $_POST['categorie'] == 2) echo "selected";?>> Cat 2</option> </select>  <span id="bloc"></span> <input type="submit" name="Valider" value="Valider"> </form>
Côté Ajax :
Code:

1 2 3 4 5 6 7 8 /*L'envoie*/ var url = 'teste2.php?numoption='+ numoption; /* Envoi de la requête à la page de traitement */ requete.open('GET', url, true); /*la réponse*/ var affichereponse = requete.responseText; var blocListe = document.getElementById('bloc'); blocListe.innerHTML = affichereponse;
Comme je le disais, le fichier "teste2.php" contient uniquement des bouts de formulaires et comme la fonction ajax transmet le numéro de l'option sélectionné, j'utilise donc une série de conditions pour afficher uniquement la partie souhaité.

teste2.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <?php //récupération de la valeur de l'option via Ajax if(isset($_GET['numoption']) && !empty($_GET['numoption'])){ $numoption = $_GET['numoption']; } //Catégorie 1 if($numoption == 1){?> Cat 1 <input type="text" name="cat1" value="<?php if(isset($_POST['cat1'])) echo $_POST['cat1'];?>" /> Cat 2 <input type="text" name="cat2" value="<?php if(isset($_POST['cat2'])) echo $_POST['cat2'];?>" /> <?php } //Catégorie 2 if($numoption == 2){?> Cat 2 <input type="text" name="cat2" value="<?php if(isset($_POST['cat2'])) echo $_POST['cat2'];?>" /> Cat 3 <input type="text" name="cat3" value="<?php if(isset($_POST['cat3'])) echo $_POST['cat3'];?>" /> <?php } //etc... ?>
Si je valide mon formulaire pour enregistrer les données en BD, la partie du formulaire affiché dans mon bloc (<span id="bloc"></span>) disparaît alors que moi je veux qu'il reste affiché, d'ou la méthode utilisé dans mon premier poste et ma question.

10/10/2012, 11h05
v1cent

ha oui j'ai compris, ton problème est que après le rechargement, le formulaire ne se met pas à jour en fonction de l'option ?

tu as deux solution, soit tu fait comme maintenant, soit tu utilise ta fonction javascript au chargement de la page en plus du onchange
10/10/2012, 12h02
tryan
Citation:

Envoyé par v1cent

ha oui j'ai compris, ton problème est que après le rechargement, le formulaire ne se met pas à jour en fonction de l'option ?

Yessssssssss :mrgreen:

Je viens de tester en utilisant ma fonction au chargement de la page. La partie du formulaire appelé s'affiche correctement par contre les données saisies ne se ré affiche pas 8O ?
Je m'y prend peut être comme un manche ...

Après validation j'injecte le numéro de l'option sélectionné dans la fonction :

Code:

<body onload="montre(<?php if(isset($_POST['categorie'])) echo $_POST['categorie'];?>);">

Quand j'effectue un print_r($_POST); , j'obtiens entre autre :
Code:

1 2 3 [categorie] => 1 [cat1] => teste
Pour moi, tout est la y comprit la valeur du champ.

Code:

Cat 1 <input type="text" name="cat1" value="<?php if(isset($_POST['cat1'])) echo $_POST['cat1'];?>" />

Le contenu devrait donc théoriquement se ré afficher ...non ?

Sinon et je m'excuse d'insister, ma méthode initial ne vous paraît vraiment pas "tordu" ?
10/10/2012, 12h17
v1cent

Non ce n'est pas tordu du tout

Pour tes données, c'est normal, il faut que tu transmette tes données à la main (ou les stocker coté serveur) si tu veux qu'elles se réaffichent... du coup poursuivre comme tout de suite semble plus pertinent que le coup de la fonction au chargement...

Par contre il y a peut être plus simple à gérer : tu transmet tout, et tu cache ou affiche les champs (css display none) en fonction de ton select.

Comme ça tu es sûr que les données sont conservées et tu as pas à t'emm..bêter en ajax

quand le formulaire arrive, tu ne lis pas ce qui ne t'intéresse pas, tout simplement
10/10/2012, 12h37
tryan

Ok, merci de votre réponse :).

J'avais testé le coup du formulaire "afficher/cacher" par un "display" à la sélection et le problème était que si je remplie 2 choix différents, les 2 choix sont conservés...

Par exemple, j'affiche l'option 1, je remplie le formulaire associé, je valide. Une erreur survient et je décide de changer de sélection (option 2) donc je remplie de nouveau le formulaire associé à ma nouvelle sélection. Quand je valide, la BD enregistre le formulaire de l'option 2 et de l'option 1 alors que seule la dernière sélection doit être conservé (pas facile à expliquer ces histoires de formulaires).
10/10/2012, 12h48
v1cent

c'est ton algorithme qui devait être un peu foireux, si tu n'enregistre que les champs qui t'intéressent en fonction de l'option, la BDD n'aura que ceux là, indépendamment de ce que tu affiche coté client

Citation:

Envoyé par v1cent

c'est ton algorithme qui devait être un peu foireux...

Très certainement :mouarf: ! Du coup je m’interroge sur ce que vous venez d'écrire car je ne vois pas comment enregistrer en bd uniquement ce qui correspond à l'option sélectionné?

Pour moi, "afficher/cacher" correspond à suite de div caché qui est affiché uniquement la sélection.
Code:

1 2 3 4 5 6  <div id="option_1" style ="display:none;"></div> <div id="option_2" style ="display:none;"></div> <div id="option_3" style ="display:none;"></div>
Toujours pour moi, si 2 formulaires sont remplient successivement, les données des 2 formulaires sont conservés...bref, il y a un truc qui m'échappe :calim2: .

Si vous avez le temps de me montrer un exemple pour que je comprenne, n'hésitez pas.
Merci de vos réponses :).

Je ne peux pas deviner comment ça se fait, vu que nous ne voyons pas tes requêtes SQL...

Les données sont conservées dans le formulaire, mais rien ne t'empêche de décider de ce que tu transmet ou non...

En gros tu peux faire une bidouille du genre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
//si le formulaire a été validé, on inclue cette page dans le bloc lié à la liste déroulante pour récupérer et ré afficher les valeurs associées en cas d'erreur.
if(isset($_POST['categorie']) && !empty($_POST['categorie'])){
    $numoption = $_POST['categorie'];
}
 
// ajout d'un tableau qui récupère les données
$donneesForm = array() ;
// tri des données intéressantes en fonction de l'option
 //Catégorie 1
if($numoption == 1){
    $donneesForm['cat1'] = $_POST['cat1'] ;
    $donneesForm['cat2'] = "" ;
    // etc.
}
//Catégorie 2
if($numoption == 2){
    $donneesForm['cat1'] = "" ; 
    $donneesForm['cat2'] = $_POST['cat2'] ;
    //etc.
}
// enregistrement de ce qui t'intéresse en base
 
?>
 
    Cat 1 <input type="text" name="cat1" value="<?php echo $donneersForm['cat1']?>" />
    Cat 2 <input type="text" name="cat2" value="<?php echo $donneersForm['cat2']?>" />

Bon comme je sais pas ce que tu fait exactement, je suis pas sûr que ça colle tout à fait, mais l'esprit est là

13/10/2012, 11h05
tryan

Avec un peut de retard, merci de votre exemple ;) et c'est une solution qui ne m'avait même pas effleuré l'esprit.

A la final j'ai gardé mon principe et ça semble pour le moment très bien fonctionné.

Encore merci de vos réponse.