Page 1 sur 2
[RESOLU] JQuery auto submit
Posté : 04 févr. 2011, 12:44
par diday
Bonjour,
Je suis un novice complet (j'ai débuté le php il y a quinze jours et appris l'existence de l'ajax/java hier, quand j'ai découvert JQuery) et je développe dans le cadre d'un stage une application sur le Framework Zend. J'ai eu besoin d'utiliser la fonction
autocompletede JQuery. Juste que là tout va bien, tout fonctionne parfaitement.
Seulement j'aimerai que l'utilisateur n'ait pas à appuyer sur entrée plusieurs, et qu'une sélection dans la liste fasse office de submit. Il y a plusieurs events et options mais je n'y comprends rien.
Merci de votre attention,
--Simon
Re: JQuery auto submit
Posté : 04 févr. 2011, 13:22
par jojolapine
Bonjour,
il faut utiliser l'event "select" ou "change" (à toi de faire tes tests):
Code : Tout sélectionner
$( ".selector" ).autocomplete({
select: function(event, ui) {
alert('event select');
//$('#le_formulaire').submit();
},
change: function(event, ui) {
alert('event change');
//$('#le_formulaire').submit();
}
});
Re: JQuery auto submit
Posté : 04 févr. 2011, 13:57
par diday
Merci de votre aide.
Malheureusement, je ne comprend pas où je dois placer ces paramètres. J'ai tenté dans le header de la vue en tant que script mais sans succès.
J'appelle le plugin autocomplete dans mon controller (comme j'ai dit plus haut, j'utilise zend):
Code : Tout sélectionner
$this->view->autocompleteElement = new ZendX_JQuery_Form_Element_AutoComplete('autoComplete');
$this->view->autocompleteElement->setJQueryParam('data', $liste_noclients)
->setAttrib('size',10,10,10)
->setAttrib('limit',10);
$noclient = $this->_request->getParam('autoComplete');
Et voici la vue:
Code : Tout sélectionner
<FORM>
<br />
<?php
echo $this->autocompleteElement;
?>
</FORM>
Du coup je suppose que c'est dans le controller que je dois placer les paramètres, n'est-ce pas? Dans ce cas, comment les formater?
J'ai essayé :
->setAttrib('change',submit()); (de même avec select et setJQueryParam) mais il me dit que la fonction submit() n'existe pas et fait une erreur fatale.
Désolé d'abuser de votre temps,
--Simon
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:08
par jojolapine
et si tu essayes ceci:
->setJQueryParams(array('change' => "alert('change')");
Est-ce que ça donne quelque chose?
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:11
par diday
Cela rend une erreur:
Parse error: syntax error, unexpected T_OBJECT_OPERATOR
J'ai essayé avec setJQueryParam sans le s et sans succès non plus. :/
--edit: et sans le array l'erreur disparait mais ça ne marche toujours pas (l'autocomplete fonctionne comme avant).
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:14
par jojolapine
Le problème c'est que je ne trouve aucune doc sur ce module Zend... :/
Tu pourrais nous montrer également le source généré? (ctrl+u sous firefox)
EDIT: j'avais fait une faute de frappe, il manque une parenthèse à priori
->setJQueryParams(
array(
'change' => "alert('change')"
)
);
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:24
par diday
Oui j'avais corrigé la parenthèse mais toujours pas de résultat (pas d'erreur non plus).
Voici la source générée (tronquée de tout ce qui n'est pas pertinent):
Code : Tout sélectionner
<link href="/css/css_1024.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/redmond/jquery-ui-1.8.9.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#autoComplete").autocomplete({"change":"alert('change')","source":["..."]});
});
On a bien le change, alert tout ça à priori mais ça ne fonctionne pas. J'ai beau cliquer sur la sélection je dois quand même submit à la main en tapant entrée.
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:28
par jojolapine
Alors la source semble mal générée..
La faute au plugin ou à notre appel... aucune idée!
En fait pour que notre alert s'affiche, il faudrait que la source ressemble à ceci:
(Plus de guillemets autour de la valeur de change...)
Peut-être qu'il existe un paramètre pour indiquer de ne pas en mettre dans le module Zend?
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:31
par jojolapine
Visiblement on est pas les seuls à se poser la question :
http://www.z-f.fr/forum/viewtopic.php?id=5654
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:33
par diday
Cela dit, sa conclusion est intéressante :
(Evidement je pourrai passer le javascript directement à l'intérieur de ma vue, mais je ne trouve pas ça très élégant)
Seulement, ce n'est pas évident pour moi. Je me fiche de l'élégance je veux que ça marche: comment faire ça ?

Re: JQuery auto submit
Posté : 04 févr. 2011, 14:36
par jojolapine
Je sais pas trop comment marche Zend mais il faudrait te débrouiller pour en plus de tout ton code actuel rajouter ceci dans la vue (source générée quoi

)
Code : Tout sélectionner
<script type="text/javascript">
$("#autoComplete").autocomplete({
select: function(event, ui) {
alert('event select');
//$('#le_formulaire').submit();
},
change: function(event, ui) {
alert('event change');
//$('#le_formulaire').submit();
}
});
</script>
Normalement tu devrais avoir une/des alerte(s) à l'écran, on décidera ensuite si tu souhaites garder l'évènement select ou change...
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:43
par diday
C'est là que je bloque, j'avais déjà essayé après ta première réponse mais je ne sais pas où intégrer ce script.
Ici, par exemple:
Code : Tout sélectionner
<script type="text/javascript">
$("autoComplete").autocomplete({
select: function(event, ui) {
alert('event select');
$('autoComplete').submit();
},
change: function(event, ui) {
alert('event change');
('autoComplete').submit();
}
});
</script>
</header>
<div>
<div class="demo">
<br />
<p style="text-indent:3em"><strong>Rechercher:</strong></p>
<FORM>
<br />
<dt id="autoComplete-label"> </dt>
<dd>
<input type="text" name="autoComplete" id="autoComplete" value="" size="10" limit="10" /></dd> </FORM>
Ai-je mis les noms corrects aux bons endroit par exemple? Le nom et l'id du formulaire est autoComplete dans le rendu l'appel au formulaire est : $this->autocompleteElement.
--edit: bien entendu, je n'ai aucune alerte à l'écran.
Re: JQuery auto submit
Posté : 04 févr. 2011, 14:50
par jojolapine
Ahem oups... encore un oubli de ma part :-°
L'endroit est bon par contre il faut ajouter ceci:
<script type="text/javascript">
$(document).ready(function(){
$("autoComplete").autocomplete({
select: function(event, ui) {
alert('event select');
$('autoComplete').submit();
},
change: function(event, ui) {
alert('event change');
('autoComplete').submit();
}
});
});
</script>
Et j'en profite pour t'encourage à regarder la console d'erreur javascript ou encore mieux : firebug

Re: JQuery auto submit
Posté : 04 févr. 2011, 14:57
par diday
Bon je suis désolé de revenir sur la première idée du controller mais j'ai trouvé comment éviter les quotes dans le setJQueryParams.
Code : Tout sélectionner
->setJQueryParams( array("select" => new Zend_Json_Expr("function() { alert ('select'); }") ) )
Du coup j'ai une alerte qui s'affiche avec marqué "select" dedans. \o/
Ça ne marche pas avec "change" (en premier paramètre bien sûr, dans l'alerte ça reste un texte comme un autre).
Nouvelle question: comment transformer ça en submit ?
---
Comme j'ai dit je découvre la programmation web (je viens du C tout con) et rien que ton astuce de regarder le code de la page me permet de comprendre pas mal de petits trucs de Zend.
J'ai firebug mais je ne sais pas encore l'utiliser.
Re: JQuery auto submit
Posté : 04 févr. 2011, 15:05
par jojolapine
Ah très bien

ça sera tout de même plus propre (tu pourrais même aller répondre au pauvre bonhomme sur l'autre forum

)
Alors après pour envoyer ton submit...
Il faut que tu sélectionne l'élément form correspondant afin de lui donner "l'ordre" de se soumettre (de quoi on parle là

)
Donc montre nous la source générée de ton formulaire...