Auto-completion avec Zend_Dojo_Form_Element_FilteringSelect

**CinePhil** · 21/01/2011, 12h06

Bonjour,

Suite à cette discussion relatant mes déboires pour avoir les 36682 communes françaises dans une liste déroulante, j'essaie de mettre en oeuvre l'auto-complétion avec un Zend_Dojo_Form_Element_FilteringSelect, suivant ce tutoriel.

En dehors du fait que j'ai le même problème de mauvais rendu que dans cette autre discussion, j'ai trois autres problèmes :
1) Si l'adresse est déjà complète avec sa commune, à partir des données de l'étudiant en BDD, lors de l'affichage du formulaire, la FilteringSelect n'affiche pas la commune.

2) J'ai beau taper le début d'une commune existante ou cliquer sur le rectangle du bout de la zone, censé contenir la flèche pour dérouler la liste, rien ne se passe !

3) Si je tape le nom d'une commune existante en entier dans la zone et que je passe au champ suivant du formulaire, seules les trois premières lettres de la commune s'affichent !

Voici mon code...

Dans le formulaire Infosperso.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
        // Commune de résidence de l'étudiant
        $id_commune_residence = new Zend_Dojo_Form_Element_FilteringSelect('id_commune_residence');
        $id_commune_residence
            ->setLabel('Commune de résidence')
            ->setStoreId('communeStore')
            ->setStoreType('dojo.data.ItemFileReadStore')
            ->setStoreParams(array('url' => 'listecommunes'))
            ->setAttrib('searchAttr', 'cmn_nom')
            ->setRequired(true);

