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

Auto-completion avec Zend_Dojo_Form_Element_FilteringSelect

Zend_Form PHP

Vue hybride

Discussions similaires

Partager

Partager