Formulaire dynamique AJAX

Version imprimable

16/12/2010, 18h12
fastone650

Formulaire dynamique AJAX

Bonjour,

J'aimerais alimenter un menu déroulant en fonction de la valeur d'un champ précédemment saisi.
Sachant que le framework permet d'implémenter les champs du formulaire avec une classe php associée par exemple "AnnonceForm.php".

Je ne sais pas comment faire pour intégrer AJAX et appeler ces différents champs qui sont appelés dans la classe du formulaire.

Par exemple :
-> Une liste déroulante qui contient la liste des régions.

-> Une autre qui contient la liste des départements.

En fonction de la région choisit, la deuxième liste générera les départements associés.

Sachant que j'ai déjà 2 tables renseignées dans ma base comportant la liste des régions et de départements.

Merci de m'expliquer la procédure ,sinon me proposez un tutoriel qui permet de faire cette manipulation avec Symfony bien sur.

Merci d'avance pour vos précieux conseils.
16/12/2010, 19h02
Michel Rotta

Tu demandes beaucoup... faudra te mouiller un peu sur le coup.

Il n'y a pas d'objet symfony qui permettent de réaliser cette double cascade sans avoir à ouvrir le moteur.

Le mieux est de faire un formulaire qui tourne dans un premier temps sans JS. Histoire que ceux qui n'ont pas de JS activé arrivent à gérer ton application.

Ensuite, d'écrire du code (avec jquery probablement comme framework JS) pour faire les demandes de modification de la liste à symfony. Après, c'est à toi de voir si tu veux que symfony génère la liste avec tous le code HTML et le remplacer dans la page, ou juste te retourne les départements pour la région sous forme JSON et ton code JS fait le remplacement.

Il (ton code) peut aussi masquer les boutons nécessaire à la page sans JS.

Symfony va te simplifier la vie dans le traitement des requêtes JS. Et dans les possibilités de factorisation du code.

Tu as des exemples dans la documentation de symfony sur le site de sensio, en français (les exemples, pas le site). Il ne sont pas exactement ce que tu demandes, mais donnent de bonnes bases.
16/12/2010, 20h01
fastone650

Salut,

Merci pour ta réponse mais en fait je que je cherche c'est "pour faire les demandes de modification de la liste à symfony" c'est ça en fait car les déclarations sont bien faites dans les classes de formulaires comment je ferai appel à ces derniers dans le JS ?
17/12/2010, 12h54
Michel Rotta

Je ne vois pas trop comment expliquer cela en une réponse.

As-tu déjà fais de l'ajax, du JS ? As-tu déjà utilisé jquery ?

Il faut lier du code jquery au changement de la valeur de la première liste. Ensuite récupérer les données en affichant un symbole pour prévenir l'utilisateur que l'ordi travail pour lui. Puis mettre en forme et afficher.

Et côté symfony, il faut une action qui va récupérer les données (le code pour récupérer la liste peut être partagé) et les renvoyer.

Après, si tu n'as jamais fait de JS ni de discutions entre la couche JS et une application PHP, il faudrait, peut-être, commencer à ce pencher sur les tutoriels correspondants. Vu que je n'ai aucune idée de ton niveau, je ne sais pas trop quoi dire d'autre.
19/12/2010, 09h04
fastone650

Oui en fait je travaille je suis débutant j'ai jamais fait d'AJAX c'est pour ça.
Merci en tout cas.Je vais continuer mes recherches.

Integration de l'AJAX

Bonjour,

J'ai essayé d'intégrer AJAX en procédant comme suit :

J'ai rajouté la route suivante :

Code:

1
2
3
4
5
6
# routing.yml
...
ajax_departement:
  url:   /ads/departement
  param: { module: ads, action: ajaxDepartement }
...

L'action suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
// actions.class.php
 
  /**
   * requete ajax pour avoir la liste des déparements de la région
   *
   * @param sfWebRequest $request
   */
  public function executeAjaxDepartement(sfWebRequest $request)
  {
    $region = Doctrine::getTable('Region')->findOneById(1); // j'ai mis 1 pour tester sur la première region "Alsace"
    return $this->renderPartial('selectDepartement', array('region' => $region));
  }

Et le partial :

Code:

