Problems using JavaScript and libraries

General
1

Hi all,

Starting from Leaflet example I have try to build my own component to draw a mind map. here:
https://vaadin.com/attachment/6c12168b-be9f-4837-927e-9173de785c69/CartographyVaadin.PNG

But I have the message "could not get the element id: myDiagramDiv.

In the file MindmapMap.java I have the call to wrapper in the file mindmap-map.js.

I don’t understand why the message. Somme body can help me.

Regards

Antonio

18118644.png
18118647.java (1.5 KB)
18118650.js (14.2 KB)

2

I’m not really sure what’s going on there. On the surface I cant see a reason why that would fail. It might be down to a timing issue where ready() is called before everything is done, or it might be a scoping issue where the init() method doesn’t find the HTML for that same element. Without debugging it I can’t really help one way or another…

Personally I’d put a breakpoint in init() just before that call and check that the DOM has been built correctly and all imports work fine. If that works, then simplifying the code to just get the correct element and outputting something to test if the lookup by ID works. If that works too, then it’s an issue with the 3rd party lib that it can’t find the element, maybe because of web component related shenanigans.

3

Hi Thomas,

with this new minsmap_map.js I know that the <div…> it’s not found because in init the var v is null…

I don’t know the debug process using vaadin, so where can i found the process using eclipse?
best regards

Antonio
18118979.js (14.3 KB)

4

That points to a setup issue… Have you tried running a full mvn clean install?

5

Hi,


<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:100%"></div>

is defined inside the shadow root of the PolymerTemplate.

So if you call document.getElementById(myDiagramDiv) it’s not found (=null). MindMap probably use this to retrieve the element.

Inside polymer template you can retrieve it using:


        var myDiv = this.$.myDiagramDiv;
        //if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
        var $ = go.GraphObject.make;

        this.myDiagram =
            $(go.Diagram, myDiv,
			.....
6

Hi Thomas and Jean Christophe
Even with mvn clean install same problem.

The Jean Christophe’s solution is OK. I can go ahead, I will have other problems but I did a huge step with your help.
I know very well Java, Eclipse but close to nothing with JS and I am not found of it. It’s for this reason that I want work with Vaadin, because I expect to be able to put the JS script in boxes!!! I am still fighting with it but I go ahead…

Thanks a lot to you.

Best regards

7

Great to hear I could help, you’re very welcome :slight_smile:

And thank you Jean-Christophe for stepping in too!