Le blog de michdup

La mise en place de Jquery avec Zend est très simple et permet en quelques lignes d’améliorer l’IHM du site et de faire de l’AJAX simplement.

Voici la méthode que j’emploies :
Après avoir récupérer JQuery dans sa dernière mouture jquery-ui.zip , je copies dans public/js/ le script jquery-ui-1.8.2.custom.min.js et le script jquery-1.4.2.js.
Dans public/styles/, je copies le répertoire smoothness.

Tout est en place, on peut s’attaquer au code.

Nous commencons par le Bootstrap :

protected function  _initPlaceholders()
{
$this->bootstrap('view');
$view = $this->getResource('view');
$view->doctype('XHTML1_STRICT');
$view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8')
->appendHttpEquiv('Content-Language', 'fr-FR');
$view->setEncoding('UTF-8');
// Je définis ici l'utilisation de Jquery dans mes vues.
$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);
}

Puis au niveau de mon controller :

public function indexAction()
{
$Jquery = $this->view->Query();
$helperUrl = new Zend_View_Helper_BaseUrl( );
$Jquery->setLocalPath($helperUrl->baseUrl()."/js/jquery-1.4.2.js");
$Jquery->addJavascriptFile($helperUrl->baseUrl()."/js/jquery-ui-1.8.2.custom.min.");
$this->view->headLink()->prependStylesheet ($helperUrl->BaseUrl() .
'/styles/smoothness/jquery-ui-1.8.2.custom.css');
}

Je mets un bout de code dans ma vue :

<ul>
<li>
<?php echo $this->ajaxLink("Example 1","/cache/index/action1",array('update' =>'#content',
'noscript' => false,'method' => 'GET')); ?>
</li>
</ul>
<div id="content"> </div>
<label for="startDate">Date de début:</label>
<?php echo $this->datePicker("startDate", '',array(
'defaultDate' =>'+7','minDate' => '+7',)); ?>
<br />
<?php echo $this->jQuery();

Ceci me permettras de voir si tout se passe bien au niveau de l’affichage. La DIV « content » recevra ultérieurement les données renvoyées par un clic sur le lien.

Il ne reste plus qu’à définir dans le controller l’action effectuée par le clic sur le lien :

public function action1Action()
{
$date = new Zend_Date();
$chaine = $date->toString();
$this->_helper->json($chaine);
}

Je sais, c’est sommaire. Mais cela est fait justement pour voir la simplicité de la chose.

C’est un exemple très basique, mais cela vous permettra de donner très simplement un aspect « sexy » à vos sites développés avec Zend.