MiniMe MiniMe - 2 months ago 26
Javascript Question

What could be the cause for "jquery.min.js:2 Uncaught TypeError: Cannot read property 'each' of null"?

Here is the code that I am trying you place in my articles:

http://jsbin.com/dorimamaji/edit?html,console,output

The purpose of this is to offer collapsible paragraphs (DIVs) using

localStorage
to remember the previous state (e.g. when the reader leaves the page and then returns). Please see the above jsbin link for an example.

At this point if I use the jsbin code it works fine. The problem appears when I place the code in Joomla it does not work anymore. The
toggleDiv
function is OK but the
localStorage
does not seem to work. I think that it has something to do with the document.ready function but I am not sure. What else can I use?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script type="text/javascript">
$( document ).ready(function() {
$(".collapsible").each(function(index) {
if (typeof($(this).attr('id'))!="undefined") {
id=$(this).attr('id')
var state = localStorage.getItem(id)
ele = document.getElementById(id)
if (state=="true") {
ele.style.display = 'block'
} else {
ele.style.display = 'none'
}
}
})
});

window.toggleDiv = function(divId) {
var ele = document.getElementById(divId);
var state=$(ele).is(':visible');
$(ele).toggle();
state=$(ele).is(':visible');
localStorage.setItem( divId, state);
}
</script>

<style>
a:hover {
color: purple;
}
a:active {
color: purple;
}
</style>

<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA11');"

style="text-decoration: none; font-weight:bold; font-size:13pt">Collapsible divs</a><br>
<div class="collapsible" style="padding-left:15px; " id="PktS/h+L5EeSqM/4hMH9JA11">
<div>fds</div>
<div>sdfdsfdfdsf</div>
<div>sdfsdf</div>
<div>gdhgf</div>
<a class="ConceptLevel2" href="javascript:toggleDiv('SPrQVTbDx0WO6As2F+43tw11');" style="text-decoration: none; font-weight:bold; font-size:12pt">hfghg</a><br>
<div class="collapsible" style="padding-left:15px; " id="SPrQVTbDx0WO6As2F+43tw11">
<div>hfghgh</div>
<div>fghfgh</div>
</div>
</div>


Note: Joomla is already configured not to strip out code inserted into article

Update:

This seems to be a JQuery problem.
For some reasons this line

$('.collapsible').each(function(index)


returns this error:

jquery.min.js:2 Uncaught TypeError:
Cannot read property 'each' of null


This happens only when the code is inserted in an article. It seems to me that the selector
$('.collapsible')
returns nothing, hence the result.

Answer

Even if jQuery couldn't find .collapsible, it would return an empty collection and would have the each method.

My guess (specially because it only happens in Joomla) is that some other script is taking the $ var. So, things could be happening in this order:

  1. jQuery loads
  2. your code runs, $ is jQuery, so $(document).ready works, but the callback is not executed yet
  3. another script is loaded and assigned to $
  4. now the document is ready, the callback will be executed, and $ is not jQuery anymore

Simplest way to know if that is the case is to replace all $ in your code with jQuery. Example:

jQuery( document ).ready(function() {
   jQuery(".collapsible").each(function(index) { ...

You can also use encapsulation:

(function($){
    $( document ).ready(function() {
        // ...your code...
    });
})(jQuery)
Comments