1
2
3
4
5
// _selectDepartement.php
<option value=""></option>
<?php foreach($region->getDepartements() as $departement): ?>
<option value="<?php echo $departement->getId() ?>"><?php echo $departement->getNom() ?></option>
<?php endforeach; ?>

Et finalement mon _form.php --> formulaire de l'annonce :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<?php use_stylesheets_for_form($form) ?>
 
<?php use_javascript('jquery-1.4.4.min.js') ?> 
<?php use_javascript('ajax_reg.js') ?> 
 
<script language="javascript">
$(document).ready(function(){
  $("#form_Region_id").change( function() {
    $.post("/ads/departement", { region: $(this).val() },
    function(data)){
      $("#form_Departement_id").html(data);
    });
  });
});
</script>
 
<?php use_javascripts_for_form($form) ?>
<?php echo form_tag_for($form, '@ads') ?>  
  <table id="job_form">
    <tfoot>
      <tr>
        <td colspan="2">
          <input type="submit" value="Preview your ad" />
        </td>
      </tr>
    </tfoot>
    <tbody>
      <?php echo $form['Categorie_id']->renderRow() ?>
 
      <?php echo $form['Region_id']->renderRow() ?>
	  <?php echo $form['Departement_id']->renderRow() ?> 
 
	  <?php //echo $form['Region']['Name']->renderRow() ?> <?php //bug ?>
 
	  <?php echo $form['CodePostal']->renderRow() ?>
	  <?php echo $form['Ville']->renderRow() ?>
	  <?php echo $form['TypeAnnonce']->renderRow() ?>
	  <?php echo $form['TitreAnnonce']->renderRow() ?>
	  <?php echo $form['TexteAnnonce']->renderRow() ?>
	  <?php echo $form['Prix']->renderRow() ?>
	  <?php echo $form->renderHiddenFields() ?>
	  <?php foreach ($form['newPhotos'] as $photo): ?>
      <?php echo $photo['caption']->renderRow() ?>
      <?php echo $photo['filename']->renderRow() ?>
      <?php endforeach; ?>
 
    </tbody>
  </table>
</form>

Cependant rien à changer j'ai même l'impression que le code ne prend même pas en considération le javascript que j'ai ajouté, quand j'essaie de mettre n'importe quoi ça bogue pas.
Les valeurs des deux listes déroulantes n'ont pas changé.

Merci de me corriger ou m'éclairer un peu.

20/12/2010, 05h09
Fused

je dis ça je dis rien mais je pense que ton javascript n'est jamais appelé car :

Code:

$("#form_Region_id").change

Tu es sur de cet identifiant, ce n'est pas écrit dans ta vue !

Essaie de mettre un alert() javascript sur cette fonction change pour voir.

Sinon, à part ça, je ne vois pas l'intéret de faire une requête asynchrone pour ça...

A ta place je chargerais toutes les régions et tous les département par défaut dans tes deux listes.

Puis sur ta fonction change, tu met à jour la liste des département en javascript, seulement en les cachant (display: hidden). Bien plus rapide et ça évite des requêtes inutiles.

Tu peux toujours vérifier dans ton contrôleur après si la région et le département sélectionné correspondent au cas ou la personne fait des modifications dans le code HTML.

Salut, merci pour ta réponse.

En fait j'avais tester l'alerte ça marche donc le javascript est bien exécuté. Et les listes déroulantes sont bien chargées avec toutes les données au départ et la liste de département ne change pas malgré un changement sur la région.
Je comprend pas comment tu veux que je fasse un hidden sur les départements car normalement le javascript doit affiné automatiquement la liste de départements à chaque changement de région.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> $(document).ready(function(){ $("#annonce_Region_id").change( function() { $.post("/ads/departement", { region: $(this).val() }, alert("coucou"); function(data){ $("#annonce_Departement_id").html(data); }); }); }); </script>
Mais comme t'as dit j'ai doute sur

Code:

("#form_Region_id").change

ou

Code:

("#annonceForm_Region_id").change

Sachant que je fais appel à ce dernier depuis le template newSuccess.php :
Code:

1 2 3 4 5 <?php use_stylesheet('job.css') ?> <h1>New Ad</h1> <?php include_partial('form', array('form' => $form)) ?>
Je ne sais pas en fait quoi mettre dans le champs # pour récupérer la valeur de la liste déroulante. Pour moi le nom du formulaire c'est "form".

