1

I'm trying to integrate a vis.js functionality into Oracle Application Express but I can't seem to make it work at all.

If I'm running the script separately, it works as it should, but when I'm trying to load the scripts (vis.min.css) / (vis.min.js) in APEX, I get: SCRIPT5009: 'vis' is undefined and SCRIPT1028: Expected identifier, string or number in console.

The above lines lead to the following lines of code:

  • in my script:

    var parsedData = vis.network.convertDot(DOTstring);  --> vis is undefined

  • in vis.min.js:

    (...)function o(t){return t&&t.__esModule?t:{default:t}}var n=i(2),s=o(n),r=i(55),a=o(r) (...) -> Expected identifier, string or number

The vis.min.js / vis.min.css and draw_diagram.js are loaded as static files in APEX (under Shared Components section) and defined in HTML Header section as follows:

<script src="#APP_IMAGES#vis#MIN#.js" type="text/javascript"></script>
<link rel="stylesheet" href="#APP_IMAGES#vis#MIN#.css" type="text/css">

<script src="#APP_IMAGES#draw_diagram.js" type="text/javascript"></script>

In Page Template Body I've added the needed div in Region Source section:

<div id="my_network"></div>

However, when I apply the changes and go to the HTML page to see the result, I can see nothing but the above errors in the console.

I've also tried to load the files from CDN, but the result is the same.

The custom script looks like this:

var DOTstring = "some_dot_config_string_here";
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('my_network');

var data = {
    nodes: parsedData.nodes,
    edges: parsedData.edges
};

var options = {
    layout: {
        hierarchical: {
            direction: "UD",
            sortMethod: "directed",
            nodeSpacing: 250
        }
    },
    physics: false,
    interaction: {
        dragNodes: false,
        dragView: true,
        navigationButtons: true
    }
};

// create a network
var network = new vis.Network(container, data, options);
network.setSize('1800px', '840px');
network.redraw();

Any ideas on why this happens ?

4

1 回答 1

0

To avoid an overly lengthy / unwieldy comment section, I'll post some things here and I'll update the answer as we go along

I'm not exactly sure, so instead I'll try to give some pointers to try out.

You're on apex 4.2. Don't use the HTML header to put your scripts tags in. You have dedicated fields to put script links in and the same goes for CSS.

Simply put 

#APP_IMAGES#vis#MIN#.js
#APP_IMAGES#draw_diagram.js

In the javascript files box, and do the same for CSS.

There is a reason to prefer this. Scripts put here will be put near the end of the page, most likely, according to how the page template has been set up. It'll most likely be after the apex javascript (and dependencies) files, which is usually a good thing.

Mind you, you used #MIN# here. This means that when the page is NOT in debug mode, the minified file will be used. When in debug mode, the full source (not ´.min´) is used. Make sure you have both files available.

Verify modules have loaded. Don't just look at source html. Actually click on the links in the source html and see if you get the file you need, or see if you get an error in the dev console.

Verify the module or code loaded by running it from dev console. It's a simple check.

Are you sure there are no dependencies missing? Does vis need jquery for example?

Run the page in debug mode so you it will load the full source where available. This will save you from having to try and trawl through illegible minified code.

于 2017-04-11T12:20:23.443 回答