jQuery UI Tabs

[queensgambit9]

Trying to update grid in jQuery UI tabs:

Code: [Select]

$(document).ready(function() {

  $("#tabs").tabs({
  activate: function(event, ui) {
               alert("Activate event fired for " + ui.newTab);
               ui.newTab.find( ".pq-grid" ).pqGrid( "refresh" );
}
  });
});

1. ui.newTab is rendered as empty object?
2. Get error on ui.newPanel.find( ".pq-grid" ).pqGrid( "refresh" ), Uncaught TypeError: ui.newTab.find(...).pqGrid is not a function

Thanks in advance.

[paramvir]

It's ui.newPanel.find(".pq-grid").pqGrid("refresh"); inside activate event.

Example: https://paramquery.com/pro/demos/detail

Please share a test case if you face any issue.

[queensgambit9]

http://jsfiddle.net/87q70av9/1/

In Tab #2 I would like to a load a pqGrid page...btw is there an easy way to host a sample external file in jsfiddle or similiar?

Thanks.

[paramvir]

you need to have predefined grids in the tabs.

activate event is used only to refresh the view of grids.

http://jsfiddle.net/87q70av9/2/

[queensgambit9]

Thanks, I have 2 grids on separate html pages and would like to have them collected on a tabs page.
Thats not possible?