How can i prevent the loading of all flexigrid tables in a page and dynamic url

Question

I have a web page with an accordion (jquery ui), each fold of this accordion has a flexigrid table. When i load the web page, all the flexigrid tables are loaded, even if i am just showing one of them in the accordion's fold.

I need to load only one flexigrid at time, also, each fold must have a flexigrid table with different a url, how can i achieve that? is there anyway to change the url of a flexigrid table dynamically(i mean on execution time)?

Answer 1

Put code on your page to initialize the first grid for the by-default expanded accordion item. Use the beforeActivate event of the accordion to trigger the initialization of the flexigrid for this panel.

$( ".selector" ).accordion({
  beforeActivate: function( event, ui ) {}
});

Use this event to grab some variable based on the panel that is to be opened that will determine which url you will use. Add other safeguards as necessary (is table already loaded, don't expand panel until table finished loading, etc).