Uncaught TypeError: undefined is not a function when using in an html page

Question

I ran into Uncaught TypeError: undefined is not a function when I was trying to include a jQuery plugin (fancyBox image viewer plugin).

My page has 2 divs which use php require codes. I have been testing, the jQuery script works fine when there are no php codes, but once I add the php codes, jQuery no longer works, it produced Uncaught TypeError: undefined is not a function. The php codes work fine.

The php codes are:

<?php
    require($DOCUMENT_ROOT . "#sub-html/menu-nav.html");
?>

and

<?php
    require($DOCUMENT_ROOT . "#sub-html/footer.html");
?>

This is the jQuery script to call the plugin:

$(document).ready(function() {
    $(".fancybox-thumb").fancybox({
    (Uncaught TypeError: undefined is not a function - this is where the error is)
        prevEffect  : 'none',
        nextEffect  : 'none',
        closeBtn  : true,
        arrows    : true,
        nextClick : true,
        helpers : {
            title   : {
                type : 'inside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });
});

I save this file in .html. I think this error is something specific to how this plugin is compatible when used with other php codes, as in another page, with same structure, different plugin works fine. I have tried putting the jQuery script in the head and body sections of html, both did not work, if that matters.

I searched around, the majority of this error is caused when there are more than 1 jQuery libraries included in the file. Mine has 1 library only. So I think that reason can be crossed out.

Please help me with this. Thank you very much.

P/S: I have figured out the reason why I got this error. I will post my answer after the 8-hour time frame. Thank you for taking time to help me.

Adding PHP will not break JavaScript directly and the error you have appears to have nothing to do with the PHP. Nowhere in the code you have shared do you define `fancybox` so it isn't really very surprising that it should error with a complaint that it is undefined. — Quentin, Jun 02 '14 at 20:09
[What is `#` doing in your require?](http://stackoverflow.com/questions/940905/can-php-read-the-hash-portion-of-the-url) — Francisco Presencia, Jun 02 '14 at 20:09
@Quentin Then what may be the cause of this? So far, if I leave everything untouched, removing and adding the PHP codes result in this error. — thu nguyen, Jun 02 '14 at 20:10
@thunguyen — Look at the HTML the browser gets. Look at what is different. — Quentin, Jun 02 '14 at 20:11
@FranciscoPresencia that is just the name of the folder, full folder name is #sub-html — thu nguyen, Jun 02 '14 at 20:12
Just to confirm, what is the page type? since you said it's an `HTML page` — Sasanka Panguluri, Jun 02 '14 at 20:12
I'm really surprised that it works, but if it does good for you. — Francisco Presencia, Jun 02 '14 at 20:13
@SasankaPanguluri: all pages are in .html, without the declaration (that declaration when used with php codes produced undesired effects, so I just removed it) — thu nguyen, Jun 02 '14 at 20:15
@FranciscoPresencia: now that you mentioned, I have tried renaming the folder, that does not seem to affect the web page. — thu nguyen, Jun 02 '14 at 20:15
Try to echo `$DOCUMENT_ROOT . "#sub-html/menu-nav.html` and see if it shows the fully qualified path — Sasanka Panguluri, Jun 02 '14 at 20:17
@Quentin: thank you, I followed your advice, by looking at the HTML log, I figured out the jQuery library was called more than once. I have fixed it and it works. I will post my answer later (I have not enough reputation to do that now). — thu nguyen, Jun 02 '14 at 20:31
@SasankaPanguluri: I have figured out the reason, actually that was because a jQuery library was called multiple times (in larger page and 2 subpages). I have successfully fixed it. — thu nguyen, Jun 02 '14 at 20:32
Sounds good. Take good care not to make multiple imports, it may slow down your page — Sasanka Panguluri, Jun 03 '14 at 03:09

score 3 · Answer 1 · answered Jun 03 '14 at 19:42

I have figured this error out.

The reason was really because there were more than 1 jQuery libraries (or more correctly: 1 library was called multiple times).

The turning point here was when I wrote separate small subpage for header and footer, I included a jQuery library for each page. In the complete page, I also linked that jQuery library, then used the php codes to include those subpages. This, when run, actually called the jQuery library 3 times, resulting in the Uncaught Typoerror.

Thank you very taking your time to help me.

Flak DiNenno · Answer 2 · 2014-06-02T20:50:15.417

Often, you will get errors like this often if jQuery and/or your plugin is not loaded properly and therefore, some object or variable that's being called or assigned is NOT DEFINED yet.

Make sure that jQuery and your fancybox plugin are loading, that is, that the correct path is being referenced/used in your <script src="..."></script> statements.

If you are using PHP to also generate the paths to the jQuery and fancybox scripts, then make sure it is generated the correct path. The BEST way to do this, is simply to view the HTML source of your page in your browser after it's been generated, downloaded, and rendered. In most browsers simply Right-Click on the page in the browser > choose VIEW SOURCE from the menu. You can also usually type something like view-source:server/path/page.html directly into your browser.

So for instance, http://yahoo.com would look like view-source:yahoo.com in the address bar of your browser.

The paths were all correct, the reason was that a library was called multiple times. By the way, thanks for the View Source tip, I didn't know about that. Another way to help me look after the codes. — thu nguyen, Jun 03 '14 at 19:41

Uncaught TypeError: undefined is not a function when using in an html page

2 Answers2