Display popup info windows in two tabs

1859
5
08-07-2014 03:36 AM
Highlighted
by
New Contributor

Hello everyone, I would like to display popup info windows into two tabs. Could someone point to some links where I can refer to? I have tried jquery UI, here is how I built the info windows

var div = "<div>";

            var table = "<table border='1' width=300>";

            for (prop in graphic.attributes) {

                table += "<tr><td>" + prop + "</td><td><b>" + graphic.attributes[prop] + "</b></td></tr>";

            }

            table += "</table>";

I tried to build it this way, and it didn't work:

  var div = "<div id='tabs'> <ul><li><a href='#fragment-1'><span>Layers</span></a></li><li><a href='#fragment-2'><span>Query</span></a></li></ul>";

            var table = " <div id='#fragment-1'><table border='1' width=300>";

            for (prop in graphic.attributes) {

                table += "<tr><td>" + prop + "</td><td><b>" + graphic.attributes[prop] + "</b></td></tr>";

            }

            table += "</table></div><div id='#fragment-2'>test</div></div>";

Here is my jquery code:

<script>

             $("#tabs").tabs({ active: 1 });

            </script> 

Thanks.

Tags (2)
Reply
0 Kudos
5 Replies
Highlighted
Esri Esteemed Contributor

Hi Ryan,

Here is a sample that you can refer to that creates a tabbed container for the info window.

Reply
0 Kudos
Highlighted
by
New Contributor

Thank you Jake. That's what I am looking for. But I have another question. If you look at my code above, I built the info windows when the page loaded. But I need to somehow connect this info windows with another div containing a grid that I built on the fly. Do you think this can be done?

Cheers.

Reply
0 Kudos
Highlighted
Esri Esteemed Contributor

I'm not sure I quite understand.  Are you looking to have one tab contain the grid, and another tab contain the info window?  Take a look at this sample.

Reply
0 Kudos
Highlighted
by
New Contributor

Yes exactly Jake. One tab for information and one tab for the grid. But the problem I am having now is information tab is loaded on page load (this is fine) while the grid is built on the fly. So when a button is clicked, I need to insert the grid information into tab2. The example you share is quite good but it's side content not popup.

http://developers.arcgis.com/javascript/samples/layout_MapContainerSplitLeft/

And also I tried to click on the map but it seems the second tab doesn't show anything.

Do you know where I can have a look at the code example of that one?

Thanks.

Reply
0 Kudos
Highlighted
Esri Esteemed Contributor

Here is the code from the last sample.  Sorry, meant to provide this URL originally.

Map container split left | ArcGIS API for JavaScript

Reply
0 Kudos