Question

I’m trying to create a tabbed panel having a different jquery grid in each tab. The first tab loads as expected and shows the requested grid. But all other tabs refuse to show the grid but just render an empty

<table id="gridtable" class="scroll" cellpadding="0" cellspacing="0"></table>

so the <sjg:grid> tag does’nt call the remote URL to get the json data for the grid.

This is my tabbed panel:

<sj:tabbedpanel id="taskTabs">
  <sj:tab id="all" href="%{allURL}" label="Alle"/>
  <sj:tab id="today" href="%{todayURL}" label="Heute"/>
  <sj:tab id="thisWeek" href="%{thisWeekURL}" label="Diese Woche"/>
</sj:tabbedpanel>

the URLs point to an action that displays the following grid:

<sjg:grid 
  id="gridtable" 
  caption="tasks"
  dataType="json"
  href="%{remoteurl}"
  gridModel="tasks"
>
  <sjg:gridColumn name="id" index="id" title="ID" sortable="true"/>
  <sjg:gridColumn name="text" index="text" title="Text" sortable="true"/>
</sjg:grid>

But the remoteurl is only called in the first tab. All other tabs don’t call it. When i use the selectedTab option in the panel definition the grid in this tab is loaded when the page is called but when i leave this tab and come back it is rendered empty. Nevertheless the first tab still shows the grid.

Any ideas would be highly appreciated.

Answer 1

Do you have a unique ID for the grid in the other tabs?
Make sure you have an unique Id for all Elements in the same DOM.

Johannes