I want to get started working with jQuery in my Zend Framework application but not sure which is the best way to get started. I know I could include the jQuery library just like any other javascript library, but what are the advantages of using ZendX_JQuery, and what are the steps necessary to start using it in my Zend Framework 1.9 application?
+15
A:
I was able to get jQuery working in my 1.9.4 project by following these steps:
Step 1: Copy the ZendX directory to your library directory. ZendX can be found in the extras/library directory of your Zend Framework download.
Step 2: Download jQuery and the jQuery UI library from jqueryui.com. I chose the UI Lightness theme.
Step 3: Extract the download and rename jquery-ui-1.7.2 to jquery and move to your public/js directory.
Step 4: Add these lines to your bootstrap file:
protected function _initViewHelpers()
{
//assuming you already have this function in your bootstrap
//jQuery (using the ui-lightness theme)
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
$view->jQuery()->addStylesheet('/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css')
->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js')
->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.2.custom.min.js');
}
Step 5: Now add the jQuery view helper to your layout file:
<head>
<?php echo $this->jQuery(); ?>
</head>
Step 6: To test that you have everything working, add this line to one of your view scripts:
Pick your Date: <?php echo $this->datePicker("dp1", '', array('defaultDate' => date('Y/m/d', time()))); ?>
Now, if you open this page in your browser, there should be a text field. You should be able to click on the text field, which automatically pops up a calendar that has been styled to the UI Lightness theme.
Andrew
2009-10-24 17:17:23
+4
A:
One little gotcha:
You have to add the ZendX folder to your library directory - the one which also has your Zend directory.
[your/lib/path] | +-Zend | | | +-(the full thing) | +-ZendX | | | +-JQuery, Db, Console, ...
If you miss adding ZendX to your library directory, you get lots of errors messages like this:
Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'JQuery' was not found in the registry; used paths: ZendX_JQuery_View_Helper_: ZendX/JQuery/View/Helper/ Zend_View_Helper_: Zend/View/Helper/: .....
Another little gotcha:
In the code presented by Andrew above, note the important words highlighted:
Now add the jQuery view helper to your layout file:
<head>
<? php echo $this->jQuery(); ?>
</head>
To test that you have everything working, add this line to one of your view scripts:
<code>
Pick your Date: <?php echo $this->datePicker("dp1", .....
</code>
While $this->jQuery() must go in the layout file so that all pages get jquery functionality, the actual jQuery code must go to the view file itself - application/views/scripts/yourcontroller/youraction.pthml - it does not work in the layout with just this simple code.
namespaceform
2009-11-01 22:32:15
A:
can i get brief example of this because i am trying to use the same but not getting success and i am not using layout in my system
abhijeet
2009-11-04 12:44:33
If you are not using a layout, simply put <?php echo $this->jQuery(); ?> in the head section of your view script
Andrew
2009-11-05 05:22:00
A:
Hi,
include this to ur bootstrap file
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper"); $view->jQuery()->addStylesheet('/Your Public Path/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css') ->setLocalPath('/Your Public Path/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath('/Your Public Path/js/jquery/js/jquery-ui-1.7.2.custom.min.js');
Add this to ur layout jQuery(); ?>
and use jQuery UI functions in ur view file: Pick your Date: datePicker("dp1", '', array('defaultDate' => date('Y/m/d', time()))); ?>
Arvind
2009-11-24 03:28:17
+3
A:
Just wanted to add that you have to (or at least I had to) enable the jquery and jquery components in the _initViewHelpers function:
$view->jQuery()->enable()
->uiEnable();
EasyEcho
2009-12-30 19:01:29
By enabling jQuery in the Bootstrap, you will be including the jQuery javascript into every page (regardless of whether or not it needs to be included). By using a jQuery form element (for example) it automatically enables jQuery, and includes the necessary javascript. It may be more efficient to only include it when you need it, but it's up to you. You may decide you want to include jQuery on every page.
Andrew
2009-12-31 06:42:56
A:
using this approach, can the DataTables plugin from the jquery website also be used / enabled? If yes, how?
Decodd
2010-01-07 15:48:43
A:
Hi,
Thanks for the article, its very useful for someone like me who is fairly new to Zend framework.
By following the instruction above I have managed to get the "Pick Your Date" textfield, however when I click on it, I didn't get the expected popup calendar.
Any idea where it may have gone wrong? Thanks
Once
2010-01-12 06:52:48
A:
The answers are good and it works in my case too.
Rather than using ajaxLink(), I have already a form with "submit" button on the page. I need it to validate using Ajax. The JQuery is integrated like above.
For doing the Ajax Form Validation, I am planning to include one "javascript" page and on the "onclick" validates and shows error or submit the form.
Please help me to include a javascript file (Is there any method to include js file depends on the controller & function ? )
dremay
2010-02-25 09:25:57
A:
Hi,
Thanks for the article, its very useful for someone like me who is fairly new to Zend framework.
By following the instruction above I have managed to get the "Pick Your Date" textfield, however when I click on it, I didn't get the expected popup calendar.
Any idea where it may have gone wrong? Thanks
yasin
2010-03-02 10:54:56
Pretty sure I ran into that too. Don't remember exactly the solution, but I think you might not be including the jQuery theme directory (stylesheet and images)
Andrew
2010-03-03 16:49:38
A:
As user117640 sad,
I had to enable the jQuery and UI, it can be done in:
bootstrap :
//it will enable for all views
$view->jQuery()->enable()->uiEnable();
controller::someAction :
//JQ enabled for particular view)
$this->view->jQuery()->enable()->uiEnable();
view someAction.phtml:
//JQ enabled for particular view
<?php $this-jQuery()->enable()->uiEnable(); ?>
Dr Casper Black
2010-03-04 23:01:39
A:
hi
i have all steps given by you.
error has come like this,
Fatal error: Call to a member function addHelperPath() on a non-object in C:\xampp\htdocs\vineela\application\Bootstrap.php on line 10
where the $view object will create.....
pls help me urgent..............
sunil
2010-07-13 10:43:07
A:
The Solution is - >
protected function _initView()
{
$view = new Zend_View();
$view->doctype('XHTML1_STRICT');
$view->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
$view->headTitle()->setSeparator(' - ');
$view->headTitle('IMR - BI System');
$view->env = APPLICATION_ENV;
$view->baseUrl = Zend_Registry::get('config')->root_path;
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
$view->jQuery()->addStylesheet($view->baseUrl . '/js/jquery/css/south-street/jquery-ui-1.8.2.custom.css');
$view->jQuery()->setLocalPath($view->baseUrl . '/js/jquery/js/jquery-1.4.2.min.js');
$view->jQuery()->setUiLocalPath($view->baseUrl .'/js/jquery/js/jquery-ui-1.8.2.custom.min.js');
$view->jQuery()->enable();
$view->jQuery()->uiEnable();
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
$viewRenderer->setView($view);
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
return $view;
}
I just shifted my Code from _initViewHelpers to _initView
and it Works for me.
Ashish Sharma
2010-07-30 13:58:44
A:
0 down vote
hi
i have all steps given by you.
error has come like this,
Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'JQuery' was not found in the registry; used paths: Zend_View_Helper_: Zend/View/Helper/;D:/xampp/htdocs/zf-tutorial/application/views\helpers/' in D:\xampp\htdocs\zf-tutorial\library\Zend\Loader\PluginLoader.php:412 Stack trace: #0 D:\xampp\htdocs\zf-tutorial\library\Zend\View\Abstract.php(1174): Zend_Loader_PluginLoader->load('JQuery') #1 D:\xampp\htdocs\zf-tutorial\library\Zend\View\Abstract.php(610): Zend_View_Abstract->_getPlugin('helper', 'jQuery') #2 D:\xampp\htdocs\zf-tutorial\library\Zend\View\Abstract.php(336): Zend_View_Abstract->getHelper('jQuery') #3 [internal function]: Zend_View_Abstract->__call('jQuery', Array) #4 D:\xampp\htdocs\zf-tutorial\application\layouts\scripts\layout.phtml(11): Zend_View->jQuery() #5 D:\xampp\htdocs\zf-tutorial\library\Zend\View.php(108): include('D:\xampp\htdocs...') #6 D:\xampp\htdocs\zf-tutorial\library\Zend\View\Abstract.php(880): Zend_View->_run('D:\xampp\htdocs...') #7 D:\xampp\ in D:\xampp\htdocs\zf-tutorial\library\Zend\Loader\PluginLoader.php on line 412
pls help
Thanks
sanjeev
2010-10-14 08:10:50
see if this answer helps: http://stackoverflow.com/questions/1616857/best-way-to-start-using-jquery-in-a-zend-framework-1-9-application/1658613#1658613
Andrew
2010-10-14 17:10:01