How to add jQuery event callback functions to Zend Form element

Question

I'm creating a Zend Form in which I want to insert a date span. The form is enhanced using the jQuery UI library, so I have a date from and a date to field, which are both datepicker elements. This is working fine; here is this part of the Zend_Form:

  // Date range
  $date = $this->getView()->date(time());
  $this->addElement('DatePicker', 'userday_from', array(
     'label'        => 'Datum van',
     'value'        => $date,
     'jQueryParams' => array(
        'defaultDate' => $date,
        'dateFormat'  => $this->getView()->date()->getFormatJquery()
     )
  ));
  $this->addElement('DatePicker', 'userday_to', array(
     'label'        => 'Datum tot',
     'value'        => $date,
     'jQueryParams' => array(
        'defaultDate' => $date,
        'dateFormat'  => $this->getView()->date()->getFormatJquery()
     )
  ));

When the first date is changed, I want to update the second date. jQuery datepicker has an onSelect event for this. However, I'm unable to add a function callback to the jQueryParams:

  $this->addElement('DatePicker', 'userday_from', array(
     'label'        => 'Datum van',
     'value'        => $date,
     'jQueryParams' => array(
        'defaultDate' => $date,
        'dateFormat'  => $this->getView()->date()->getFormatJquery(),
        'onSelect'  => "function(){ alert('test'); }"   // ! is not working
     )
  ));

I therefore try to add this jQuery 'option' afterwards like this:

  $this->getView()->jQuery()
     ->addOnload("
        $('#userday_from').datepicker('option', 'onSelect', function(selectedDate){
           alert('test');
        });
     ");

This, on the other hand, adds the new jQuery in the document.ready() function, BEFORE the intialization functions of my datepicker elements and thus doesn't work either:

<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
            $('#userday_from').datepicker('option', 'onSelect', function(selectedDate){
               alert('test');
            });
    $("#userday_from").datepicker({"defaultDate":"09-11-2012","dateFormat":"dd-mm-yy"});
    $("#userday_to").datepicker({"defaultDate":"09-11-2012","dateFormat":"dd-mm-yy"});
});
//]]></script>

I don't want to overwrite the datePicker viewhelper in order to hack something like this in it. This is something to tie 2 form elements together, so adding it to the Zend_Form init() function seems valid to me.

score 1 · Answer 1 · answered Dec 30 '13 at 11:10

1

It's old question, but to use function callback with Zend use Zend_Json_Expr

In your case:

'onSelect'  => new Zend_Json_Expr("function(){ alert('test'); }")

answered Dec 30 '13 at 11:10

Phillip Kamikaze

144
8

A nice addition, but no answer to my question. – raps Dec 31 '13 at 13:04
Had checkout it? http://stackoverflow.com/questions/887696/jquery-datepicker-onselect-wont-work – Phillip Kamikaze Jan 07 '14 at 09:54

score 0 · Answer 2 · answered Nov 27 '12 at 17:34

this probably doesn't really solve your problem. However, I hope it points you to the right direction. As Benjamin pointed out here, ZendX jQuery will be discontinued. He also points out why generating jQuery code out of ZF isn't a good idea. I personally fully agree with Benjamin.

ZendX_Jquery will generate bad code by default. Not only that it generates bad code, it makes you also stop thinking about what you are actually doing, i.e. which code will be generated. Moreover, it generates "inline" code, i.e. it will generate javascript code which is directly embedded in your HTML code and thus wont be cached by your users browser. Actually, I'm not even sure if it generates unobtrusive javascript code at all.

Putting it all together I would strongly recommend to skip using ZendX_JQuery.

Bye, Christian

How to add jQuery event callback functions to Zend Form element

2 Answers2