Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 17-02-2009 17:14:23

yannj2002
Nouveau membre
Date d'inscription: 17-02-2009
Messages: 2

Combobox Dynamique

Bonjour, j'ai réussi à faire un formulaire avec une combobox. Maintenant j'aimerais que quand mon utilisateur clique sur un bouton présent sur cette page, que cela ajoute dynamiquement une valeur dans la liste, en utilisant ajax car la valeur viendra du serveur.

Merci beaucoup pour votre aide.

Hors ligne

 

#2 19-02-2009 12:57:25

yannj2002
Nouveau membre
Date d'inscription: 17-02-2009
Messages: 2

Re: Combobox Dynamique

Voici la réponse à ma propre question, cela intéresse peut-être quelqu'un
Situation : Une liste de ville est présente sur la page et lorsque l'utilisateur clique sur un pop-up s'affiche et lui permet d'ajouter une ville dans la liste.

Code de définition de la liste et du bouton permettant d'afficher le pop-up
{{{
$this->addElement('ComboBox',
                  'comboboxjson',
                  array('label' => 'Villes avec JSON',
                        'value' => '0',
                        'autocomplete' => false,));

$this->addElement( 'Button',
                   'dialog2',
                   array('required'   => false,
                         'ignore'     => true,
                         'label'      => 'Ajouter une ville dans la liste',
                         'onclick'    => "dijit.byId('addCityForm').show()"));

}}}

Code du formulaire views/scripts/main/index.phtml
{{{
<div dojoType="dijit.Dialog" id="addCityForm" title="First Dialog" execute="updateCityListJson(arguments[0].name,arguments[0].npa);">
    <table>
        <tr>
        <td><label for="name">Nom Ville: </label></td>
                <td><input dojoType="dijit.form.TextBox" type="textbox" name="name"></td>
        </tr>
        <tr>
                <td><label for="loc">Npa: </label></td>
                <td><input dojoType="dijit.form.TextBox" type="textbox" name="npa"></td>
        </tr>
        <tr>
                <td colspan="2" align="center">
                        <button dojoType=dijit.form.Button type="submit">OK</button></td>
        </tr>
    </table>
</div>
}}}

Code du fichier /js/updateCityListJson.js
{{{
function updateCityListJson(name, npa)
{
    new Ajax.Request('/main/updatelist/name/'+name+'/npa/'+npa,{ method:'get',
                                                                     onSuccess: function(o){ var cb = dijit.byId("comboboxjson");   
                                                                                 var city = eval('(' + o.responseText + ')');
                                                                                 var states_store = new dojo.data.ItemFileReadStore({data:city});
                                                                                 cb.store = states_store;},
                                                             onFailure: function() { alert('Something went wrong...') }   });
}
}}}

Code de l'action updatelist du controller main
{{{
public function updatelistAction()
    {
        // Get the parameters and clean them //TODO vérifier le cleaning
        $request = $this->getRequest();
        $cityName = Zend_Filter::get($request->getParam('name'), 'StripTags');
        $npa = Zend_Filter::get($request->getParam('npa'), 'StripTags');
       
        if(strlen($cityName)>0 & strlen($npa) > 0){
            // Create an object city
            $city = new Cities(Globals::getWriteConnection());
           
            // Create an array containing all the record data
            $data = array( 'name' => $cityName,
                           'npa'  => $npa);       
   
            // Insert the new user in the database
            $city->insert($data);
        } // END IF data valid
       
        $this->_helper->layout->disableLayout();
           
        $city = new Cities(Globals::getReadConnection());
        // Select all cities
        $data = $city->fetchAll($city->select()->order('name'));
       
        // Create the JSON response
        $response = "{identifier: 'id',
                   label: 'name',
                   items: [";
        foreach($data as $city)
        {
            $response .= "{id: '".$city->id."', name: '".$city->name.", ".$city->npa."'},\n";
        }
        $response = substr($response,0, strlen ($response)-2);
        $response .="]}";

        $this->view->result = $response;
    }
}}}

ATTENTION : La valeur des identifier doit être unique pour chaque élément de la liste, sinon cela ne fonctionne pas.

Dépendance : prototype.js http://www.prototypejs.org/

Dernière modification par yannj2002 (19-02-2009 13:37:00)

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages