Uncaught TypeError: Cannot read property 'nodeName' of undefined

Asked 20/2, 2012 at 14:16 Answered 26/4 at 7:17

jquery joomla undefined typeerror

this problem appears only in joomla -

im trying to use the contentflow plugin with my joomla site

this is the plugin site - http://www.jacksasylum.eu/ContentFlow/

this is my site - http://2-dweb.com/RND/

as you can see it doesnt work - it just stays on the loading phase forever

upon closer inspection i can see that there is a problem with this code:

  if (this.content.nodeName == "IMG") {
    CFobj._imagesToLoad++;

    var foobar = function () { 
        CFobj._imagesToLoad--;
        this.image = this.content;
        this.setImageFormat(this.image);
        if ( CFobj.conf.reflectionHeight > 0) {
            this.addReflection();
        }
        this.initClick();
        CFobj._addItemCueProcess(true);
    }.bind(this);

    if (this.content.complete && this.content.width > 0)
        window.setTimeout(foobar, 100);
    else if (this.Browser.IE && !this.content.onload) {
        var self = this;
        var t = window.setInterval( function () {
            if (self.content.complete && self.content.width > 0) {
                window.clearInterval(t);
                foobar();
            }
        }, 10);
    }
    else
        this.content.onload = window.setTimeout(foobar, 100);
}
else {
    this.initClick();
    CFobj._addItemCueProcess(true);
}

};

with the first line - it says "Uncaught TypeError: Cannot read property 'nodeName' of undefined "

but this thing works on my desktop html file and on the plugin site it self!

why doesnt it work on my joomla site? its not a conflict thing - im using no-conflict and i have other jquery plugins that work

update:

rob w helped me with this error: "Change the first line to if (this.content && this.content.nodeName == "IMG") {. That solves the problem"

and it did, but now another error appears:

  initClick: function () {
        var cItem = this.clickItem;
        this[this._activeElement].addEvent('click', cItem, false);
    },

the error - Uncaught TypeError: Cannot call method 'addEvent' of undefined

Fenwick answered 20/2, 2012 at 14:16 Comment(5)

Change the first line to if (this.content && this.content.nodeName == "IMG") {. That solves the problem. – Doig 20/2, 2012 at 14:17

ok it fixed one problem, but now on this code theres a problem: initClick: function () { var cItem = this.clickItem; this[this._activeElement].addEvent('click', cItem, false); } it says: "Uncaught TypeError: Cannot call method 'addEvent' of undefined" – Fenwick 20/2, 2012 at 14:31

Found an identical problem when trying to use with Rails (3.2.15) - applies even when using via the contentflow gem. – Loire 8/12, 2013 at 15:2

Can you post a jsfiddle or something similar where the error occurs? Is it somehow reproducable? – Whalebone 13/12, 2013 at 20:24

Not really, it's not the code itself I suspect so much as its interaction with the framework (or maybe some obscure jQuery deprecation between versions). – Loire 15/12, 2013 at 19:31

As the error explains "Uncaught TypeError: Cannot read property 'nodeName' of undefined " The element is not available when the script tries to access it. You can solve this in two ways.

Try to wrap to code with a document.ready.
You can check whether the element is available before accessing it. To get this done use a if clause.

Agreeable answered 10/12, 2013 at 9:58 Comment(2)

I think the JS in the file may have already been wrapped in document.ready, but I will definitely check. – Loire 11/12, 2013 at 9:9

It looks like that's not it. I thought it might be to do with the bindings but that doesn't seem to have any effect. – Loire 15/12, 2013 at 19:28

Solved this.

I am using bootstrap.css version 3.3.7 and bootstrap.js version 4.0.0.

By changing bootstrap.js to version 3.3.7 my issue got resolved!!!

Alost answered 2/7, 2018 at 9:30 Comment(0)

Load your script only after loading all the elements into DOM.

Your script should be called at the bottom of the page like this

<html>
  <head></head>

  <body>
    <!--HTML Elements here-->

    <script type="text/javascript" src="yourScript.js"></script>
  </body>
</html>

If you are using jquery, you can include the script file anywhere in your page if it is wrapped in document.ready, like this:

$(document).ready(function(){

  // your code here.. 

});

Isoagglutination answered 14/12, 2013 at 12:2 Comment(0)

It is important that you use class="content". The structure should be:

 <div class="ContentFlow" id="cover-menu">
        <div class="flow">
            <div class="item" >
                <div class="content">
                   //your stuff
                </div>
            </div>
        </div>
 </div>

Mustang answered 14/2, 2014 at 15:4 Comment(0)

was with this error. I made the correction leaving all the js and css of the bootstrap with the same version. In my case I used the latest version of each: https://getbootstrap.com/docs/4.4/getting-started/download/

Shandra answered 6/2, 2020 at 13:44 Comment(0)

I fixed with colspan.

<tfoot>
   <tr class="fw-bolder fs-6">
       <th colspan="6" class="text-nowrap align-end">Total:</th>
       <th colspan="3"  class="text-danger fs-3"></th>
   </tr>
</tfoot>

total columns 9, good luck.

Fluorite answered 4/8, 2023 at 6:4 Comment(0)

You can use event.preventDefault(); inside your function called on specified event. Thanks to this You can prevent loading some default JQuery code which cause an error.

Samaniego answered 26/4 at 7:17 Comment(1)

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Irremovable 30/4 at 13:16

Recommended topics

Hot tags