Binding Chains

When you execute the js() method, the first argument you specify defines when the action is to take place. The example below demonstrates how you can bind chains to different events.

Result

never

load

click

mouseover

 

Code

$page->add('H3')->set('never')
    ->
js()->effect('highlight');

$page->add('H3')->set('load')
    ->
js(true)->effect('highlight');

$page->add('H3')->set('click')
    ->
js('click')->effect('highlight');

$page->add('H3')->set('mouseover')
    ->
js('mouseover')->effect('highlight');

Re-binding

You can bind one single chain to multiple events. The example below binds the same chain to both buttons:

Result

 

Code

$b1=$page->add('Button')->set('Left');
$b2=$page->add('Button')->set('Right');

$chain=$b1->js('click')->effect('highlight');
$b2->js('click',$chain);

This combination allows you to enable many useful actions involving different components on your page. In the form below, the icon's "click" event and the age field's "change" event have binding chains interacting other objects.

Result

 

Code


$form
=$page->add('Form');
$age=$form->addField('line','age');
$name=$form->addField('line','name');
$res=$form->addField('line','result');

$age->add('Icon',null,'after_field')->set('plus')
    ->
js('click',$age->js()->val('123'));

$name->js('change',$form->js()->submit());

if(
$form->isSubmitted()){
    if(
$form->get('age')<20){
        
$res->js()->val('Credit Declined')
            ->
execute();
    }else{
        
$res->js()->val('Credit Approved')
            ->
execute();
    }
}

I wish my bank would work like this.

A note in regards to the execute() function: it's a special function inside the JavaScript chain, which will instantly send the chain back to the function widget and execute it. This can be used only when the form is submitted. Note, that you do not need to bind a chain you are about to execute.