Zend Framework

Zend Framework and JQuery: creating JQuery form in Zend

Posted by Faheem Abbas on May 6, 2009

Sorry this blog is deprecated.

“Read new version of this article here.” http://zendgeek.blogspot.com/2009/07/creating-jquery-form-in-zend-framework.html

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/

Form show bellow will be displayed.

JQuery Form showing date picker

JQuery Form showing date picker

And the From will look like when first load

JQuery form when Date Selected

JQuery form when Date Selected

14 Responses to “Zend Framework and JQuery: creating JQuery form in Zend”

  1. Thang said

    I follow your guide but it doesn’t work.
    It does not call the JS library in . Do you miss it?

  2. ED.Tsai said

    Yes, I am too, it can’t find a library, I think the problem in bootstrap file or other configuration.

    Warning: Zend_Loader::include_once(ZendX\JQuery\Form.php) [zend-loader.include-once]: failed to open stream: No such file or directory in C:\AppServ\Zend\Loader.php on line 83

    Warning: Zend_Loader::include_once() [function.include]: Failed opening ‘ZendX\JQuery\Form.php’ for inclusion (include_path=’.;C:\AppServ;../application/default/models/;.;C:\php5\pear’) in C:\AppServ\Zend\Loader.php on line 83

    Fatal error: Class ‘ZendX_JQuery_Form’ not found in C:\AppServ\www\PHP\Zend_test\application\default\controllers\IndexController.php on line 26

  3. How can JQuery work if you miss adding js files. Please add necessary js files. like and jquery’s datepicker javascipt file and spinner.js file and css files as well.

  4. Make sure you have ZendX directory included in your directory path in proper place.

  5. ED.Tsai said

    Ok, It;s worked, but what’s jquery theme are you use? I can’t load
    image with base theme

  6. quantro said

    Faheem, may i know the version of zend framework that u use here??
    i’m a newbie in zend….
    thanks,

    regard,
    quantro

  7. I’m using latest stable version.

  8. Read this one. here I’ve explained everything needed.
    http://zendguru.wordpress.com/2009/01/25/zend-framework-and-jquery-jquery-date-picker/

  9. quantro said

    oh i see..
    that mean you use the 1.8.0 version, right??
    i there any different with the previous version??
    cause i use 1.7.8 version.

  10. quantro said

    oh i see..
    that mean you use the 1.8.0 version, right??
    i there any different with the previous version??
    cause i use 1.7.8 version.

    regard,
    quantro

  11. quantro said

    I mean :

    is there any different??

    regard,
    quantro

  12. ED.Tsai said

    It’s worked, however I have a problem with css although i included it success on my web

    as this image
    http://yfrog.com/0ocapture46200710405am572j

  13. Joe Devon said

    I don’t think this example uses 1.8.0 because the bootstrap code uses the old format. Would be nice to see how the Bootstrap.php code should look in 1.8.0.

  14. Joe Devon said

    Funny, I got it to work but the file points to the wrong url on Google’s server :)
    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery-ui.min.js
    instead of
    http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js

    Hopefully Zend will fix it soon :)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>