Bonjours, dans l’article d’aujourd’hui je vais vous présenter comment réaliser une fenêtre de dialogue avec l’extension ZendX_JQuery du framework.

En première partie je vais vous exposer les erreurs affichées dans la documentation et la correction à apporter puis, comment réaliser une fenêtre avec les boutons comme « valider » ou « annuler ».

Tout d’abord, vous devez avoir eu vent de comment mettre en place l’extension JQuery. Elle est très bien expliquée sur la documentation. Si vous ne savez pas comment faire, dites le et j’expliquerai en détail comment faire.

Attention: les exemples illustrés ici utilisent JQuery en mode non conflictuel. En effet le raccourcis des fonctions ‘$’ est utilisé par plusieurs frameworks JavaScripts. Il sera donc annoté ‘$j’.

Pour en revenir à la documentation, voici la ligne qui sert à créer un dialog JQuery:
echo $this->dialog($id, $content, $params, $attribs);
Vous devez impérativement le remplacer par la ligne ci-dessous, sous peine de vous retrouver avec une erreur:
echo $this->dialogContainer($id, $content, $params, $attribs);
Pour pouvoir donc créer une fenêtre permettant de faire afficher hello World, vous devriez avoir un code ressemblant à ceci:
echo $this->dialogContainer('test', 'Hello World', array(
'bgiframe' => true,
'autoOpen' => true,
'draggable' => true,
'modal' => true,
'resizable' => false,
'title' => 'Welcome message',
'closeOnEscape' => true));

Ce qui vous donnera cette image:

Pour les boutons, c’est une toute autre histoire. En effet, nous devons dire que pour chaque bouton, nous appelons une fonction javascript. Le problème c’est que Zend nous met par défaut des guillemets autour de ces fonctions et donc, cela ne marche pas.

Nous devons donc utiliser Zend_Json_Expr() pour éviter ceci.

Voici le code que l’on obtiendrai pour supprimer convenablement un fichier (fenêtre avec bouton supprimer et annuler):
echo $this->dialogContainer('test'.$i, 'je test juste celà', array(
'bgiframe' => true,
'autoOpen' => false,
'draggable' => true,
'modal' => true,
'resizable' => false,
'title' => 'Welcome message',
'closeOnEscape' => true,
'buttons' => array('Valider' => new Zend_Json_Expr('function() { document.location=\''.$this->url(array(
'module' => 'bien',
'controller' => 'private',
'action' => 'supprimerphoto',
'fiche' => $this->numfiche,
'photo' => $laphoto->num_photo),"",true).'\'}'),
'Annuler' => new Zend_Json_Expr('function() { $j(this).dialog(\'close\');}'))));

Ce qui donnera bien cette fenêtre-ci:

Voilà, si vous avez des questions n’hésitez pas.

J’espère avoir répondu à vos questions.