Wednesday, July 1, 2009

Creating JQuery form in Zend Framework

While few months back, I wrote an article on how to make Dojo Form in Zend Framework. Although dojo has numerous features, however most of the developers around prefer JQuery and prototype.
When Zend provide JQuery extension I wrote and article on how to use JQuery date picker.
While most of guys visited that article demand writing an article on how to create JQuery form in Zend Framework.
So I’m here to show you how to use JQuery extension provide with latest version of Zend Framework for creating wonderful JQuery form.
You will need to follow the steps bellow to create JQuery form.
1. Placing ZendX directory in right place
2. Make necessary configuration in bootstrap file
3. Write necessary code in your layout.phtml file.
4. Create JQuery form
5. and show that form in the template.

Placing ZendX directory in right place:
When you download latest version of Zend Framework and extract the zip file. You will see a directory called “extras”. When open that directory you will find ZendX folder. Copy this to your
Library/ folder at the same level of your Zend directory
You directory structure will be like this.
Library/
Zend/
ZendX/

Making necessary configuration in bootstrap:
After placing the directory you will need to add a bit of code in your bootstrap file.
Add the following lines to your bootstrap file.
$view = new Zend_View();
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
$viewRenderer->setView($view);
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

In the code above, we instantiate our Zend_View object, set helper path, add view to the viewRenderer and finally add viewRenderer the helper broker.
Keep in mind that if you have already instantiate Zend view in your bootstrap, you don’t need to instantiate it twice.
Write necessary code in your layout.phtml file:
The only line you will need to include in your layout file is
echo $this->jQuery();

If you don’t use two step view, you can include this line at the top of each of your view template file instead.
Create JQuery form:
Now you have done all the necessary configuration, its time to create the actual form.
Create JQuery form in Zend framework is piece of cake.
If you want to create form in your controller, write the following code.
$form = new ZendX_JQuery_Form();
$date1 = new ZendX_JQuery_Form_Element_DatePicker(
'date1',
array('label' => 'Date:')
);
$form->addElement($date1);
$elem = new ZendX_JQuery_Form_Element_Spinner(
"spinner1",
array('label' => 'Spinner:')
);
$elem->setJQueryParams(array(
'min' => 0,
'max' => 1000,
'start' => 100)
);
$form->addElement($elem);
$this->view->form = $form;

In the code above we have created our JQuery form object, and add two element date and spinner to it. And then assigned the form to the view template file. Although you can create the form in your controller, however I will strongly discourage it. I will prefer using separate php file and add following code to that file.
class JQueryForm extends ZendX_JQuery_Form
{
public function init()
{
$this->setMethod('post');
$this->setName('frm');
$this->setAction('path/to/action');

$date1 = new ZendX_JQuery_Form_Element_DatePicker(
'date1',
array('label' => 'Date:')
);

$this->addElement($date1);

$elem = new ZendX_JQuery_Form_Element_Spinner(
"spinner1",
array('label' => 'Spinner:')
);

$elem->setJQueryParams(array('min' => 0, 'max' => 1000, 'start' => 100));
$this->addElement($elem);
}
}

We have extended our form from ZendX_JQuery_Form, set its method, name and action and add two elements date and spinner.
Now in your controller/action
    $form = new JQueryForm();

$this->view->form = $form;

Showing form in the template:
In your view template file add only the following line.
    <?php

echo $this->form;

?>

24 comments:

  1. could you please post the entire code for the affected files

    ReplyDelete
  2. Where i Have to put the Jquery Scripts and how i will specify the path to it?

    ReplyDelete
  3. I Tried this code but the displayed elements seems to be without any CSS style

    ReplyDelete
  4. Narjess, I don't know whether you resolved your issue, but in case and for others who has the same issue, you need to place the JQuery in your public folder.

    I have several different javascripts than JQuery so put JQuery in /public/js/jquery/.

    You should put /themes, /ui, /external, /jquery-1.3.2.js into that folder. Now you should include css and js into you layout like jQuery()->addStylesheet(’/js/themes/base/ui.all.css’) and jQuery()->setUiLocalPath(”/js/ui/jquery.ui.all.js”) after you instantiate JQuery in your layout script.

    ;-)

    ReplyDelete
  5. Hi,

    Could you please post the entire code for the affected files or where do I have to put each piece of code.

    ReplyDelete
  6. Hello,

    When I put this in my layout.phtml file
    $this->jQuery();, I get this error:

    Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'JQuery' was not found in the registry;

    I have the ZendX folder in the Zend directory.
    In my bootstrap I have this:

    function _initViewHelpers() {


    $view = new Zend_View();

    $this->bootstrap('layout');
    $layout = $this->getResource('layout');
    $view = $layout->getView();


    // for
    $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
    $viewRenderer->setView($view);
    Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);


    }



    Please help, I'm almost there!

    ReplyDelete
  7. By bad, I put the ZendX inside the Zend folder. :-(

    ReplyDelete
  8. Any idea why my js files are getting included twice? Very strange!!

    ReplyDelete
  9. Thanks so much. I had really struggles to get this going till I read your article. Much appreciated.

    ReplyDelete
  10. It worked on the first shot.

    Thx:-)

    ReplyDelete
  11. First let me thanks for the useful post.

    can u please provide zip file for all the code..since I am new(but working in PHP for 3 yrs) to zend framework and do not know the filenames.

    Otherwise pls mention the filename with path in each code snippet.

    Thanks,
    Subramanian Vallinayagam

    ReplyDelete
  12. Thanks, it helps me a lot ... keep on ...

    ReplyDelete
  13. Hi,

    I am using a JQuery DatePicker into a Zend Form.
    It works fine, the only thing is I can't figure out how to change the date format!

    When I pick a date, it saves the date in the format: dd/mm/yyyy
    I want this format: yyyy-mm-dd

    When you use only JQuery you can change the format with Date.format, but within the Zend form I can't find how to do it...
    Can you help?

    ReplyDelete
  14. You have to use this line before adding the element :

    $elem->setJQueryParam('dateFormat', 'dd/mm/yy');

    I mean in your case :

    $date1 = new ZendX_JQuery_Form_Element_DatePicker(
    'date1',
    array('label' => 'Date:')
    );

    $date1->setJQueryParam('dateFormat', 'yy-mm-dd');

    $this->addElement($date1);

    ReplyDelete
  15. can u give me a link for zendx library

    ReplyDelete
  16. Great article. You are God send to people new to Zend Framework. Keep on keepin on.

    ReplyDelete
    Replies
    1. hey...! what's this? a u crazy ? calling a man God cause of simple explanation..

      Delete
    2. its God send not God fellow Anonymous, jeez do we still have dump geeks or this is an exceptional case?

      Delete
  17. To fix the style issue, you may use the Google CDN theme by adding these lines into Controller Action (or remove view variable to use it inside the view / layout file):
    $this->view->jQuery()->addStylesheet("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css");
    $this->view->jQuery()->addStylesheet("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css");

    ReplyDelete
  18. Hello thank for the great tutorial.

    ReplyDelete
  19. that's Good !
    thanks man !

    ReplyDelete
  20. Thanks, nice explanation. ZendX Form instructions are hard to find!

    ReplyDelete
  21. There is no ZendX library in the latest version of zend framework that i have downloaded. how do i resolve this? thanks.

    ReplyDelete