[1.0.1] Listes liées [Résolu]

[FredPont]

Je voudrais mettre en place sur mon applis un système de liste liée comme présenté sur le tuto de siddh http://siddh.developpez.com/articles/ajax/
sur une architecture MVC.

J'ai mit la partie javascript dans un fichier .js

j'ai un controleur formController.php :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
public function afficheformAction {
 
//code...
 
$this->render(monformulaire)
 
 
}
public function ajaxAction {
//code...
$this->render(liste2)
}

Voici mes vues
monformulaire.phtml

Code :

1
2
3
4
5
6
7
8
...
<select id="liste1" name="liste1" onChange='go()'>
	  	  <option value="1" >1</option>
	  	  <option value="2" >2</option>
</select>
<select id="liste2" name="liste2">
</select>
...

liste2.phtml

Code :

1
2
3
4
5
6
7
8
<?php
	  foreach($this->list2 as $list2)
	  {
	  ?>
	  <option value="<?php echo $list2->id  ?>"><?php echo $this->escape($list2->descr) ?></option>
	  <?php
	  }
	  ?>

J'ai un problème au niveau de cette ligne dans le .js :

Code :

1
2
// Ici on va voir comment faire du post
xhr.open("POST","quoi mettre ici",true);

Je ne sais pas trop vers quelle url redirigée, j'ai essayé /form/ajax mais ça ne donne rien.

Je débute avec ce framework et je ne connais pas grand chose en Javascript et ajax, donc je suis un peu perdu là

[Baptiste Wicht]

J'ai été confronté à peu près au même problème que toi. Je devais aussi intégrer de l'Ajax et du Zend Framework. J'ai pas trouvé de solution satisfaisante alors, ce que j'ai fait, c'est créer un dossier Ajax au niveau d'application. Et ensuite, j'ai mis plusieurs fichiers qui traitent la demande Ajax et me renvoient le XML.

Tu ne pourras pas faire comme tu l'as écrit dans ton code. En effet, tu ne rafraichis pas la page, donc tu ne peux pas faire un nouveau render. Tu dois récupérer du XML depuis une page PHP et ensuite tu dois modifier l'affichage avec le code Javascript.

Je me suis fait un fichier Ajax.php qu'inclue tous les autres fichiers me générant du XML pour Ajax, dans lequel je fais à peu près la même chose que dans index.php, c'est à dire que je charge la base de données, les include et tout le bazar. Comme ça, dans mes fichiers PHP Ajax je peux utiliser presque tout ce qui est Zend.

[yannux]

Peut être faire une action du genre ajaxAction dans ton controller et désactivé le rendu automatique...

j'ai fait ça pour un test de retour en JSON :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	public function jsonListAction(){
 
		Zend_Loader::loadClass('Zend_Json');
 
		$this->_helper->removeHelper('viewRenderer');
		$data= $this->_user->fetchAll()->toArray();
 
        $responseJSON = Zend_Json::encode($data);
 
		$this->getResponse()->setHeader('Content-Type', 'text/plain');
        $this->getResponse()->setBody($responseJSON);
 
	}

[FredPont]

Merci pour les réponses.

J'ai toujours un probleme pour appeler mon code depuis le javascript peut être qu'avec mon arborescence vous aller pouvoir m'aider :

MonApplis\
----------\application\
---------------------\controllers\formController.php
---------------------\inc\ajax.php
---------------------\views\
----------------------------\script\mesvues
----------\html\
---------------\js\listeLiee.js
---------------\index.php

l'url de ma page où je veux placer les deux listes est http://monserveur/html/form/afficheform/

si j'ai bien comprit je doit apeller le script ajax.php depuis ma fonction js :

Code :

xhr.open("POST","????????ajax.php",true);

J'ai fait pas mal d'essai mais là je nage complètement

[yannux]

En gardant la structure normal du MVC, tu devrais t'en sortir avec mon post au dessus....

[Baptiste Wicht]

Tu peux essayer ça :

Code :

xhr.open("POST","../../application/inc/ajax.php",true);

Sinon, il faudra mettre le chemin complet.

[FredPont]

Merci en effet ce chemin fonctionne, j'avais également tester le chemin complet mais en partant de /var/www/... mais ça ne passais pas.

Par contre pour ton post yannux je ne comprend pas vraiment ce que fait ta fonction ni comment elle interagit avec le javascript.

Désolé je suis vraiment mauvais en JS

[yannux]

Apperrement tu veux faire de l'ajax.
Donc le script que tu va appeler depuis ton javascript, ne doit te renvoyer que les données/balises html que tu veux, et pas faire le rendu de la vue du MCV.

Et donc la ligne

Code :

1
2
 
$this->_helper->removeHelper('viewRenderer');

te permet de désactiver ce rendu automatique gérer par le zend framework. Ainsi tu retourne juste les données donc ton javascript à besoin...


Avantage : tu garde la sctructure du MVC, et de la cohérence dans ton code...

[FredPont]

Ok donc si je comprend bien, ces lignes envoient les données à ma page

Code :

1
2
3
4
5
 
$responseJSON = Zend_Json::encode($data);
 
	$this->getResponse()->setHeader('Content-Type', 'text/plain');
        $this->getResponse()->setBody($responseJSON);

Comment je récupère ces données au niveau de javascript ?

Voila le code ça va ptêtre être plus clair :

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
function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('liste2').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","form/jsonList",true);
 
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('liste1');
				id = sel.options[sel.selectedIndex].value;
				xhr.send("idUnit="+id);
			}

[yannux]

Code :

1
2
 
$responseJSON = Zend_Json::encode($data);

Ca sa encode mes données au format JSON. (je pense pas que ça soit utile pour ton cas précis).


Ce qui va plus t'interessé c'est ça :

Code :

1
2
3
 
	$this->getResponse()->setHeader('Content-Type', 'text/plain');
        $this->getResponse()->setBody($_tes_donnes_en_renvoyer_a_ton_javascript);

[FredPont]

Par contre je ne vois toujours pas comment (et ou) on récupère les infos envoyés.

Ou alors c'est le javascript que j'utilise qui ne correspond pas à ta méthode.

Aurais tu un ptit exemple avec ta fonction une vue et un JS.

[yannux]

Oui surement.
Moi je voulais juste te montrer ce qu'il était capable de faire.
Comment désactivé le rendu automatique de la vue pour faire de l'ajax quoi....

[FredPont]

Ok, en tout cas je te remercie pour tes conseils qui me serviront quand je métriserais un peu mieux ce qu'il est possible de faire avec AJAX.