Problem Javascript : Cannot read property 'getElement' of null

[csim]

Hello,
On my website which worked well, I've got this now when I'm searching in a fabrik list :
list.js:3 Uncaught TypeError: Cannot read property 'getElement' of null
at Object.setItemTemplate (list.js:3)
at Object.e.extend.$owner (

Have you got an idea ?

Joomla : 3.7.5
Fabrik : 3.7

Best Regards

 

[cheesegrits]

For any JS issues, I need to see your page.

Can you point me at the list.

Apologies for the delay, I was travelling in the UK, visiting family.

-- hugh

 

[csim]

Hello,

I've started a conversation with you in order to give informations.

Best Regards

 

[cheesegrits]

Hmmm, not sure how that would have ever worked with AJAX nav.

You are using a custom template, but you haven't kept some of the structure we need in order for our JavaScript to find DOM elements. In this case, when you do an AJAX reload (the search) our JS needs to find a div (or whatever) with the class 'fabrik_row', so it can use that as the template to rebuild the list rows from.

So the error is happening when we try and find that fabrik_row, and can't find it, so we don't know how to build the new content.

So for instance, in our 'div' template, we do that in in the default.php ...

    $items = array();
    foreach ($group as $this->_row) :
        $items[] = $this->loadTemplate('row');
    endforeach;
    $class = 'fabrik_row well row-striped ' . $this->_row->class;
    echo FabrikHelperHTML::bootstrapGrid($items, $columns, $class, true, $this->_row->id);

... whedre we call the 'row' template to build each item, then we bust that up into as many div's per row as required, using our bootStrapGrid() function, giving it fabrik_row as one of the classes to apply to each "row".

So basically, you need to add fabrik_row to the outer div of each of your rows.

-- hugh

 

[csim]

Hello,

I don't understand. The outer div of each row has the class fabrik_row.

Best Regards

 

[cheesegrits]

Ah, sorry, I misread the debug info on your page.

The missing DOM element is the ...

<div class="fabrikList" id="list_<?php echo $this->table->renderid;?>" >
...
</div>

... around the individual divs. Line 61 in the standard div template's default.php.

At the very start of the list JS init, we do ...

                this.list = document.id('list_' + this.options.listRef);

... and then use this.list as the root of a lot of our DOM manipulation in the rest of the code. And that's null because it doesn't exist, and hence the ...

Cannot read property 'getElement' of null

... when we try and do ...

var r = this.list.getElement('.fabrik_row');

So wrap that div around your rows.

-- hugh

 

[csim]

Hello,

I did it.
The list appears now.
But the list doesn't care the search criteria.

Best Regards

 

[cheesegrits]

It's another problem with your template. You haven't included any of the wrappers around the elements themselves. Each element has to be surrounded with wrapper (like a TD or a SPAN) that has the element's name as a class. As those aren't there, after an AJAX update, when we rebuild the rows, we have no idea where each element's data is supposed to go.

Can I suggest you take a look at the 'div' template, and the output that generates, and make sure you replicate the overall structure. Specifically, if you look at ...

components/com_fabrik/views/list/tmpl/div/default_row.php

... you'll see we include the 'cellClass' in the span around each element.

-- hugh

 

[csim]

Thanks, that's ok