I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
No problem there.
ReplyDeleteAdd ZendX_JQuery to your library if you use autoload.
Then extend ZendX_JQuery_Form to your needs.
Do your stuff in the init() method of your class.
For example, I was able to create an AutoComplete field which has regular Zend_Form validation plus JQuery behavior like this:
$elem = new ZendX_JQuery_Form_Element_AutoComplete(
'query',
array('Label' => 'Search',
'required'=>true,
'filters'=>array('StripTags'),
'validators'=>array(
array('validator'=>'StringLength',
'options'=>array('min'=>'3'),
'breakChainOnFailure'=>true
),
array('Alnum')
)
)
);
$elem->setJQueryParams(array('data' => array(),
'url' => 'my_autocomplete_callback.php',
'minChars' => 1,
'onChangeInterval' => 500,
)
);
Then I even changed the default decorators like this:
$elementDecorators = array(
array('UiWidgetElement', array('tag' => '')),
array('Errors', array('tag' => 'div', 'class'=>'error')),
array('Label'),
array('HtmlTag', array('tag' => 'div')),
);
$elem->setDecorators($elementDecorators);
And finally add to my form (remember I'm in the init() so I'll address it via $this):
$this->addElement($elem);
There you are, the magic is done.
PS: don't forget to add the following in your bootstrap:
$view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
Well, Zend_Form will not generate any client-side JavaScript validators for you, if that's what you mean.
ReplyDeleteBUT: You can just do all the validation on the server, and use jQuery to hook into the fields' change events, and to AJAX-ify the form validation.
Check that for a sample.
http://web.archive.org/web/20100814175334/http://steven.macintyre.name/zend-framework-jquery-form-validation-plugins/
ReplyDeleteHere we show how to add a plugin to the Zend framework to handle the client side vlidation