Enclosing Chains

While it seems quite simple on the PHP side, the code generated by chain is different depending on the event you bind it with. For example, when you leave the argument to js() blank (null), then the chain code will not appear in your page source at all. If you specify "true", then it's executed immediately. If you specify any action, however, then it's enclosed into a function and bind()'ed to the element of your choice.

$js $page->js()->hide();
// Produces nothing

$js $page->js(true)->hide();
// Produces: 
// $('#AgileWeb_learn_understand_chains_enclose_doc_example_view').hide();

$js $page->js('click')->hide();
// Produces: 
// $('#AgileWeb_learn_understand_chains_enclose_doc_example_view').bind('click',
//    function(ev){ ev.preventDefault();ev.stopPropagation(); 
//       $('#AgileWeb_learn_understand_chains_enclose_doc_example_view').hide() 
//  });

Copying a value

There are cases, however, when you want to use the chain to generate a value to be used as an argument.

Below is a simple implementation, showing how to copy a value from one input field into another. In plain jQuery this would look like $('field1').val( $('field2').val() ) - quite frankly, it looks just as simple as an Agile Toolkit chain.

Result

 

Code


$form
=$page->add('Form');
$phone=$form->addField('line','phone');
$mobile=$form->addField('line','moblie');

$phone->js('change',
    
$mobile->js()->val(
        
$phone->js()->val()
        )
    );

Enclosing function

In other cases, however you need to put a chain inside a function, to be used as an argument. This is used in JavaScript when specifying handlers or actions. Agile Toolkit allows you to use the _enclose() function on chains, which will make it return a function containing the chain, rather than the plain chain.

Result

Name Surname
John Smith18
Peter Tester31
Joe CLICK ME Blogs5
Bill Chill34
 

Code

$data=(array(
  array(
'name'=>'John','surname'=>'Smith'.rand(1,20)),
  array(
'name'=>'Peter','surname'=>'Tester'.rand(20,40)),
  array(
'name'=>'Joe CLICK ME','surname'=>'Blogs'.rand(1,20)),
  array(
'name'=>'Bill','surname'=>'Chill'.rand(20,40))
));

$grid=$page->add('Grid');
$grid->addColumn('name');
$grid->addColumn('surname');
$grid->setStaticSource($data);

$grid->js(true)->find('tbody tr')->eq(2)->find('td')->click(
    
$grid->js()->effect('bounce')->_enclose()
);

Clicking on Joe Blogs's name or surname will make the grid bounce. Without enclose, however, the bouncy java-script chain would be executed as an argument and not encapsulated as a function for the event.