Raza Mehdi's Blog

I have been real busy with work these days. So  i haven’t had the opportunity to write a lot on my blog. A few days back, i had to work on integrating Jquery in one of the Zend Framework applications. The task was to create an auto-complete textbox which shows you the country names when you type characters in it.

• First download the latest version of the Zend Framework, Jquery and Jquery UI.     I downloaded the full version of the Zend Framework and Jquery UI.
• Now create a new ZF application. I am assuming that you have correctly configured the Zend_Tool to create ZF applications.
• Unzip the ZF archive file and copy the contents of extras/library folder into your application’s library folder.
• Now in the application.ini file, write the following code to register the ZendX namespaces: autoloaderNamespaces[] = "ZendX"
• Since i needed the functionality in only one controller, i didnt need to include it into bootstrap file. Open your controller file, and add the following line in the init() function:

  <?php $this->view->addHelperPath('ZendX/View/Helper/','ZendX_Jquery_View_Helper'); ?>

• Now in your layout file, enter the following code to add ZendX_Jquery in the application by putting this code in the header section of the page:

  <?php echo $this->JQuery()
  ->setVersion('1.4.2')
  ->setUIVersion('1.8.2'); ?>

• Write the following code into your controller’s view file:

  <form><?php echo $this->datePicker('pickdate','',array()); ?></form>

• Now copy the file jquery-ui-[version]-custom.css in the jqueryui folder into your site.
• Put the following code into the head section of your layout file:

  <?php echo $this->headLink()->appendStylesheet([PATH_TO_JQUERYUI_CSS]); ?>

• Put the following javascript code in the page before the head section end tag:

  <script type="text/javascript">$(function(){
  $("#pickdate").datepicker(); });</script>

• Now open your browser to view the page. This should now show a datepicker.

Thats it for part1 of my take on ZendX_Jquery. I havent completed the functionality of the autocomplete textbox using ZendX_Jquery. But i will post the part 2 of this post as soon as possible.