Consultez la FAQ sur le ZF avant de poster une question
Vous n'êtes pas identifié.
Pages: 1 2
Bonjour,
j'ai l'habitude de faire ça en Ajax, et c'est tres simple à mettre en oeuvre lorsque l'on a compris, mais depuis que je me suis mis à zf j'ai perdu pas mal de repères.
Je veux faire un truc très simple; mes selects correspondent aux données de 2 tables, lorsque l'on fait une selection sur le premier select (onChange() donc), je voudrais utiliser la valeur de ce select pour récupérer les valeurs correspondantes dans la seconde table.
Sauf que je ne sais pas du tout par quoi commencer; et je suis bien paumé. Est ce que je dois passer par Dojo ou prototype pour faire ça? (je n'ai jamais utilisé ces ceux outils)
j'ai lu beaucoup de doc, mais je n'ai pas trouvé d'exemple. Est ce que qq'un pourrait éclairer ma lanterne?
Merci d'avance
(un débutant)
Dernière modification par juli3n (18-09-2008 17:51:40)
Hors ligne
Utilise tu une bibliothèque particulière pour tes développements en ajax ? Si c'est le cas, par déjà avec celle là pour faire ce que tu veux faire.
Moi j'utilise JQuery et je procéderai de cette façon :
Lors de l'éxécution de ton évènement onChange(), tu lance une requete ajax avec la valeur de la sélection en paramètre.
Moi mes requetes ajax sont envoyées à un controller nommé ... Ajax
Dans le controleur, j'ai mon action qui récupère la valeur de la sélection, qui va chercher les résultats correspondants, et qui formate la réponse en liste déroulante.
Après, jquery me facilite bien la vie pour détecter le onchange, pour lancer l'ajax, pour récupérer la valeur de retour et pour insérer le retour où il faut.
La partie la plus dure est du côté du JS, à toi de voir comment la monter avec ce que tu sais déjà faire.
Hors ligne
Moi aussi j'ai l'habitude Jquery
Je rajoute dans le controller qui apelle la form un appelle de ce type:
$this->view->appenddFile($this->view->baseUrl() .'/js/unfichier.js');
Ca va rajouter l'include à un fichier JS.
Je n'inclus jamais aucun code JS dans mes vues.
En jquery, il devient alors à partir de ce fichier de binder l'element voulu sur l'evement onchange.
$("#monselect").bind('change', ...
Par contre, je n'utilise pas de controller "Ajax", mais j'utilise les controller comme si c'était 'normal'.
AjaxContext fait le travaille (8.8.4.3 de la doc de Zend)
Par exemple, si j'ai un controller User et que ce controller afficher la liste des utilisateurs dans une vue, je le réutilise.
Hors ligne
Je n'utilise pas de librairie; j'ai pour habitude de faire à la mano ... mais peut-etre est-il temps de m'interesser à jQuery ou autre
est-on obligé de passer par une librairie pour faire ça?
Hors ligne
Non, tu n'es pas obligé, tu es libre
Hors ligne
Merci pour vos réponses!
J'avoue etre perdu dans tout ça
Qu'est ce qui est préconisé par les utilisateurs expérimentés?
Si vous me conseillez une librairie, ce serait laquelle? (sachant que son utilisation sera tres limitée, genre uniquement les selects liés dans un 1er temps). Dur dur du trouver des exemples en tout cas.
Si je n'utilise pas, comment inclure du code javacript dans mes pages, ca se passe dans la view? (je n'ai pas encore abordé l'inclusion de js maison dans les pages)
Hors ligne
ok j'ai relu tout ça tête reposée ce matin, je vais tenter avec jquery.
Norky> heu tes explications ne sont pas très claires?
Est ce que vous auriez des petits bouts de code pour m'aider à démarrer?
edit: j'ai trouvé ce plugin http://remysharp.com/2007/09/18/auto-po … ect-boxes/
Ca peut m'aider ce genre de plugin our c'est compliqué à adapter au modèle MVC?
Dernière modification par juli3n (17-09-2008 07:34:29)
Hors ligne
Déjà il faut comprendre les bases de JQuery.
JQuery te permet "d'utiliser" les éléments en les appelant par leur ID ou leur class.
$('.test').click(function(){ alert('plop'); };
Ce bout de code dit tout simple : "tu cliques sur n'importe quel élément dont la class est "test" et tu aura une alert 'plop'.
Remplace le . par un # pour les ID.
En partant de la dessus et de http://jquery.com/, tu peux commencer à comprendre comment fonctionne JQuery.
Je viens de me rendre compte de la première intervention de nORKy et elle est très intéressante. J'ai la mauvaise habitude de mettre des appels de JS dans les vues, ce qui est pas propre car dans mon structure.xml, j'ai une vingtaine de fichiers JS appelés alors que certains ne sont utilisés que sur certaines pages.
Je vais aussi tester le AjaxContext.
La vie de développeur est un éternel apprentissage... et j'adore ça !
Hors ligne
Un exemple en mootools (ca doit etre le meme enchainement en jquery, dojo, gwt, etc) :
si le 1er Select est touché (focus changé = evenement js onBlur) on fait une requete au serveur pour maj le second Select
window.addEvent('domready', function() { var input1= $('premierSelect'); var input2= $('deuxiemeSelect'); // Si ca bouge on fait qque chose input1.addEvent('blur', function() { valeur = input1.get('value').trim(); //recupere la valeur vname= input1.getSelected().get('name'); //recupere valeur de l'attribut name //uri vers objet a lire var url = 'html/' + controller + '/read/id/' + idObjet + '/' + attributObjet + '/' + valeur + '/format/ajax'; var request = new Request({ url:url, method:'get', onComplete: function( reponse ) { var myHash= $H(reponse); //on fait un tableau associatif myHash.each( function(cle, valeur) { //on ajoute des <OPTION ../> au 2eme Select input2.adopt( new Element('option', {name: cle, "label": cle, value: valeur, html: cle} ) ); }); } }).send(); }); });
Hors ligne
merci neojick pour ta réponse, j'arrive bien à declencher la fonction js, mais ensuite je ne sais pas si je dois appeler un fichier .php qui va interroger ma db (ou appeler une methode d'un objet de type modèle)et renvoyer un xml qui sera traité par un autre js sur ma page, s'il faut passer par json etc ... tu as tout à fait raison, l'apprentissage est éternel
Hors ligne
Pour exemple, voici la fonction js sur mon site qui envoie le vote en ajax d'un sondage (je ne dis pas qu'elle est codée à la perfection) :
function sendReponse(id){ $("#sondageContent").html('<p style="text-align:center;padding-top:20px;"><img src="/design/images/site/ajax-loader.gif" /></p>'); $.ajax({ type: "POST", url: "/ajax/savereponse", data : "reponse=" + id, success: function(returnData){ //Envoi d'un cookie indiquant que le sondage a été fait par l'utilisateur var date = new Date(); date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); $.cookie(cookieName, returnData, { path: '/', expires: date }); //réinitiation du sondage $(sondage); } }); return false; }
Tu note dedans la ligne url: "/ajax/savereponse" qui signifie donc que j'appelle la fonction savereponse dans le controlleur Ajax.
Ce n'est certainement pas la meilleure des solutions puisque plus haut, nORKy parle de AjaxContext.
Mais ma solution marche, alors je m'en contente pour l'instant.
Le returnData est ce qui est retourné par PHP, soit un echo (bahhhhhhhhhh) soit le contenu de la vue associée à la fonction.
Hors ligne
L'utilité de AjaxContext est d'utilisé son controlleur pour plusieurs type de vue.
Par exemple, pour le sondage, imaginons qu'on a un controller Sondage et une action savereponse.
Si le client n'a pas javascript :
- le formulaire fait son poste normalement et apelle sondage/saveresponse. Cette action place par exempel $this->view->results et la vue s'occupe de l'affichage
Si le client à javascript
- le javascript appel aussi sondage/saveresponse, mais grâce à ajaxContext, le viewrenderer/layouts sont desactivés et ajaxcontext va seralisé ce qu'il y a dans view et le résultat est envoyé comme ca, et donc le script javascript va recevoir le résultat
Hors ligne
Hello,
c'est pas super top comme solution d'après ce vous dites ci dessus, mais je me rapproche petit à petit. Pouvez vous m'aider à bien comprendre comment bien faire? (ahhh la frustration du developpeur qui comprend pas un truc ... on passe tous par là ) merci beaucoup pour votre aide, à chaque réponse je comprend un peu plus!
j'ai pompé un peu de code sur ce topic: http://www.z-f.fr/forum/viewtopic.php?id=1178
mes bouts de code: j'ai un select assureur_id, et je souhaite mettre à jour un select contrat_id (à chaque assureur correspond une liste de contrats)
mon fichier .pthml (je sais, je commence mal, j'intègre du .js dans le view, mais je ne sais pas comment faire autrement pour le moment)
<?php echo $this->form ;?> <p style="clear:both">Retour à la <a href="<?php echo $this->url(array('controller'=>'actualite', 'action'=>'index'));?>">gestion des actualités</a></p> <script type="text/javascript"> $("select#assureur_id").change(function(){ id = $("select#assureur_id").val(); $.ajax({ type: "POST", url: "/contrat/getcontratbyassureurid/id/"+id, dataType: "json", success: function(response){ var obj = document.getElementById('contrat_id'); var optionData = response; //obj.options.length = null; i=1; for (key in response) { alert('cle:' + key + ' - valeur: ' + optionData[key]); obj.options[i] = new Option(optionData[key],key); i++; } } }); return false; }); </script>
mon controlleur
function getcontratbyassureuridAction() { if ($this->_request->isPost()) { $assureur_id = $this->_request->getParam('id'); $this->_helper->layout->disableLayout(); $this->_helper->viewRenderer->setNoRender(true); $this->_helper->viewRenderer->setNeverRender(true); $contrat = new Contrats(); $list=$contrat->getContratById($assureur_id); $this->_helper->json($list); } }
mon modèle
public function getContratById($id) { $select = $this->select (); $select->from ( $this ) ->where ( 'assureur_id = '.$id) ; $rows=$this->fetchAll ( $select ); $options = array(); foreach ($rows as $row) { $options[$row->id] = $row->name; } return $options; }
La liste des contrats est bien remplie quand on choisit un contrat, seul hic, j'ai un message d'erreur
'valeurdeloptionchoisie' was not found in the haystack
Hors ligne
si j'ajoute
alert('cle:' + key + ' - valeur: ' + optionData[key]);
avant le remplissage des $options, ça a l'air bon (sauf que j'ai les caractères accentués qui disparaissent, ça doit etre un prob de charset je suppose).
ca me donne genre cle:7 - valeur: mon contrat
Le seul truc c'est quand ca passe par la validation ca génère le msg d'erreur que je ne comprend pas
Hors ligne
Tente de remplacer :
url: "/contrat/getcontratbyassureurid/id/"+id,
par
url: "/contrat/getcontratbyassureurid, data : "id=" + id,
Hors ligne
Hello,
le paramètre est bien passé, le select est bien rempli, mais j'ai toujours le même message d'erreur "valeur was not found in the haystack.
c'est apparemment le "key" qu'il n'aime pas
alert('cle:' + key + ' - valeur: ' + optionData[key]); obj.options[i] = new Option(optionData[key],key);
l'alert me donne la bonne valeur, mais new Option(optionData[key],key) ne passe pas bien apparemment. J'ai testé qq bidouilles mais c'est vraiment étrange ... si je change en base ma key (int) en varchar, et que je fais (en dur) un
new Option(optionData[key], 'blablabla')
ça passe ... mais si je fais un
new Option(optionData[key],'1');
j'ai le meme message "not found in haystack"
Any idea? J'ai trouvé ça assez facilement: http://framework.zend.com/issues/browse/ZF-4307 vous croyez que c'est un bug?
Hors ligne
Ok punaise ça a pas été facile mais j'ai trouvé ça:
http://www.nabble.com/Problem-with-Form … 14666.html
Hors ligne
Yes ca fonctionne
le seul truc que je n'aime pas vraiment, c'est que mon code js est sur ma vue.phtml
j'ai essayé d'utiliser
$this->view->headScript()->appendFile($this->view->baseUrl() .'/js/monscript.js');
mais ca passait pas, il faudrait que le js soit chargé un peu plus tard ...
(j'ai pas encore saisi le ajaxContext mais bon ça fonctionne... et c'est pas pour du grand public alors ca va)
Hors ligne
Je crée un fichier updatecontratid contenant
<script type="text/javascript">
$("select#assureur_id").change(function(){
id = $("select#assureur_id").val();
$.ajax({
type: "POST",
url: "/contrat/getcontratbyassureurid",
data : "id=" + id,
dataType: "json",
success: function(response){
var obj = document.getElementById('contrat_id');
var optionData = response;
//alert(response);
//alert(optionData);
obj.options.length = null;
i=1;
obj.options[0] = new Option('aucun', 0, false);
for (key in response) {
//alert('valeur:' + response[key]);
//alert('cle:' + key + ' - valeur: ' + optionData[key]);
obj.options[i] = new Option(optionData[key], key);
i++;
}
}
});
return false;
});
</script>
dans mon controleur j'ajoute
$this->view->headScript()->appendFile($this->view->baseUrl() .'/js/updatecontratid.js');
Le onChange du select ( $("select#assureur_id").change )n'est pas détecté, rien ne se passe
Hors ligne
Normal.
Tu dois mettre le tout dans une fonction
Exemple :
function nomFonction(){ $("select#assureur_id").change(function(){ id = $("select#assureur_id").val(); $.ajax({ type: "POST", url: "/contrat/getcontratbyassureurid", data : "id=" + id, dataType: "json", success: function(response){ var obj = document.getElementById('contrat_id'); var optionData = response; //alert(response); //alert(optionData); obj.options.length = null; i=1; obj.options[0] = new Option('aucun', 0, false); for (key in response) { //alert('valeur:' + response[key]); //alert('cle:' + key + ' - valeur: ' + optionData[key]); obj.options[i] = new Option(optionData[key], key); i++; } } }); return false; }); } (document).ready(function(){ nomFonction(); }
Ainsi, la fonction sera "activée" une fois le document chargé et attendra sagement l'évenement "change" sur l'élément indiqué.
Hors ligne
Pages: 1 2