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;

?>

32 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. 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
  11. Thanks, it helps me a lot ... keep on ...

    ReplyDelete
  12. 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
  13. 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
  14. can u give me a link for zendx library

    ReplyDelete
  15. 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
  16. 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
  17. Hello thank for the great tutorial.

    ReplyDelete
  18. that's Good !
    thanks man !

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

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

    ReplyDelete
  21. Hi,

    good information

    Web application development services will successfully change the execution of your online business So, hire our skilled Ecommerce website company to get customized applications for your business.

    Best Website Designing and Development Company
    "
    Ecommerce Website Development Company
    "
    Zend Framework

    ReplyDelete
  22. I was confused for choosing a helping material among many available but when I searched I knew none was better than Pass4sure Microsoft dumps. This short study material keeps pertinent information about the discipline that helped me to clear syllabus with tiny efforts. I feel lucky to find Microsoft exam material before my exam.

    ReplyDelete
  23. Hi to all, the contents present at this website are truly awesome for people experience, well, keep up the good work fellows.
    Website Design Bengaluru

    ReplyDelete
  24. Hi to all, the contents present at this website are truly awesome for people experience, well, keep up the good work fellows.
    Web Development Design Bengaluru

    ReplyDelete
  25. Excellent pieces. Keep writing such kind of information on your
    page. Im really impressed by it.
    Hi there, You have performed a great job. I’ll certainly digg
    it and in my opinion recommend to my friends.
    I am confident they’ll be benefited from this web site.
    website designing company in karol bagh

    website designing company in pitampura

    website designing company in rohini

    website designing company in noida
    responsive web design company in india
    website designing company in noida
    website development company in delhi
    wordpress development company delhi
    magento development company in delhi

    ReplyDelete
  26. Play the game of thrones at ICE Casino | Get Bonus | Review
    The game from TPC's casino provides free spins and prize Casino Sites – How 바카라사이트 Do You Buy Online Slots at ICE Players and Live 우리카지노 Casino Games

    ReplyDelete
  27. Thanks for sharing this informative article on Creating JQuery form in Zend Framework with appropriate examples and in detail. If you have any requirement to Hire Zend Developers or any PHP web developers for your project. Please visit our website.

    ReplyDelete