Working with ZendX_JQuery
Description
Quickly integrate jQuery and jQuery UI into your Zend Framework project.
Tags
date, jquery, jqueryui, zendx, zendx_jquery
Browse Screencasts
- - AJAX
- - Doctrine
- - HTML / CSS
- - Logging
- - jQuery
- - Zend_Db
- - MVC
- - Unit Testing
- - About
- - Consulting
- - Support us
CC Attribution-NonCommercial-ShareAlike 2.5 Canada
nice tut, thanks a lot. it’s very usefull information for novices.
where is the video
Looking forward to the next video!
Hi,
Very nice tutorial.
For the beginners, you can explain how to use “AjaxLink” for example, or the interaction with the views, controllers and jquery code.
Fabrice
hi, thanks for this tutorial. I hope you will also explain how to use Zend Form in the next episode because I was
hi, thanks for this tutorial. I hope you will also explain how to use Zend Form in the next episode because I was wondering how that would work together…
Thanks,
Jasper
Awesome! I just want to start using ZendX_JQuery, and here is the perfect how-to to do so
Great, just awesome
easy and great tutorial. tnx
thx for your excellent casts,
just noticed that it’s probably not necessary to ‘manually’ register the ‘ZendX_’ namespaces, as this is already in the default namespaces of Zend_Application’s autoloader.
cheers
You don’t actually need to add ZendX to the autoloader namespace, as its in it by default.
Also the ZendX application resources make it possible to set up most of jquery from the application.ini (this is what I’m using at the moment):
—
pluginPaths.ZendX_Application_Resource = APPLICATION_PATH “/../library/ZendX/Application/Resource”
resources.jquery.noconflictmode = false
resources.jquery.version = “1.4.2″
resources.jquery.ui_version = “1.8.4″
—
and in my bootstrap I have:
—-
protected function _initJq() {
$view = $this
->bootstrap(‘view’)
->getResource(‘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);
$jquery = $this->bootstrap(‘jquery’)
->getResource(‘jquery’)
// can add some more stylesheets and jquery related stuff
->addJavascriptFile($view->baseUrl(‘scripts/jquery.cookie.js’))
->addJavascriptFile($view->baseUrl(‘scripts/jquery.treeview.pack.js’))
->addStylesheet($view->baseUrl(‘styles/jquery.treeview.css’));
return $jquery;
}
—-
Thank you very much John!
Nice start
@David Danyi
Thank you for this recommendation.
I also like configuring the app through application.ini and extended your code, to set the ui-css per application.ini.
I also give out notice, if something goes wrong:
In application.ini
———————————————————————
resources.jquery.ui_theme = ‘ui-lightness’
———————————————————————
In Bootstrap.php, e.g. in function _initViewHelpers()
———————————————————————
$config = $this->getOption(‘resources’);
$jquery_ui_theme = $config['jquery']['jquery->ui_theme'];
$jquery_ui_version = $config['jquery']['ui_version'];
$jquery_ui_css_file = “jquery-ui-$jquery_ui_version.custom.css”;
$jquery_ui_css_base_public = “/css”;
$jquery_ui_css_base_local = APPLICATION_PATH . “/../public”. $jquery_ui_css_base_public;
if (! file_exists(“$jquery_ui_css_base_local/$jquery_ui_theme”))
trigger_error(“JQuery theme folder ‘$jquery_ui_theme’ not found in public css path!”);
else
if (! file_exists(“$jquery_ui_css_base_local/$jquery_ui_theme/$jquery_ui_css_file”))
trigger_error(“JQuery theme file ‘$jquery_ui_css_file’ not found in public css path!”);
else
{
$view->jquery_ui_css = “$jquery_ui_css_base_public/$jquery_ui_theme/$jquery_ui_css_file”;
}
———————————————————————
In View, e.g. layout.phtml, in the head section:
———————————————————————-
headLink()->appendStylesheet($this->jquery_ui_css) ?>
———————————————————————-
Oops, please fixthis typo:
$jquery_ui_theme = $config['jquery']['jquery->ui_theme'];
to
$jquery_ui_theme = $config['jquery']['ui_theme'];
Who knows, how to set up the DatePicker inline?
Until I found no other way I come to solution with this code.
It used DOM manipulation through JS.
in the view:
datePicker(‘dp’,”,array(‘inline’ => ‘true’)) ?>
<?= "
replace = document.createElement(‘div’);
replace.id = ‘dp’;
replace.setAttribute(‘style’,'width:300px’);
element = document.getElementById(‘dp’);
element.parentNode.replaceChild(replace, element);
”
?>
Annotations You don’t need the ‘inline’ => ‘true’ option for this ugly solution.
I hope to find a Zend_Framework way for this issue soon!
Got solution, so forget theJavaScript stuff above.
The ZF Way is to overload the datepicker() function of the datepicker view helper.
Write your own View Helper and extend it from ZendX_View_Helper_DatePicker:
e.g.:
class YOURNAMESPACE_View_Helper_MyDatePicker extends ZendX_JQuery_View_Helper_DatePicker
{
public function myDatePicker($id, $value = null, array $params = array(), array $attribs = array())
{
parent::datePicker($id, $value, $params, $attribs);
// this is the change:
// the original class returns $this->view->formText() which was annoying.
// with returning nothing you have to write your own Trigger- (PopUp) or Target – (Inline) tag.
// you can also add another param to myDatePicker()
// to inlude some logic for creating the element within this function
// if so, you have to return the html-text which has to be displayed in the view
return;
}
}
Hey!
Nice Grid.
How can i add CRUD functioanlity in this grid?
Hi,
I put
datePicker(‘dp’,’ ‘,array()); ?>
in layout.phtml. It does not work. it generates a textbox only, no date picker object.
But, I put the code in index.phtml and it works.
Why?
Hello John
Very nice tutorial. Thank you.
I have a strange proglem though. When I load the JQuery without ui custom css, it work perfect. As soon as I append css and add custon UI css, it stops responding. Any Idea?
grate tutorial!!!!!
thanks for the great tutorial. very straightforward.
Hello,
I’d like to add that the author of ZendX_Jquery has dropped the development & support, and he won’t rewrite it when ZF2 will come up. Consider this if you are building a commercial website.
The code will still remain in the 1.X versions however, so you can still use it.
http://zend-framework-community.634137.n4.nabble.com/Discontinuing-Maintenance-of-ZendX-JQuery-Suggest-drop-for-2-0-td3221855.html
Great tutorial! Very clear and detailed.
Thanks so much for sharing!
Thanks, im a java expert but just new onto php world and this tutorial was very instructive!!
Hi,
Great tutorial !
But i have a question :
Is it possible to directly use datePicker in layout?
Example in my layout :
echo $this->jQuery();
echo $this->datePicker(‘dp’,”,array());
i tried it but it dont work
Another question :
in /service/topen :
I have :
echo $this->datePicker(‘dp’,”,array());
that works perfectly
but when i call it in the layout , it dont work :
layout()->topEbookEn = $this->action(‘topen’, ‘service’); echo $this->layout()->topEbookEn; ?>
Just would like to say.. Thank you very much…
hi
how this apply to Zend Form.
please solve this.
thank you very much.