#jquery-api

We usually have a form for input data entries. In ZKGrails 2, there are 3 methods, `.link()`, `.unlink()` and `.bind()`, related to this feature. For example, we have a `` containing several input boxes: Then we can call: $('#form').link(null, [id: "textbox", name: "combobox" ]) To prepare a binding. Later when we get an instance of object to bind, just call: $('#form').bind(obj) Your **obj.id** will be binding to the "textbox", and **obj.name** will be binding to the "combobox" in the `` form. To stop the data-binding or you may want to bind this form with different set of properties, call: $('#form').unlink()

Since ZKGrails 2.1, the JQuery class has been implemented as a subclass of AbstractList. This means we can use all Collection methods over a query result. For example, if we'd like to collect all texts from selected components, we can use method .collect(): def txt = $('textbox, intbox, doublebox') .collect { $(it).text() } .join(' ') alert(txt) Another example is when we'd like to sum over the **first column** of a Listbox we can do as following: def sum = $('#master listitem listcell:first-child') .sum { $(it).text().toInteger() } alert(sum)

It's a common pattern to remove some entries from a listbox, a combobox or a grid's rows. Using a selector with method **detach()** will be making this convenient. For example, $('#mylistbox > listitem').detach() The above code removes all listitems that belong to #mylistbox. $('#grid > rows > row').detach() The above is doing so for a grid. $('#combobox > comboitem').detach() For a combobox, we can select all comboitems and just call method **detach()**.

Sometime we'd like to have a "clear" Button to clear all input boxes in our form. Here's a quick way to do so. $("button[label='Clear']").on('click', { $('textbox, intbox, decimalbox, datebox').text('') })

If a component can be focused, it means we can move a cursor into it. The following example shows how to handle Enter keys to move a cursor to each input box. $('#name' ).on('ok', { $('#category').focus() } ) $('#category').on('ok', { $('#unit' ).focus() } ) $('#unit' ).on('ok', { $('#save' ).focus() } )

We'd usually like to know which item will be selected on a Listbox. In ZKGrails 2, we can handle the onSelect event using the following syntax: $('#master').on('select', { def catId = $(it).val() def cat = Category.read(catId) $('#detail').load(cat.products) }) In the above code, there is a Listbox with id "master". When an item of the master Listbox is selected, we can get: 1. the selected item using expression **$(it).getSelectedItem()** or **it.target.selectedItem**. 2. the selected value using **$(it).val()**. Please note that the **it** variable in the block is of type [SelectEvent](http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/SelectEvent.html). A selected value is a "value" of Listitem inside the Listbox. In the below example, the value is a Category's id. $('#master').append { for(cat in categories) { listitem(value: cat.id) { listcell(label: cat.id) listcell(label: cat.name) } } }

Basically, we always want to handle some UI events in our applications. In ZKGrails 2, we use a similar syntax to jQuery for handling event of UI compoments. Here's how to have a click handle for component Button with id **btnSave**. $('#btnSave').on('click', { obj.save() })

Similar to jQuery, we use **$(...)** for selecting UI components in ZKGrails 2. Selector functionality is a subset of those in jQuery. Here's the supported features: $('label') // a Label component $('#main') // the component with id 'main' $('button[label="OK"]') // buttons with label 'OK' $('window > listbox') // listboxes whose parent is window $('window combobox') // comboboxes which are under window $('listbox, combobox') // all listboxes and comboboxes $('#main, #left') // components with id 'main' and 'left' $('.strike') // components with sclass 'strike' $('#main listcell:first-child') // 1st column listcell children of #main $('combobox + textbox') // immediate textbox sibling of comboboxes $('combobox ~ textbox') // textbox siblings of comboboxes