jQueryUI Tabs

[queensgambit9]

Hi

When clicking on "Tab 2" it does not render correctly...any idea why?

Code: [Select]

<script>

  $(function () {   

    $("#tabs").tabs();
   
    $("#grid1").pqGrid({
  dataModel:{data:[{a:"b"}]}
    })

    $("#grid2").pqGrid({
  dataModel:{data:[{c:"d"}]}
  })
});

</script>

<div id="tabs">
  <ul>
    <li><a href="#grid1">Tab 1</a></li>
    <li><a href="#grid2">Tab 2</a></li>
  </ul>
 
<div id="grid1" style="margin:auto;"></div>
<div id="grid2" style="margin:auto;"></div>

</div>

[queensgambit9]

Solved.

[queensgambit9]

Still having problems with tabs.
When using remote data with tabs it seems it won't assign data to grid.

Grid code works fine outside tabs but when divs are nested (tabs) it wont assign data to grid. I get json string returned fine...but no rows are displayed.

Any idea?

[paramvir]

Grid in a tab needs to be refreshed whenever the tab is activated ( activate event ).

Please check this demo: https://paramquery.com/pro/demos/grid_in_tabs

https://paramquery.com/pro/demos/tabs

[queensgambit9]

Thanks, works fine.

When using multiple grids with tabs I would like to define each grid in separate .js files and then load each grid in main file...what would be a good way to do this?
Tried using

Code: [Select]

$.getScript("test.js")...but function is undefined when called in main function...although it exists after load?