Best way to start using jQuery in a Zend Framework

2019-01-21 07:25发布

问题:

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?

回答1:

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()
{
    $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.



回答2:

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.



回答3:

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.



回答4:

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();


回答5:

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(); ?>


回答6:

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

<head>
    <?php echo $this->jQuery(); ?>
</head>

and use jQuery UI functions in ur view file: Pick your Date:

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