[SOLVED] Custom javascript files with Zendx

Custom javascript files with Zendx_JQuery

I had lot of problems enabling jQuery within my Zend application, but I can now display a datePicker instanciated like this in a view:

view : index.phtml

echo $this->datePicker("dp1",
        '',
        array(
           'defaultDate' =>
               date('Y/m/d', time())));

The problem is that I would like to place jQuery elements manually and manage them with a javascript file like this :

view : index.phtml

$this->jQuery()->AddJavascriptFile($this->baseUrl().'/js/jq.js');
...
echo "Pick your Date: <div id='datePicker'></div>"

Script : jq.js

$(document).ready(function(){
    $("#datePicker").datepicker();
    alert('hello');
});

But it doesn't work, no alert, and no inline datePicker in the div.

note : the css, jQuery, jQuery-ui and jq.js are loaded.

and here is my configuration :

bootstrap :

function _initViewHelpers(){
        $this->bootstrap('layout');
        $layout = $this->getResource('layout');
        $view = $layout->getView();
        $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
        $view->addHelperPath('App/View/Helper/', 'App_View_Helper');
        $view->addHelperPath('ZendX/JQuery/View/Helper', 
        'ZendX_JQuery_View_Helper');

        ZendX_JQuery_View_Helper_JQuery::enableNoConflictMode();


        $view->jQuery()
            ->setLocalPath('../js/jquery-1.5.1.min.js')
            ->setUILocalPath('../js/jquery-ui-1.8.13.custom.min.js')
            ->addStyleSheet('../css/flick/jquery-ui-1.8.13.custom.css');

        ZendX_JQuery::enableView($view);
        Zend_Dojo::enableView($view);
        $view->dojo()
            ->setLocalPath('/public/js/dojo/dojo.js')
            ->addStyleSheetModule('dijit.themes.tundra')
            ->setDjConfigOption('parseOnLoad', true)
            ->disable();

        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper(
        'ViewRenderer');
        $viewRenderer->setView($view); 
    }

Layout :

echo $this->jQuery();

I tested this in the layout and in my view but it doesn't work either :

$this->jQuery()->enable();
$this->jQuery()->uiEnable();

Does someone have an idea? I'm stuck on this issue for 2 days...

[edit] I had to set js files at the bottom of my view this way :

echo $this->headScript()->appendFile('/public/js/jq.js');
echo $this->headScript()->appendFile('/public/js/jquery-1.5.1.min.js');
echo $this->headScript()->appendFile('/public/js/jquery-ui-1.8.13.custom.min.js');
echo $this->headLink()->appendStylesheet('/public/css/flick/jquery-ui-1.8.13.custom.css');

And it works, but I have now to find a way to manage conflicts between tundra's stylesheet and jquery-ui's stylesheet, since dojo's stylesheet is set like this <body class="tundra">

Solution

Unless you really have to integrate with Zend Framework for some reason, I suggest you keep it simple and just include jQuery files in your layout or scripts like you would on a regular website. You can add page-specific scripts to any view script easily:

$this->headScript()->appendFile("/path/to/myPage.js");

I found this to be more straightforward and easier to do than mess with Zend's jQuery functions.