Merci de m'aider à trouver la bonne syntaxe.

21/12/2010, 03h09
Fused

Déjà, je suppose que tu utilise JQuery vu cette syntaxe ?

Code:

("#form_Region_id").change

Code:

<?php include_partial('form', array('form' => $form)) ?>

Cette ligne signifie que tu inclue une vue partiel dont le nom est "_form.php", tu lui passe en paramètre ton formulaire.

Edite donc ce fichier _form.php, il se trouve dans le même dossier que newSuccess.php que tu montre.

Si tu laisse le "echo $form" par défaut, tu ne contrôle pas grand chose à l'affichage et pour mettre des identifiants, je te laisse regarder la doc sur les forms pour plus d'indications.

Sinon utilise tout simplement Firebug ou bien affiche la source de ta page pour trouver l'identifiant de ta liste déroulante.

Merci pour ta réponse. Mais si tu regarde bien j'avais poster sur la réponse d'avant mon fichier _form :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
?php use_stylesheets_for_form($form) ?>
 
<?php use_javascript('jquery-1.4.4.min.js') ?> 
<?php use_javascript('ajax_reg.js') ?> 
 
<script language="javascript">
$(document).ready(function(){
  $("#form_Region_id").change( function() {
    $.post("/ads/departement", { region: $(this).val() },
    function(data)){
      $("#form_Departement_id").html(data);
    });
  });
});
</script>
 
<?php use_javascripts_for_form($form) ?>
<?php echo form_tag_for($form, '@ads') ?>  
  <table id="job_form">
    <tfoot>
      <tr>
        <td colspan="2">
          <input type="submit" value="Preview your ad" />
        </td>
      </tr>
    </tfoot>
    <tbody>
      <?php echo $form['Categorie_id']->renderRow() ?>
 
      <?php echo $form['Region_id']->renderRow() ?>
	  <?php echo $form['Departement_id']->renderRow() ?> 
 
	  <?php //echo $form['Region']['Name']->renderRow() ?> <?php //bug ?>
 
	  <?php echo $form['CodePostal']->renderRow() ?>
	  <?php echo $form['Ville']->renderRow() ?>
	  <?php echo $form['TypeAnnonce']->renderRow() ?>
	  <?php echo $form['TitreAnnonce']->renderRow() ?>
	  <?php echo $form['TexteAnnonce']->renderRow() ?>
	  <?php echo $form['Prix']->renderRow() ?>
	  <?php echo $form->renderHiddenFields() ?>
	  <?php foreach ($form['newPhotos'] as $photo): ?>
      <?php echo $photo['caption']->renderRow() ?>
      <?php echo $photo['filename']->renderRow() ?>
      <?php endforeach; ?>
 
    </tbody>
  </table>
</form>

En fait c'est ça la question que dois-je modifier ou dois mettre les identifiants des listes déroulantes ou du formulaire pour qu'il le reconnais en JQuery (#machin..).

Merci

21/12/2010, 20h20
fastone650

Merci beaucoup maintenant ça marche décidément fallait juste récupérer le bon ID.

Bonjour,
j'ai fait la mem chose que toi et j'ai pas de résultat (la 2ieme liste déroulante ne se change pas en fonction de la premiere:

voici mon script jquery appelé:

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
  $("#voiture_marque").change( function() {
	  $.post("/ajax", { marque: $(this).val() },
			    function(data){
			       // $("#voiture_model").empty();
		            $("#voiture_model").html(data);
			    });
 
  });
});

voici la route dans le fichier

Code:

1
2
3
4
routing.yml
ajax:
  url: /ajax
  param: { module: voiture, action: ajax }

et voici la fonction executeAjax du module voiture:

Code:

1
2
3
4
5
public function executeAjax(sfWebRequest $request)
  {
    $marque =         Doctrine::getTable('Marque')->findOneByIdMarque($request->getParameter('marque'));
    return $this->renderPartial('voiture/selectModele', array('marque' => $marque));	
  }

et finalement voici le partial selectModele appelé:

Code:

1
2
3
4
<option value=""></option>
<?php foreach($marque->getModel() as $modele): ?>
<option value="<?php echo $modele->getIdModel() ?>"><?php echo $modele->getLibelle() ?></option>
<?php endforeach; ?>

SVP aidez-moi!!