1. The 3.8 code for Fabrik is now available on github, in the 'master' branch. If you are familiar with updating Fabrik from github, we would appreciate it if you could test this code on J! 3.8 for us. Once we have some feedback, we'll build a 3.8 release.

Problem Javascript : Cannot read property 'getElement' of null

Discussion in 'Professional Support' started by csim, Sep 5, 2017.

  1. csim

    csim Member

    Level: Professional
    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
     
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     
  3. csim

    csim Member

    Level: Professional
    Hello,

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

    Best Regards
     
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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 ...

    Code (Text):

        $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
     
  5. csim

    csim Member

    Level: Professional
    Hello,

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

    Best Regards
     
  6. cheesegrits

    cheesegrits Support Gopher Staff Member

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

    The missing DOM element is the ...

    Code (Text):

    <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 ...

    Code (Text):

                    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 ...

    Code (Text):

    var r = this.list.getElement('.fabrik_row');
     
    So wrap that div around your rows.

    -- hugh
     

Share This Page