Having a pop up dialog from a href click in the infobox widget.

CesiumJS
1

I have a infobox widget that I have customized some to clean up the table it displays and the information. I want when you click on a button or href link in one of the table rows to pop up a more detailed dialog.

I am trying to work with jquery dialogs and other various samples I have been finding on the internet but nothing seems to work in conjunction with the js that cesium loads. It is very possible I am just using the examples from other sources (stack overflow etc) very wrong but I was wondering if there is anything about popping up dialogs that have to have special consideration when working within the cesium app? (or any examples of dialogs popping up with cesium that I didn’t see would be great too)

2

Just as an update:

I can get this to work with a simple jquery $("").dialog(); call if it is the button created on the left hand toolbar, just does not work if the button is placed in the html of the description that shows up in the right hand side. Not sure why:

If in tool-bar left div:

Open Dialog

works

If part of cesium description does not:

desc += "

<button id=“opener”>Open Dialog"

desc += “”;

}

desc += “”

entitycesium.description = desc;

Is it just how the info window works?

3

Keep in mind that the InfoBox is a separate document from the rest of the page (loaded via iframe), and is sandboxed by default to avoid security vulnerabilities from untrusted input.

So in your example, the id “opener” within the description HTML is not directly accessible from the containing page. Instead, you can put your script into the description HTML itself, and configure the infobox iframe to reduce security by allowing scripts, and whatever other functionality you need.

See the sandbox attribute for iframe:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

4

Oh okay, it is an iframe, I am guessing that is infobox.js I have to edit… going to try this.

5

So what is actually deployed was everything in Cesium.js, but I did edit that file and made the attribute for sandbox look like this:

d.setAttribute(“sandbox”,“allow-same-origin allow-popups allow-forms allow-scripts allow-pointer-lock”)

And added to the description this:

              var desc = "<p> Zone Number: " + json.data[i].zoneNumber + '</p>'

                desc += "<div id=\"dialog\" title=\"Basic dialog\"><p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div>"

                desc += '<table> <tr> <th> name </th> <th> Sensor </th> <th> CD </th> <th> Thumbnail </th>'

                for(var j=0; j<json.data[i].cesium_entities.length; j++)

                { 

                  desc ... ... ;

                  desc += "<td> <button id=\"opener\">Open Dialog</button></td>"

                  desc += "</tr>";

                }

                desc += "</table><script> $(\"#dialog\").dialog({ autoOpen: false, show: { effect: \"blind\", duration: 1000 }, hide: { effect: \"explode\", duration: 1000}}); $(\"#opener\").on(\"click\", function() { $(\"#dialog\").dialog(\"open\"); <//script>"

                 entitycesium.description = desc;

So I thought I did everything right, yet no dialog pop up? I am sure I am missing something somewhere. the double // on the <//script> is suspect but if i leave it out my editor freaks out (color-wise, I know is meaningless but it is strange) and it breaks the whole page by not properly handling the other divs i have for a pop up test from the left tool bard that is not in the iframe (and is working)

6

I’m not sure, but you might need to have a .

-Hannah

7

I looked into the InfoBox a bit to refresh my memory.

You can change the sandbox attribute at runtime without modifying Cesium source code. viewer.infoBox.frame.setAttribute(‘sandbox’, ‘etc’) after creating a Viewer.

However, tags do not work in description HTML in general. Internally the description is loading by setting element.innerHTML = value and as far as I can tell, setting innerHTML will not execute inline script tags, regardless of sandboxing settings.

This should probably be fixed in Cesium by using a different mechanism to load the description from HTML, such as createContextualFragment.

https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment

Note that other scripts work as-is (with scripts allowed through the sandbox), such as an .

8

Okay thanks for checking into this, if I read this correctly my attempts to get a pop up the way I am trying seem like i won’t work. But I can use this createContextualFragement (which I have never heard of before and have to look it up and research this) but maybe this will get me what I need.

9

Just to clarify, to get this dialog to pop up from the infowindow (which is an iframe), I myself would have to poke around the cesium code and implement the createContextualFragement for loading the description ?