Click one table column reloading other table with AJAX

#1

Documentation section about View reloading provides a good example, where a Grid would contain two button for filtering certain type of records (“Filter Girls” and “Filter Boys”):

I decided to extend this basic example and create a 2-column page. The left column would contain a Grid View with various “Types” and clicking on a row would reload right column passing the ID as an argument. The right column would then show only record of specific type.

I’ve used the Grid on my left-side column, but it could be any type of Lister with your custom template.

$cc=$this->add('Columns');
$c1 = $cc->addColumn(6);
$c2 = $cc->addColumn(6); // Number 6 is the size based on 12-row grid, see http://css.agiletoolkit.org/

For the Model I’ve used static one, but you should use your own model. Here is how I defined mine, if you are curious:

$m_types=$this->add('Model');
$m_types->addField('name');
$m_types->setSource('Array', ['All', 'Green', 'Blue', 'Red']);

Next, I’m populating left column with title and grid with a data:

$c1->add('H2')->set('Select Type');
$g1 = $c1 -> add('Grid');
$g1 ->setModel($m_types);

At this point you can refresh your page and it should look like this:

Next I’d like to use a hover effect on a row. The JavaScript code would be something along the lines of:

$(grid_id).find('tbody tr').hover(
    function() { $(this).addClass('atk-swatch-blue') },
    function() { $(this).removeClass('atk-swatch-blue') }
).css({'cursor': 'pointer'});

You could create a custom function, but the code seems simple enough to use Agile Toolkit jQuery Chains:

$g1->js(true)->find('tbody tr')->hover(
    $g1->js()->_selectorThis()->addClass('atk-swatch-blue')->_enclose(),
    $g1->js()->_selectorThis()->removeClass('atk-swatch-blue')->_enclose()
)->css(['cursor'=>'pointer']);

To be sure I’ve added ->debug() at the end of js() statement as I was putting it together. Make sure you don’t forget ->_enclose() which wraps chains into function() { .. }. At this point you can refresh your page and test hover effect. (Note: In current version there is a bug in css.agiletoolkit.org which prevents row from being highlighted properly. The fix is coming shortly. You can use a custom class or style in a meanwhile).

Next I must click event and bind it with reload. If you looked at original article then reload() takes an array as an argument containing GET arguments. The values of that array can also contain JS chains, and we will use the chain to specify ID of a currently clicked record. I’ll start by testing this with alert()

$g1->on(
    'click',
    'tbody tr',
    $c2->js()->univ()->alert(   // $.univ().alert()
        $this->js()->_selectorThis()->data('id')  // $(this).data('id')
    )
);

Once you have confirmed this to work, let’s proceed with the reload. Replace the code with:

$g1->on(
    'click',
    'tbody tr',
    $c2->js()->reload(
        ['type_id'=>$this->js()->_selectorThis()->data('id')]
    )
);

Finally we need to have something in our right column that could display us the result of reloading. Normally it would be a grid or a form, but for my purpose I’ll simply put a message here:

if($_GET['type_id']){
    $c2->add('H2')->set('Showing type='.$_GET['type_id']);
}else{
    $c2->add('H2')->set('Showing for all results'.rand());
}

The condition will pick the “id” passed through GET argument and display in right column.

I hope this tip was helpful.

Have you got interesting trick for Agile Toolkit? Share your Agile Toolkit tips here.

1 Like
#2

I have added the example inside the “Sink” application:

http://sink.agiletoolkit.org/js/boys-n-girls