ZendX_JQuery dialogContainer usage

Question

I'm aming to make use of the ZendX_JQuery dialogContainer view helper, in order to produce a modal window, were users can input specified information(for example send a message). I'm trying to use the dialogContainer view helper in this fashion.

First of, include the ZendX library in the applications library folder.

Secondly, include the following row in the initViewHelper method within the Bootstrap.php file

"$view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');"

third, adding the following conditional enabling of js in the layout.phtml

  "<?php if($this->jQuery()->isEnabled()){
              $this->jQuery()->setLocalPath($this->baseUrl()
              .'/js/jquery/js/jquery-1.4.2.min.js')                   
              ->setUiLocalPath($this->baseUrl()
              .'/js/jquery/js/jquery-ui-1.8.custom.min.js')                   
              ->addStylesheet($this->baseUrl()
              .'/js/jquery/css/ui-lightness/jquery-ui-1.8.custom.css');
              echo $this->jQuery();
        }
   ?>"

fourth, creating my Application_Form_JQueryForm extending ZendX_JQuery_Form

   "<?php
     class Application_Form_JQueryForm extends ZendX_JQuery_Form
      {
       private $form;

       public function init()
      {
         $this->form =  $this->setAction(Zend_Controller_Front::getInstance()->getBaseUrl() . '/index/index')
                      ->setMethod('post');


    $this->form->setDecorators(array(
        'FormElements',
        'Form',
        array ('DialogContainer', array(
            'id'    => 'tabContainer',
            'style' => 'width: 600px;',
            'title' => 'Send a private message to Kalle',
            'JQueryParams'  => array(
                'tabPosition'   => 'top',                    
            ),
        )),
    ));

   $topic = new Zend_Form_Element_Text('topic');
    $topic->setValue('topic')
          ->setRequired(true)
          ->setValidators(array('validators' => array(
              'validator' => 'StringLength',
              'options' => array(1,15)
          )))
          ->setDecorators(array(
               'ViewHelper',
               'Description',
               'Errors',
               array('HtmlTag', array('tag' => 'dl'))));

    $textarea = new Zend_Form_Element_Textarea('textarea');
    $textarea->setValue('post a comment')
             ->setAttribs(array(
                 'rows' => 4,
                 'cols' => 20
             ))
             ->setRequired(true)
             ->setValidators(array('validators' => array(
              'validator' => 'StringLength',
              'options' => array(1,15)
             )))
             ->setDecorators(array(
               'ViewHelper',
               'Description',
               'Errors',
                 array('HtmlTag', array('tag' => 'dl'))));

    $submit = new Zend_Form_Element_Submit('submit');
    $submit->setLabel('Send your comment')
           ->setDecorators(array(
               'ViewHelper',
               'Description',
               'Errors',
               array('Description', array('escape' => false, 'tag' => 'span')),
               array('HtmlTag', array('tag' => 'dl'))))
            ->setDescription('or <a href="/index/index/send/false">Cancel</a>');


    $this->form->addElements(array($topic, $textarea, $submit));       
}

}" This form is then instanciated in the controllers action method, and called in the view.

And so to the problem of mine, no matter what i try, in order to for instance set, the width of the dialogContainer or any other parameter (color, css, height, so on and so forth), this being in the JQueryForm's setDecorator part for the form, i can't seem to get any change whatsoever in the resulting modal when called in the view, any help in the proper direction would be greatly appreciated

Thanks in advance, Kalle Johansson

Answer 1

A late answer for sure - but lots of views - so figured I would answer. The parameters you want to set for the modal should be set from the JQueryParams array. So - for example:

$this->form->setDecorators(array(
   'FormElements',
   'Form',
   array ('DialogContainer', array(
           'id'           => 'tabContainer',
           'style'        => 'width: 600px;',
           'title'        => 'Send a private message to Kalle',
           'JQueryParams' => array(
               'tabPosition' => 'top', 
               'width'       => '600',
               'height'      => '450'
       ),
   )),
));

You can find these param options on the jQuery UI site.

LK