[RESOLU] JQuery auto submit

04 févr. 2011, 12:44

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

04 févr. 2011, 13:22

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();
   }
});

04 févr. 2011, 13:57

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

04 févr. 2011, 14:08

et si tu essayes ceci:

->setJQueryParams(array('change' => "alert('change')");

Est-ce que ça donne quelque chose?

04 févr. 2011, 14:11

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).

Code : Tout sélectionner

->setJQueryParam('change', "alert('change')")

04 févr. 2011, 14:14

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')"
    )
);

04 févr. 2011, 14:24

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.

04 févr. 2011, 14:28

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:

Code : Tout sélectionner

$("#autoComplete").autocomplete({"change":alert('change')

(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?

04 févr. 2011, 14:31

Visiblement on est pas les seuls à se poser la question : http://www.z-f.fr/forum/viewtopic.php?id=5654

04 févr. 2011, 14:33

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 ?

04 févr. 2011, 14:36

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...

04 févr. 2011, 14:43

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">&#160;</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.

04 févr. 2011, 14:50

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

04 févr. 2011, 14:57

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.

04 févr. 2011, 15:05

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...

[RESOLU] JQuery auto submit

Qui est en ligne