JS issues loading lists with ajax via content plugin

[sgorney]

Hey Fabrik Support:

I have the need to have two lists on the same page, so I'm loading them with the content plugin into an article. I'm currently using the 'div' template which I have plans to duplicate and customize once I have this working properly.

Currently when I use the filter to update the list then for some reason the list doesn't load any data. It does seem to have the proper rows being created but apparently the data isn't there to be displayed.

You can see an example of this here:
http://solar-fuels.org/dev/index.php?option=com_content&view=article&id=66&Itemid=125

A few things I have tried:

1. Only have one list loaded via the plugin
2. Disabling 'ajax' in the list settings
   1. The plugin doesn't seem to respect this setting
3. Going directly to com_fabrik
4. Using the 'bootstrap' template seems to work with Ajax enabled when loading via the plugin until I start to customize.

What works:
I finally found an almost working combination. If I go directly to com_fabrik and I disable ajax, then it seems to work properly, as you can see here:
http://solar-fuels.org/dev/index.php/documents/list/1?resetfilters=0&clearordering=0&clearfilters=0
I'd be happy to have the ajax disabled if I I could also get the plugin to work. The big thing here for me is having both lists on the same page.
I have enabled JS Debug in the backend. I'll also supply logins if necessary.
Thanks in advance for any help in debugging this issue.

 

[rob]

hi
Could you try editing components/com_fabrik/views/list/tmpl/div/default_row.php and replace its content with:

<?php
/**
 * Fabrik List Template: Div Row
 *
 * @package     Joomla
 * @subpackage  Fabrik
 * @copyright   Copyright (C) 2005-2013 fabrikar.com - All rights reserved.
 * @license     GNU/GPL http://www.gnu.org/copyleft/gpl.html
 */
 
// No direct access
defined('_JEXEC') or die('Restricted access');
 
?>
<div id="<?php echo $this->_row->id;?>" class="fabrik_row span6 <?php echo $this->_row->class;?>" >
<?php foreach ($this->headings as $heading => $label) : ?>
<div class="row-fluid <?php echo $this->cellClass[$heading]['class']?>">
<?php echo @$this->_row->data->$heading;?>
</div>
<?php
endforeach;
?>
</div>

I think that should fix things. The issue is that the row and cell div's didn't have the correct classes assigned to them, so when the list updates itself via ajax it can find the correct locations in the page to update the data with.

-Rob

 

[sgorney]

Hi Rob:

Thanks for the reply. That does get us a lot closer - the correct data actually is being displayed on the page now which is more than was happening before. Unfortunately it looks like the JS is not quite right as it's not updating the contents of the grid well and it's placing the HTML elements outside the area they should be in. Here's a screenshot of what it looks like after the ajax runs: http://d.pr/i/9Txs

The HTML looks out of place too:

<div class="fabrikList" id="list_2_com_content_2">
 
<div class="fabrik_groupdata">
<div class="groupdataMsg">
<div class="emptyDataMessage" style="display: none;">
No records</div>
</div>
 
<div class="row-fluid">
<div class="well span4"><!-- THIS SHOULD BE WHERE THE RECORDS GO --></div>
<div class="well span4"><!-- THIS SHOULD BE WHERE THE RECORDS GO --></div>
<div class="well span4"><!-- THIS SHOULD BE WHERE THE RECORDS GO --></div>
</div>
<!-- grid close end row --></div>
 
