Blogpost: Using ZendX_JQuery_Form and a custom view script
Using ZendX_JQuery_Form and a custom view script
A while ago I was looking into the awesome features of ZendX, an extension to the Zend Framework that as the time of writing still comes as an extra, but is most likely to be part of the framework in the nearby future.
ZendX lets you use some great jQuery features, all the Zend-way. To learn how you can implement ZendX_JQuery I refer to an excellent videotutorial, which you can find at Zendcasts. To create an autocomplete text-field I used this tutorial, however, there's no Zend_Form created and that was what I needed.
After some searching I found out how to implement and use it in a custom Zend view-script. Here’s how:
First of all, create your Zend Form, but this time let it extend the ZendX_JQuery_Form class. This will allow you to use some ZendX_JQuery specific features, such as auto completion. Let’s create two text-input fields, one with auto completion and one without.
class MyCustom_Form extends ZendX_JQuery_Form { public function init() { $text = $this->createElement('text', 'text'); $text->setLabel('Text:'); $this->addElement($text); $autocomplete = $this->createElement('AutoComplete', 'autocomplete'); $autocomplete->setLabel('Autocomplete:'); $autocomplete->setJQueryParam('source', '/controller/action'); $this->addElement($autocomplete); } }
Notice that we create an element of type AutoComplete and also set the setJQueryParam to the url that will provide the auto completion-data (probably json).
After creating an instance of the form and passing it on to the view, you could simply do
<?php echo $this->form; ?>
and it would work.
However, if you plan to create a custom layout for your form, you will have to create something like this:
<?php $form = $this->form; ?> <form method="<?php echo $form->getMethod() ?>" action="<?php echo $form->getAction()?>"> <table> <tr> <td><?php echo $form->text->renderLabel(); ?></td> <td><?php echo $form->text->renderViewHelper(); ?></td> <td><?php if(count($form->text->getMessages()) > 0) { ?> <ul class="error"> <?php foreach ($form->text->getMessages() as $message) { ?> <li><?php echo $message;?></li> <?php } ?> </ul> <?php } ?> </td> </tr> <tr> <td><?php echo $form->autocomplete->renderLabel(); ?></td> <td><?php echo $form->autocomplete->renderUiWidgetElement(); ?></td> <td><?php if(count($form->autocomplete->getMessages()) > 0) { ?> <ul class="error"> <?php foreach ($form->autocomplete->getMessages() as $message) { ?> <li><?php echo $message;?></li> <?php } ?> </ul> <?php } ?> </td> </tr> </table> </form>
Notice that by the autocomplete-field , instead of using renderViewHelper(), we have to use renderUiWidgetElement(), as the former won’t work! I spent quite some time finding this out, so I’m glad to share it and hope people who are searching for a solution to the same or similar “problem” will find it.
Cheers.
Reacties
1 | geplaatst op 11 januari 2011 om 09u10 door Frederik
Because this is my first post making use of code-highlighted text, I big thank you to Mathias Bynens is at place. He has been a great help setting this feature up!
2 | geplaatst op 13 april 2011 om 10u30 door Guillaume
Thanks! It's very useful.
3 | geplaatst op 8 juni 2011 om 16u49 door Alex
OMG thanks a lot for this hint... I was actually trying to render manually a zendX form. I found out that the classic renderViewHelper() wasn't working for the jquery element and was telling myself that that was really too specialized request to look on the web... But you did talk about it ;) Dank U well anyways...
4 | geplaatst op 1 augustus 2012 om 00u14 door Rishi Kalia
Sure, it works. Good research.