Dans le controlleur AccueiletudiantController.php, j'ai ajouté la fonction pour générer le Zend_Dojo_Data :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    /**
     * Prépare la source de données Dojo contenant la liste des communes françaises
     */
    public function listecommunes()
    {
        $db = Zend_Db_Table_Abstract::getDefaultAdapter();
        $listecommunes = $db->fetchPairs("
            SELECT cmn_id, cmn_nom 
            FROM tr_commune_cmn
        " );
        $data = new Zend_Dojo_Data('communes', $listecommunes);
        $this->_helper->autoCompleteDojo($data);
    }

Dans le layout.php, j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<head>
    <?php 
    echo $this->headMeta();
    echo $this->headTitle();
    echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/style.css');
    $this->JQuery()->addStyleSheet($this->baseUrl() . '/js/jquery/development-bundle/themes/smoothness/jquery-ui-1.8.7.custom.css');
    $this->JQuery()->setUiLocalPath($this->baseUrl() .'/js/jquery/development-bundle/ui/jquery-ui-1.8.7.custom.js');    
    echo $this->jQuery();
    echo $this->dojo();
    ?>
</head>

Et dans le bootstrap.php, j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    protected function _initJQuery()
    {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
    }
 
    protected function _initDojo()
    {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        Zend_Dojo::enableView($view);
        $view->addHelperPath('Zend/Dojo/View/Helper/','Zend_Dojo_View_Helper');
        $view 
            -> dojo()
            -> setLocalPath('/stagmas/public/js/dojo/dojo/dojo.js')
            -> addStyleSheetModule('dijit.themes.tundra')
            -> setDjConfigOption('usePlainJson',true)
            -> setDjConfigOption('parseOnLoad', true)
            -> enable();    
    }

Je suis preneur de toute bonne idée pour résoudre ce besoin pourtant basique : vérifier que la commune tapée par l'étudiant existe bien, et si possible le guider lors de sa saisie.

**manuscle** · 21/01/2011, 13h52

J'ai fait ceci sur un projet, un sélecteur de couleur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
        $colorName = new Zend_Dojo_Form_Element_ComboBox('color_name');
        $colorName->setAutocomplete(true)
                  ->setStoreId('colorsStore')
                  ->setStoreType('dojo.data.ItemFileReadStore')
                  ->setStoreParams(array('url' => '/catalog/color/colorstojson'))
                  ->setAttrib('searchAttr','name')
                  ->setRequired(true);
 
        $colorName->setLabel("Nom de la couleur :");
        $this->addElement($colorName);

Ensuite j'envoie le json via l'action /catalog/color/colorstojson:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
	public function colorstojsonAction()
	{
		$language = $this->_request->getParam('lg', $this->_config['resources']['locale']['default']);
 
		$colors = $this->tableColors->getCachedColors();
		$list = array();
 
		foreach ($colors as $color) {
			if ($color->language == $language) {
				$list[] = $color;
			}
		}
		$data = new Zend_Dojo_Data('id_color', $list);
		$this->_helper->autoCompleteDojo($data);
	}

**CinePhil** · 21/01/2011, 14h13

Quand je vois ton code, je subodore que j'ai un problème au niveau du chemin dans setStoreParams.
J'ai complété cette ligne ainsi dans le formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

->setStoreParams(array('url' => '/accueiletudiant/listecommunes'))

J'ai changé le nom de la fonction dans le contrôleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

public function listecommunesAction()

Mais pas de changement dans le comportement de mon formulaire.

À quoi correspond le chemin que tu indiques dans ton code : /catalog/color/colorstojson ?

Le chemin indiqué dans la barre d'adresse du navigateur pour accéder à la page est celui-ci :
localhost/stagmas/public/accueiletudiant/infosperso?infosperso=Compl%C3%A9ter+mes+informations+personnelles

**manuscle** · 21/01/2011, 14h18

ça correspond à l'url pour récupérer le json:

module: catalog
controller: color
action: tojson

J'utilise ZF en application modulaire, si ce n'est pas ton cas, tu n'as juste qu'à indiquer le controlleur et l'action

**CinePhil** · 21/01/2011, 14h20

Donc apparemment, j'ai correctement modifié mon code mais...

Dans le code source de la page, je vois ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
//<=!=[=C=D=A=T=A=[
dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dojo.parser");
dojo.addOnLoad(function() {
communeStore = new dojo.data.ItemFileReadStore({"url":"\/accueiletudiant\/listecommunes"});
 
});

C'est normal ces antislashes ajoutés au chemin ?

EDIT :
Je viens d'activer Firebug et j'y trouve ceci :

http://localhost/accueiletudiant/listecommunes 404 Not Found 515ms
Error: Unable to load /accueiletudiant/listecommunes status:404

Line 0

La dernière erreur apparaît 4 fois.

Apparemment, il essaie de trouver accueiletudiant/listecommunes directement à la racine de localhost !

**manuscle** · 21/01/2011, 14h33

oui c normal pourquoi ça ne fonctionne toujours pas?

EDIT:

accueiletudiant/listecommunes doit t'emmener au controleur accueiletudiant et action listecommunes....

tu as peux-etre aussi un un probleme de baseUrl.... je ne sais pas si ça se configure dans Dojo....
Sinon entre l'url complete pour voir

Moi je n'aime pas travailler avec des url genre localhost, ça génère toujours ce genre de probleme, surtout que en production ce n'est pas comme ça.
Je préfère utiliser un DNS local et me faire des domaines locaux du style monsite.dom

**CinePhil** · 21/01/2011, 14h55

J'ai effectivement essayé d'entrer l'url complète et maintenant je trouve cette erreur :

http://localhost/stagmas/public/accu.../listecommunes 500 Internal Server Error

<body>
<h1>An error occurred</h1>
<h2>Application error</h2>

<h3>Exception information:</h3>
<p>
<b>Message:</b> Only arrays and objects may be attached </p>

<h3>Stack trace:</h3>
<pre>#0 /var/www/html/stagmas/library/Zend/Dojo/Data.php(114): Zend_Dojo_Data->_normalizeItem('Aast', NULL)
#1 /var/www/html/stagmas/library/Zend/Dojo/Data.php(140): Zend_Dojo_Data->addItem('Aast')
#2 /var/www/html/stagmas/library/Zend/Dojo/Data.php(88): Zend_Dojo_Data->addItems(Array)
#3 /var/www/html/stagmas/library/Zend/Dojo/Data.php(72): Zend_Dojo_Data->setItems(Array)
#4 /var/www/html/stagmas/application/controllers/AccueiletudiantController.php(219): Zend_Dojo_Data->__construct('communes', Array)
#5 /var/www/html/stagmas/library/Zend/Controller/Action.php(513): AccueiletudiantController->listecommunesAction()
#6 /var/www/html/stagmas/library/Zend/Controller/Dispatcher/Standard.php(295): Zend_Controller_Action->dispatch('listecommunesAc...')
#7 /var/www/html/stagmas/library/Zend/Controller/Front.php(954): Zend_Controller_Dispatcher_Standard->dispatch(Object(Zend_Controller_Request_Http), Object(Zend_Controller_Response_Http))
#8 /var/www/html/stagmas/library/Zend/Application/Bootstrap/Bootstrap.php(97): Zend_Controller_Front->dispatch()
#9 /var/www/html/stagmas/library/Zend/Application.php(366): Zend_Application_Bootstrap_Bootstrap->run()
#10 /var/www/html/stagmas/public/index.php(26): Zend_Application->run()
#11 {main} </pre>

<h3>Request Parameters:</h3>
<pre>array (
'controller' => 'accueiletudiant',
'action' => 'listecommunes',
'module' => 'default',
) </pre>

</body>

Aast est effectivement la première commune française par ordre alphabétique. pourquoi est-elle apparemment associée à NULL alors que son cmn_id est 3 dans la BDD ?

je redonne le code de ma fonction listecommunesAction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
    public function listecommunesAction()
    {
    	$db = Zend_Db_Table_Abstract::getDefaultAdapter();
    	$listecommunes = $db->fetchPairs("
			SELECT cmn_id, cmn_nom 
			FROM tr_commune_cmn
		" );
    	$data = new Zend_Dojo_Data('communes', $listecommunes);
    	$this->_helper->autoCompleteDojo($data);
    }

Je viens de tester la requête dans phpMyAdmin et bien sûr elle fonctionne très bien.

**manuscle** · 21/01/2011, 15h04

Pour Zend_Dojo_Data, le fetchPairs ne va pas fonctionner car il attend un tableau de tableaux associatifs avec identifier.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$listecommunes = $db->fetchAll("
			SELECT cmn_id, cmn_nom 
			FROM tr_commune_cmn
		" );
 
$data = new Zend_Dojo_Data('cmn_id', $listecommunes);

**CinePhil** · 21/01/2011, 15h17

Avec fetchAll seul, j'obtiens ceci :

<h3>Exception information:</h3>
<p>
<b>Message:</b> Item must contain a column matching the currently set identifier </p>

<h3>Stack trace:</h3>
<pre>#0 /var/www/html/stagmas/library/Zend/Dojo/Data.php(114): Zend_Dojo_Data->_normalizeItem(Array, NULL)
#1 /var/www/html/stagmas/library/Zend/Dojo/Data.php(140): Zend_Dojo_Data->addItem(Array)
#2 /var/www/html/stagmas/library/Zend/Dojo/Data.php(88): Zend_Dojo_Data->addItems(Array)
#3 /var/www/html/stagmas/library/Zend/Dojo/Data.php(72): Zend_Dojo_Data->setItems(Array)
#4 /var/www/html/stagmas/application/controllers/AccueiletudiantController.php(220): Zend_Dojo_Data->__construct('communes', Array)
#5 /var/www/html/stagmas/library/Zend/Controller/Action.php(513): AccueiletudiantController->listecommunesAction()
#6 /var/www/html/stagmas/library/Zend/Controller/Dispatcher/Standard.php(295): Zend_Controller_Action->dispatch('listecommunesAc...')
#7 /var/www/html/stagmas/library/Zend/Controller/Front.php(954): Zend_Controller_Dispatcher_Standard->dispatch(Object(Zend_Controller_Request_Http), Object(Zend_Controller_Response_Http))
#8 /var/www/html/stagmas/library/Zend/Application/Bootstrap/Bootstrap.php(97): Zend_Controller_Front->dispatch()
#9 /var/www/html/stagmas/library/Zend/Application.php(366): Zend_Application_Bootstrap_Bootstrap->run()
#10 /var/www/html/stagmas/public/index.php(26): Zend_Application->run()
#11 {main} </pre>

<h3>Request Parameters:</h3>
<pre>array (
'controller' => 'accueiletudiant',
'action' => 'listecommunes',
'module' => 'default',
) </pre>

</body>

J'ai vu aussi par ailleurs qu'il faut un toArray() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    public function listecommunesAction()
    {
        $db = Zend_Db_Table_Abstract::getDefaultAdapter();
        $listecommunes = $db->fetchAll("
            SELECT cmn_id, cmn_nom 
            FROM tr_commune_cmn
        " );
        $tabcommunes = $listecommunes->toArray();
        $data = new Zend_Dojo_Data('communes', $tabcommunes);
        $this->_helper->autoCompleteDojo($data);
    }

Mais ce n'est pas mieux ! Maintenant j'obtiens ceci dans Firebug :

Call to a member function toArray() on a non-object

**manuscle** · 21/01/2011, 15h22

Pour le toArray(), ça dépend comment ton fetchall() te renvoie le resultat, normalement si tu touche rien a la config il doit te renvoyer un tableau.... au pire un debug te diras ce que tu obtiens.

En ce qui concerne le message d'erreur, c'est parce que tu as mal recopié mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$data = new Zend_Dojo_Data('cmn_id', $listecommunes);

**CinePhil** · 21/01/2011, 15h52

J'ai fait cette correction mais maintenant ça me bloque carrément Firefox !
La page s'affiche, Firebug n'affiche pas d'erreur, le dernier message est le chargement de listecommunes, Firefox dit dans la barre d'état qu'il a terminé, mais je ne peux rien faire sur la page, pas même poser le curseur dans une zone de texte !
Et ça bloque toutes les fenêtres Firefox !

Vu qu'apparemment c'est le volume de données qui pose problème, y aurait-il un moyen de ne rien charger au chargement de la page et de ne commencer à rapatrier une liste de communes que lorsque l'utilisateur tape le premier caractère dans la zone de texte ?

En gros je m'orienterais non pas vers une filteringselect mais une simple zone de texte à auto-complétion.

**manuscle** · 21/01/2011, 16h13

T'es-t-il possible de limiter le nombre de résultat à une centaine de communes par exemple juste pour tester que le combobox fonctionne bien?
Comme ça au moins tu seras sûr que ça viens de là.

Ensuite, tu teste avec la totalité des communes et si c'est trop long ou que ça plante c'est qu'il va falloir trouver un autre moyen en javascript.
Tu fait un attribut onkeyup="updateCommunes()" sur ton combobox et la fonction updatecommune fait une requete et repeuple en données le combobox.

Je ne l'ai jamais fait comme ça donc je ne peux pas te dire si c'est une bonne solution ou pas

**CinePhil** · 21/01/2011, 16h48

Ça fonctionne mais à partir de 10000 communes, ça commence à ramer.

J'ai trouvé quelque part la solution au problème de rendu en ajoutant dans le layout class="tundra" à la balise <body>.

J'ai aussi maintenant la commune enregistrée en BDD qui s'affiche.

Je ne sais pas si c'est dû à l'ajout de la classe tundra ; maintenant ça fonctionne aussi avec toutes les communes mais c'est trop long et Firefox envoie des alertes :

Un script sur cette page est peut-être occupé ou ne répond plus. Vous pouvez arrêter le script maintenant, l'ouvrir dans le débogueur ou le laisser continuer.

Script : http://localhost/stagmas/public/js/d...tstrap.js:1363

Si on clique sur Continuer, il va au bout mais c'est quand même trop long.

J'en arrive quand même à mon idée d'auto-complétion seulement quand l'étudiant commence à taper une lettre.
Il y aurait au maximum 6008 communes chargées avec la lettre S.

Je vais explorer queryReadStore à la place de itemFileReadStore.

Auto-completion avec Zend_Dojo_Form_Element_FilteringSelect

Zend_Form PHP

Discussions similaires

Partager

Partager