Databases
StackOverflow2013
Postsdbo
POhow can I fix the error: this.parentNode is null?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow can I fix the error: this.parentNode is null?
    primarykey
    data
    text
    <p>I'm developing an app where you can display all monuments and places to be in Ghent (Belgium). There's a fullscreen map on the homepage (programmed in jQuery with Google Maps API v3) and on the lefthand side, there's a list of the items that you can display. Users can choose whether they want the category to be displayed alone, or to be added to the categories that they clicked before.</p> <p>This is what happens: I load the page, I click a category. Everything works fine. But only if I click spans in the same category. Whenever I click something in another category, firebug throws the error: parent is null (or this.parentNode is null)</p> <p>I initially tried to do it in jQuery with $(this).parent().html()..., but it gives me a similar error: 'TypeError: parent.html(...) is undefined'.</p> <p>Here's my code...</p> <p><strong>HTML</strong></p> <pre><code>&lt;section class="category transport"&gt; &lt;h1&gt;Transport&lt;/h1&gt; &lt;ul class="clearfix"&gt; &lt;li&gt;&lt;span class="category_li"&gt;Parkings&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span class="category_li"&gt;Stations&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/section&gt; </code></pre> <p><strong>JQUERY (HOVER EFFECT)</strong> this is where I add the 'add_on_map' span to the list-items</p> <pre><code>$('.category ul li').hover( //mouse-enter function() { if($(this).children('.add_on_map').length == 0) { $(this).append(add_marker_sign); $('.add_on_map').click(showCategory); } else { $(this).children('.add_on_map').show(); } }, //mouse-leave function() { $(this).children('.add_on_map').hide(); } ); </code></pre> <p><strong>JQUERY (CLICK EVENT)</strong></p> <pre><code>function showCategory(e) { var parent = null; parent = this.parentNode; var add_marker_sign = '&lt;span class="add_on_map plus"&gt; +&lt;/span&gt;'; var remove_marker_sign = '&lt;span class="add_on_map minus"&gt; -&lt;/span&gt;'; var element; var to_removed_marker_sign = parent.innerHTML.replace(add_marker_sign, remove_marker_sign); var to_add_marker_sign = parent.innerHTML.replace(remove_marker_sign, add_marker_sign); //User clicks span -&gt; If you click on the word: // All markers are deleted and the clicked category is added //So when the clicked item doesn't have the 'add_on_map' class: if(!$(this).hasClass('add_on_map')){ console.log('remove all markers and add new'); removeAllMarkers(); element = $(this).text().toLowerCase(); $(this).parent().html(to_removed_marker_sign); $('.category ul li').removeClass('active_subcategory'); addMarkers(element); $('.category ul li span').click(showCategory); } //When clicked item DOES have 'add_on_map' class: else { element = $(this).parent().children('.category_li').text().toLowerCase(); //Check if markers should be ADDED or DELETED if($(this).hasClass('plus')) { console.log('add markers'); $(this).parent().html(to_removed_marker_sign); addMarkers(element); $('.category ul li span').click(showCategory); } if($(this).hasClass('minus')) { console.log('remove markers'); $(this).parent().html(to_add_marker_sign); removeMarkers(element); $('.category ul li span').click(showCategory); } } } </code></pre> <p>I made a small live <a href="http://jsfiddle.net/98gmn/2" rel="nofollow">demo</a> on jsfiddle! </p> <p>If anyone can help me with this, I'd be greatful! Thanks in advance. </p> <p>Helena S.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHelena Standaert
    1. USHelena Standaert
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COEhm… you are setting `parent = null` so obviously you cannot call the methods `parentNode()` and `innerHTML` of `null`…
      singulars
      1. POhow can I fix the error: this.parentNode is null?
      1. USSunyatasattva
    2. COCan you reproduce with a ([minimal/sscce](http://sscce.org)) [live demo](http://jsfiddle.net)?
      singulars
      1. POhow can I fix the error: this.parentNode is null?
      1. USDavid Thomas
    3. COThat was just an effort to solve this problem. That shouldn't be the problem, considering the fact that I set parent to this.parent in the following line of code. Plus, When I remove this line, I still get the same outcome..
      singulars
      1. POhow can I fix the error: this.parentNode is null?
      1. USHelena Standaert
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload