M4d3L-Network Blog» Javascript http://www.m4d3l-network.com Ma seule limite est mon imagination Wed, 07 Jul 2010 21:43:52 +0000 en hourly 1 http://wordpress.org/?v=3.0 Autocomplete field with Zend Framework and Dojo http://www.m4d3l-network.com/developpement/php/autocomplete-field-with-zend-framework-and-dojo/ http://www.m4d3l-network.com/developpement/php/autocomplete-field-with-zend-framework-and-dojo/#comments Sat, 07 Nov 2009 00:20:32 +0000 M4d3L http://www.m4d3l-network.com/?p=416
  • Zend_Form : How to remove decorator from hidden field.
  • Add language route to your Zend Framework project.
  • How to use Flickr with Zend Framework?
    • ]]>

    In this exemple, we will se how to create an autocomplete field with Zend Framework and Dojo in the ZF MVC environment. We will use the QueryReadStore Dojo component to load new data when input value change.

    Initialize Dojo in your layout

    In the header of your layout, you must be able to load Dojo in page that need it loaded only to not overload other page that doesn’t have Javascript in it.

    Exemple :

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <?php echo $this->doctype('XHTML1_STRICT');?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<?php echo $this->headTitle($request->getActionName())
	->headTitle($request->getControllerName());?>
<?=$this->headLink()
	->appendStylesheet($this->theme_url.'/css/style.css')
	->headLink(array('rel' => 'favicon', 'href' =>'/images/favicon.ico'), 'PREPEND');?>
<?=$this->headMeta()
        ->appendHttpEquiv('expires', 'Wed, 26 Feb 1997 08:21:57 GMT')
        ->appendHttpEquiv('pragma', 'no-cache')
        ->appendHttpEquiv('Content-Type', 'text/html;charset=UTF-8')
        ->appendHttpEquiv('Cache-Control', 'no-cache');?>
<?php if ($this->dojo()->isEnabled()){
   $this->dojo()->setLocalPath($this->BaseUrl().'/plugins/dojo/dojo.js')
         ->addStyleSheetModule('dijit.themes.tundra');
   echo $this->dojo();
}?>
</head>

    This code will add all javascript library needed and css style in the head of your page.

    Setup the form and choose the good element

    In your main view, you create the form and add the good element for your autocomplete input.

    Dojo provide 2 type of Element : FilteringSelect and ComboBox. For this exemple, I have choose the FilteringSelect element.

    1
2
3
4
5
6
7
8
9
10
11
12

    <?php $form = new Zend_Form;
$element = new Zend_Dojo_Form_Element_FilteringSelect('id');
$element->setAutoComplete(true)
			->setStoreId('tidStore')
			->setStoreType('dojox.data.QueryReadStore')
			->setStoreParams(array('url'=>$this->BaseUrl().'/admin/translate/autocomplete'))
			->setAttrib("searchAttr", "id")
			->setRequired(true);
$submit = $form->createElement('submit', 'submit');
$form->addElements(array($element, $submit));
print $form;
?>

    Providing data for the autocomplete field

    Now in the controller, we create a new action autocompleteAction to generate data in json format.
    In this function, you must disable the view renderer and the layout.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    public function autocompleteAction() {
        $this->_helper->viewRenderer->setNoRender();
        $this->_helper->layout->disableLayout();
        $id = $this->_getParam("id", "");
        $id = substr($id, 0, -1); //fix : remove * at the end of the ID.
 
        $MyTable= MyTable::getInstance();
        $select = $MyTable->select(true, array("id"))->limit(5)
        $select->where('id LIKE ?', "%".$id."%");
        $results = $MyTable->fetchAll($select);
        $data = new Zend_Dojo_Data('id', $results);
 
        // Send our output
        $this->_helper->autoCompleteDojo($data);
    }

    This action will be called by the form element each time the value will change in the input and add propose 5 new possibility for the user to select.

    (This exemple was tested on Zend Framework 1.9.5 and Dojo 1.3.2)

    Related posts:

    1. Zend_Form : How to remove decorator from hidden field.
    2. Add language route to your Zend Framework project.
    3. How to use Flickr with Zend Framework?

    ]]>     http://www.m4d3l-network.com/developpement/php/autocomplete-field-with-zend-framework-and-dojo/feed/ 0