<div class="fabrik_row span6 fabrik_row oddRow0" id="list_2_com_content_2_row_63">
<div class="row-fluid develop_content___title fabrik_element fabrik_list_2_group_2">Dr Liebedzynski Endoreses Sofi</div>
<div class="row-fluid develop_content___introtext fabrik_element fabrik_list_2_group_2"><p>THis is my intro text</p><br>
</div>
<div class="row-fluid develop_content___fulltext fabrik_element fabrik_list_2_group_2"><br>
<p>&nbsp;this is my full text</p></div>
<div class="row-fluid develop_content___created fabrik_element fabrik_list_2_group_2">10.18.2013</div>
<div class="row-fluid fabrik_actions fabrik_element"><div class="btn-group"><a data-loadmethod="xhr" class="btn fabrik_view fabrik__rowlink" data-list="list_2_com_content_2" href="/dev/index.php/component/fabrik/details/2/63" title="View"><i class="icon-search "></i> <span class="hidden">View</span></a></div></div>
</div><div class="fabrik_row span6 fabrik_row oddRow1" id="list_2_com_content_2_row_64">
<div class="row-fluid develop_content___title fabrik_element fabrik_list_2_group_2">Sofi Featured in USA Today</div>
<div class="row-fluid develop_content___introtext fabrik_element fabrik_list_2_group_2"><p>THis is my intro text</p><br>
</div>
<div class="row-fluid develop_content___fulltext fabrik_element fabrik_list_2_group_2"><br>
<p>&nbsp;this is my full text</p></div>
<div class="row-fluid develop_content___created fabrik_element fabrik_list_2_group_2">10.18.2013</div>
<div class="row-fluid fabrik_actions fabrik_element"><div class="btn-group"><a data-loadmethod="xhr" class="btn fabrik_view fabrik__rowlink" data-list="list_2_com_content_2" href="/dev/index.php/component/fabrik/details/2/64" title="View"><i class="icon-search "></i> <span class="hidden">View</span></a></div></div>
</div><div class="fabrik_row span6 fabrik_row oddRow0" id="list_2_com_content_2_row_65">
<div class="row-fluid develop_content___title fabrik_element fabrik_list_2_group_2">Four New Industry Partners</div>
<div class="row-fluid develop_content___introtext fabrik_element fabrik_list_2_group_2"><p>THis is my intro text</p><br>
</div>
<div class="row-fluid develop_content___fulltext fabrik_element fabrik_list_2_group_2"><br>
<p>&nbsp;this is my full text</p></div>
<div class="row-fluid develop_content___created fabrik_element fabrik_list_2_group_2">10.18.2013</div>
<div class="row-fluid fabrik_actions fabrik_element"><div class="btn-group"><a data-loadmethod="xhr" class="btn fabrik_view fabrik__rowlink" data-list="list_2_com_content_2" href="/dev/index.php/component/fabrik/details/2/65" title="View"><i class="icon-search "></i> <span class="hidden">View</span></a></div></div>
</div></div>

I'm sure this is a super quick fix. Let me know if I can do anything else to help.

 

[cheesegrits]

Hmmm, I'm not convinced it's a "super quick fix". I'll defer to Rob on this one, but the div template uses a bootstrap grid, which is that class="well span4" stuff, and I don't think our list JS's _updateRows() method (which is what inserts the new row data into the template on the page after an AJAX update) groks bootstrap grids.

-- hugh

 

[sgorney]

Hi Hugh & Rob:

After putting a lot of effort into coming up with some work arounds to avoid this bug I've been able to come to a few conclusions I wanted to share -- hopefully the info will help!

1) If you add a div class outside the cell class is loaded it won't get scrapped by the ajax function. For example:

<!-- works -->
<div class="fulltext collapse">
<div class="row-fluid <?php echo $this->cellClass[$heading]['class']?>">
<?php echo @$this->_row->data->$heading;?>
</div>
</div>
 
<!-- doesn't work -->
<div class="row-fluid <?php echo $this->cellClass[$heading]['class']?>">
      <div class="fulltext collapse">
<?php echo @$this->_row->data->$heading;?>
</div>
</div>

This isn't too terrible because I can pin additional css / JS to the class on the outside and still style things as needed. What really is a bummer though is that I can't use any semantic HTML here. I would like to use a few different HTML elements like <h2>, <h5>, etc.. and it doesn't appear that I can do that.

2) When using Ajax filters the row ID is not available in the template anywhere. For example this code fetches the row ID:

<?php echo $this->_row->id;?>

But if you try to use that in your script later it will simply not be there. For example I tried to do this:

<div class="fulltext_<?php echo $this->_row->id;?> collapse">
<div class="row-fluid <?php echo $this->cellClass[$heading]['class']?>">
<?php echo @$this->_row->data->$heading;?>
</div>
</div>
 
<!-- later on I can have a bootstrap accordion toggle on that element -->
<a class="toggle collapsed" data-toggle="collapse" data-target=".fulltext_<?php echo $this->_row->id;?>">
    <div class="chevron"></div>
</a>

If you do this the ID is simply not there. In fact if you simply go to the top of the template and do:

<?php
print_r($this->_row;)
exit();
?>

The object will be completely empty. I'm assuming that's because the Ajax hasn't run yet or something like that. But it creates a really big problem as I can't reuse the ID anywhere (see the accordion example).

I think Hugh is probably right there may not be a quick fix here. I'm suspecting the big issue is that the Ajax doesn't look at my customized HTML and just rewrites the DOM in some default way. That's really rough to deal with!

I've almost got this working the way I need it too. It looks like to complete my accordion I'll be writing some JQuery to pop in the ID as I can't think of any other way to get it server-side. Ideas on fixing this would be appreciated.

Let me know if I can help to solve this.