Customize data elements on Ajaxify List Navigation

[startpoint]

I know about trivial way to customize standard elements from this thread:
http://fabrikar.com/forums/index.php?threads/ajaxify-list-navigation.26043/#post-138595,
Would you variant to customize json string before replacing standard html list. I tried with list_X.js file, but what I want to change is updated with results from Ajax and the code does not work.
I tried to create my own custom list template based on div list template with custom element code, but I have problem. After list loaded all div blocks updated with first block with first id.
My code for example:

<?php
/**
* Fabrik List Template: Div Row
* Note the div cell container is now generated in the default template
* in FabrikHelperHTML::bootstrapGrid();
*
* @package     Joomla
* @subpackage  Fabrik
* @copyright   Copyright (C) 2005-2016  Media A-Team, Inc. - All rights reserved.
* @license     GNU/GPL http://www.gnu.org/copyleft/gpl.html
*/

// No direct access
defined('_JEXEC') or die('Restricted access');

$id= $d=@$this->_row->data->table_name___id;

?>
<span class="title">  <?php echo '<p>table_name___id: ' . $id. '</p>'; ?> </span>

Video with the problem:
https://www.screencast.com/t/KEKo4w7KA4a

 

[cheesegrits]

Yes, If you want to do AJAX nav, you'll have to maintain the same overall structure as our div template, with a container with class fabrikDataContainer, and individual cells with class fabrik_row. The fabrikDataContainer will also need a data attribute specifying the number of cols, data-cols="4" (or whatever).

That structure is required so the list Javascript that does the AJAX update can insert the data into the row template. When you do AJAX navigation, the response from the server isn't the formatted HTML, it's a JSON data structure with just the row data, which we then insert into a "template" of your row structure. So we need that class structure so we can find the right HTML elements to insert data into. Which is fairly easy for normal table style templates, as it's just tr's, with td's in them that have the element ids. But for div templates, with multiple list "rows" per display row, it gets more involved, and we need a basic structure to be in place.

So basically, start with our div template, and modify it. You can remove and change most of it, except that basic row / cell container structure.

-- hugh

 

[startpoint]

Hi,
I tried many times, but with no luck.
Please, give me more info with simple example where correct to place that code

<div><?php echo $this->_row->data->table_name___id ?></div>

and change another code to show only each id for every row with ajax navigation option enabled.
Thank's in advance.

 

[cheesegrits]

I can't really give you more info, other than to say look at the structure we output with the standard div template, which is ...

<div class="row-fluid <?php echo $this->cellClass[$heading]['class'] ?>">
    ... label and value ...
</div>

So ...

<div class="title row-fluid <?php echo $this->cellClass['table_name___id']['class'] ?>">
    table_name___id:  <?php echo $d; ?>
</div>

Should be able to make that outer div a span if you want.

the important bit is including this->cellClass['table_name___id']['class'] in the div (or span) classes. That adds the element name and a couple of other classes that the _injectItemData() method needs to identify the wrapper for each element.

If you look at the source of the standard div template, you'll see that each "row" (actually multiple "rows" in the Fabri list sense, but we'll call those cells for this) looks like ...

<div class="row-fluid">
    <div class="fabrik_row well row-striped fabrik_row span4 oddRow0" id="list_12_com_fabrik_12_row_1">
        <div class="row-fluid yourtable___id fabrik_element fabrik_list_12_group_12">1</div>
        <div class="row-fluid yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="row-fluid yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>
    </div>
    <div class="fabrik_row well row-striped fabrik_row span4 oddRow0" id="list_12_com_fabrik_12_row_2">
        <div class="row-fluid yourtable___id fabrik_element fabrik_list_12_group_12">2</div>
        <div class="row-fluid yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="row-fluid yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>
    </div>
    <div class="fabrik_row well row-striped fabrik_row span4 oddRow0" id="list_12_com_fabrik_12_row_3">
        <div class="row-fluid yourtable___id fabrik_element fabrik_list_12_group_12">3</div>
        <div class="row-fluid yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="row-fluid yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>
    </div>
</div>

... so 3 cells in a row, each cell is one Fabrik list "row".

You can leave out the strictly layout related classes, like row-fluid, span4, oddRow0, or row-striped, but you have to maintain that basic "shape" with the rest, so something like this would be the minimal structure...

<div class="row-fluid">
    <div class="fabrik_row " id="list_12_com_fabrik_12_row_1">
        <div class="yourtable___id fabrik_element fabrik_list_12_group_12">1</div>
        <div class="yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>
    </div>
    <div class="fabrik_row" id="list_12_com_fabrik_12_row_2">
        <div class="yourtable___id fabrik_element fabrik_list_12_group_12">2</div>
        <div class="yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>
    </div>
    <div class="fabrik_row" id="list_12_com_fabrik_12_row_3">
        <div class="yourtable___id fabrik_element fabrik_list_12_group_12">3</div>
        <div class="yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>
    </div>
</div>

... of which your default_row.php needs to be outputting the ...

        <div class="yourtable___id fabrik_element fabrik_list_12_group_12">3</div>
        <div class="yourtable___element1 fabrik_element fabrik_list_12_group_12">
           ... label and value for element1 ...
        </div>
        <div class="yourtable___element2 fabrik_element fabrik_list_12_group_12">
           ... label and value for this element2 ...
        </div>

... part.

 

[startpoint]

After following instructions to keep the structure as if everything is working.
But again remains the problem with customizing the data. For example, I have a textarea element. It should be included in the list, but only the first 100 characters of it. My other element is from repeatgroup with images, from which want only the first image to displayed. Without Ajax, I've done it, but with Ajax did not know how to process these 2 elements.
Any suggestion?