Thanks Tony!

The trick is using jQuery load in the tabs - this also load scripts too 🙂

Thanks for this and that you like the demo page.

Shortley the things are simple, but we need to do some additional changes.

In the demo we used a wonderfull jquery ui layout.

The layout is configured so to have only left and central pane.

On the left pane I define a jqGrid with tree mode and in the central we use the jquery ui tabs with initial page loaded.

When we load the page for first time we load the tree grid with data at once.

The tree grid  has a hidden fields with url to diffrent pages (already get from loacal or db file)

when we do onSelect row we check first if the selected row is Leaf and if so we then check if the page is already loaded.

If this is a case we select it, if not we create a tab and instruct a tab plugin to load

the contents via ajax (the hidden field from grid). The content is a simple html which includes another js script file.

To do this we have made some additional css changes to tab plugin and other minor css changes.

Hope this help a lot

In order to understand this you can download the demo and look at jqgrid.html file.

Fell free to ask me if something is not clear

Best Regards

Tony

So I have been able to reduce this to a basic $.ajax() call which loads an html file (e.g. 'jsonex.html', which means 'json example').  And that loads jsonex.js which is the script that loads the jqgrid.

I though jquery wouldn't automatically execute script loaded via ajax.  So now my question is a bit more specific – What causes the ajax-loaded jqgrid script to execute?

I know that jqgrid dynamically loads the js it needs.  Do these example grids' js execute because something in the core jqgrid code is 'watching' or is there something else I have not yet ferreted out of the example page that does this?

It might be easy to figure this out, but the minified scripts that were used to create the example make it pretty much impossible to see what's going on in the code.

My goal is a jquery ui tabbed page where some tabs load a jqgrid – different grids on different tabs.  Some tabs would have no grid on them.

The demo site appears to request each tabs content on-demand, including a grid sometimes.  This occurs as a GET of some html and another GET of some javascript.  I can follow that using Firebug console. 

And the page appears to be using jquery ui layout plugin.

I'm not clear about what makes it all work, particularly the main panel where the grid demos appear.  Is this all dependent upon the layout plugin and I need to read up on that to learn how to apply it effectively, or is this page a jqgrid 'treegrid' and it's doing all the management of the left/right panels? edit: I found a screenshot of a treegrid while searching for a live example.  I see the demo page is NOT a treegrid.

I was hoping someone could give a very brief orientation/acrhitecture overview.  Trying to step through the live page is proving difficult what with events firing and things happening ansynchronously.

I should say that I am fully understanding of the jqgrid aspect, having used it a number of times.  Just looking for the 'big picture' overview of the demo page – which seems to be a rather awesome 'meta demo' itself.