Home > Zend_Form > Ajax Auto Completion with Zend_Form

Ajax Auto Completion with Zend_Form

intro
This article shows ajax auto completion with Zend_Form.
You can see the screens from the demonstration site.

1.Create Controller
Create the file application/constorllers/LocaleController.php with the following content.

<?php
require_once 'Zend/Controller/Action.php';
require_once 'Zend/Form.php';
require_once 'Zend/Locale.php';
 
class LocaleController extends Zend_Controller_Action
{
    public function getForm()
    {
        $form = new Zend_Form();
        $form->setName('localeForm')
             ->setAction($this->_request->getBaseUrl() . '/locale/index')
             ->setMethod('post');
 
        $decorators = array(
            'ViewHelper',
            array('HtmlTag', array('tag' => 'dt', 'class' => 'submit'))
        );
 
        $element = $form->createElement('text', 'element');
        $element->setLabel('Locale')
                ->setAttrib('dojoType', array('dijit.form.ComboBox'))
                ->setAttrib('store', 'localeStore')
                ->setAttrib('autoComplete', 'true')
                ->setAttrib('hasDownArrow', 'true')
                ->setRequired(true)
                ->addFilter('stringTrim')
                ->addValidator('stringLength', false, array(1,10));
        $submit = $form->createElement('submit', 'submit');
        $submit->setLabel('Send')
               ->setDecorators($decorators);
 
        $form->addElements(array(
            $element, $submit
        ));
 
        return $form;
    }
 
    public function indexAction()
    {
        $form = $this->getForm();
        if ($this->getRequest()->isPost())
        {
            if ($form->isValid($_POST))
            {
                $values = $form->getValues();
                $this->view->values = $values;
            }
        }
        $this->view->form = $form;
    }
 
    public function processAction()
    {
        $data = Zend_Locale::getLocaleList();
        $this->_helper->autoCompleteDojo(array_keys($data));
    }
}
2.Create View
Create the file application/views/scripts/locale/index.phtml with the following content.

 
<h1><?= $this->translate('Your Locale'); ?></h1>
 
<?php if($this->values) : ?>
<h3><?= $this->translate('You just submitted the following values'); ?>:</h3>
<ul>
  <?php foreach ($this->values as $value) :?>
<li>
    <?= $this->escape($value); ?>
  </li>
 
  <?php endforeach; ?>
</ul>
 
<?php else : ?>
    <?= $this->form; ?>
<?php endif; ?>
<style type="text/css">
@import "<?= $this->baseUrl ?>/js/dijit/themes/tundra/tundra.css";
@import "<?= $this->baseUrl ?>/js/dojo/resources/dojo.css";
</style>
 
<script type="text/javascript">
var djConfig = {
    isDebug:true, parseOnLoad:true
};
</script>
<script type="text/javascript" 
    src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
 
var localeStore = new dojo.data.ItemFileReadStore({
    url:"<?=$this->url(array('action'=>'process'))?>"
});
</script>

Specify the style class of body tag.

<body class="tundra">

3.Check
Access the web server and check ajax auto completion for the element.
History
Date Content
2008/4/29 Published
2008/4/29 Added description about specifying the style class of body tag.

Comments:2

Willem Luijk 09-02-17 (Tue) 19:33

This all seems a nice post and theory but what if this form itself is loaded by an ajax call? How to you inject the Javascript of the view in the page of the client and get it executed?

oplabo 09-02-18 (Wed) 9:22

If you can use jquery, you can load a form html with the following code.

$.ajax({
    url: "/yourController/yourAction/format/html/",
    cache: false,
    success: function(html){
        $("#formWrapperId").html(html);
    }
});

In your controller, please use ajaxcontext.

    $ajaxContext = $this->_helper->getHelper('AjaxContext');
    $ajaxContext->addActionContext('yourAction', 'html')->initContext();

And create the file yourAction.ajax.phtml in your view script folder. It could be same with the above index.phtml file.

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.oplabo.com/article/37/trackback
Listed below are links to weblogs that reference
Ajax Auto Completion with Zend_Form from Open Programming Laboratory

Home > Zend_Form > Ajax Auto Completion with Zend_Form

Japanese
Pages
Categories
Recent Posts
Recent Comments
Archives
Tag Cloud
Search
Feeds

Return to page top