Display popup info windows in two tabs

[ryannz]

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.

[JakeSkinner]

Hi Ryan,

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

[ryannz]

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.

[JakeSkinner]

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.

[ryannz]

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.

[JakeSkinner]

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

Map container split left | ArcGIS API for JavaScript‌