Customizing Selectors and Triggers

It's amazing how much you can do with JS Chains. But even more is possible.

Changing selectors

$view->js(true)->hide();
// $('#AgileWeb_learn_understand_unique_id').hide()

$view->js(true)->_selector('.myclass')->hide();
// $('.myclass').hide()

$view->js(true)->_selector('#Content')->hide();
// $('#Content').hide()

$view->js(true)->_selectorThis->hide();
// $(this).hide()

$view->js(true)->_selectorDocument->hide();
// $(document).hide()

$view->js(true)->_selectorWindow->hide();
// $(window).hide()

$view->js(true)->_selectorRegion->hide();
// $(region).hide()

You can already see the potential of this feature. When binding to an event selector you can reference "this" in the enclosed function - it works great!

The last example refers to "region", which is a global variable pointing to the area which is being loaded via the AJAX request.

Calling functions you can't call

PHP might not let you use some of the function names such as "each" or "for". The "execute" function also has a special meaning to JS chain. If you want to use these functions, then:

$view->js(true)->_fn('execute',array(1));
// converts into .execute(1)

Using custom trigger

jQuery allows you to define custom events, and then trigger them. Here is a good example.

Result

Bouncy text

Another Bouncy text

 

Code

$page->add('P')->set('Bouncy text')
    ->
js('all_bounce')->effect('bounce');

$page->add('P')->set('Another Bouncy text')
    ->
js('all_bounce')->effect('bounce');

$page->add('Button')->set('Bounce all')
    ->
js('click',$page->js()->find('p')
    ->
trigger('all_bounce'));

This approach is good when you can't physically access objects, and yet need to bind actions between them. For example, in CRUD, when you edit an element in the expander, it uses a custom reloading event to refresh the grid.

...
$this->js('reload',$this->grid->js()->reload());
...
$this->form->js(null,$this->js()->trigger('reload'))->univ()->closeDialog()->execute();
...