javascript error "is not a function..." but libraries are loaded

Question

I'm trying to use fancytree in a Durandal page. I've done this before but I can't seem to get this working now and it's driving me mad.

I have a js debug stop point on the $("#tree").fancytree... line and at the point the code stops, I have the following three libraries loaded:

jquery-1.12.1.js    
jquery-ui-1.11.4.js 
jquery.fancytree.js

And yet there is no "fancytree" prototype method showing for the element and I get system.js:109 TypeError: $(...).fancytree is not a function(…) on the initialization line. In the past this has been caused by a lacking jquery-ui library, but clearly that is loaded here.

What am I missing please?

Edited to add more information.

HTML is largely irrelevant as it just has

<div id="tree"></div>

There is an attached viewmodel which contains:

    self.attached = function (vw, prt) {
        buildTree(vw);
    }

and

    function buildTree(view) {
        // Initialize Fancytree
        $("#tree").fancytree({
            checkbox: true,
            selectMode: 2,
            source: {url: "testdata/ajax-tree-taxonomy.json", debugDelay: 1000},
            toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 400 },
            lazyLoad: function(event, data) {
                data.result = {url: "testdata/ajax-sub2.json", debugDelay: 1000};
            }
        });

    }

I put my debug stop point at the $("#tree").fancytree({ line and by then it has loaded the libraries mentioned above.

Edit 2: Curiouser and curiouser... I've been doing more debugging. I put a stop point inside of the jquery.fancytree.js library and the code execution gets in there! What's more, it actually creates the element.fancytree method needed and that stays attached to the element for a long while during debugging. Trouble is, something then happens later in the jquery initialization that REMOVES the .fancytree() method from the element and before the code execution gets back out of the jquery library!

I have another test html page that loads the exact same jquery, jquery-ui and jquery.fancytree libraries and that works just fine. It must surely be something to do with Durandal then?

What version of fancy tree are you using? I found an example using 2.10.2 that works. https://jsfiddle.net/robertrozas/vnj4cpza/2/ — forgivenson, Jul 06 '16 at 11:22
Yeah, I can get my code to work fine in a normal html page, I just can't get it working in the Durandal page, even though the libraries all appear to be loaded as required. — TheMook, Jul 06 '16 at 12:33
No, it's just when another plugin goes into jquery to perform another initialization routine I think. Scratch that - Jimmy Ko may have something here... — TheMook, Jul 07 '16 at 09:42

score 1 · Answer 1 · edited May 23 '17 at 12:09

1

Fixed it! It was something to do with requirejs reloading jquery. I found the answer on this question: Make requireJs not reload jQuery if already on page

I just added:

define('jquery', [], function () {
    return jQuery;
});

...after my require.js.config({...}); section and before the define(['knockout', 'durandal/system', ... { section.

Can't believe it was this simple...

edited May 23 '17 at 12:09

Community

1
1

answered Jul 07 '16 at 11:49

TheMook

1,531
4
20
58

javascript error "is not a function..." but libraries are loaded

1 Answers1