Refresh jqxTabContent

[robfParticipant]

Hello,

I reuse a SINGLE jqxwindow and load in various content as needed – e.g. I have a jqxwindow called #infoWindow

I have two questions regarding using jqxtabs with jqxwindow:

1. I am using jqxtabs inside the jqxwindow. When I resize the window, the TAB content does not resize. Content DOES go full size if I MOVE the jqxwindow.

2. When I load data into the jqxwindow that is not the jqxtab (e.g. simple text content) and THEN load jqxtab content the tabs do not render properly, they simply show as an ordered list. AGAIN, when I resize the jqxwindow they seem to repaint and render ok.

Is there a way to manually fire off a TAB CONTENT render – or something like that?

I have added a resize event on the jqxwindow and that triggers but I do not know how to refresh the TAB widget.

I would rather stick with the jqxtabs and not go back to bootstrap tabs if you can please assist.

Thanks!
Rob

[adminKeymaster]

Hi Rob,

I would suggest you to check this: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/defaultfunctionality.htm?light. It shows a Tabs inside a Window. The tabs is defined with 100% width and height i.e it should automatically resize itself when the window is resized.

In the above demo, jqxWindow’s content is initialized in its initContent function.

In general, the jqxTabs content should be initialized in initTabContent callback function. This is shown here: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?light.

Hope this helps you.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hi Peter,
I used that demo to begin my work and have the window and tabs defined as:

$('#infoWindow').jqxWindow(
		{
			autoOpen: false,
			showCollapseButton: false,
			maxWidth: 800,
			minHeight: 200,
			minWidth: 200,
			height: 575,
			width: 575,
			closeButtonAction: 'hide',
			initContent: () =>
			{
				$('#infoTabs').jqxTabs({ height: '100%', width:  '100%', reorder: true,  position: 'top'});
				$('#infoWindow').jqxWindow('focus');
			}
		});

In my code I dynamically create the content of the tabs – vs. your hardcoded example. This is why I wanted to know if I could refresh/rerender the tabs.
Also, when I check the width and height via
$(‘#infoTabs’).jqxTabs(‘width’) and $(‘#infoTabs’).jqxTabs(‘height’) they both correctly show 100%. Again, the only way the tab content changes is when I manually move the window.

It happens in all browsers so I’m stumped 🙁

Rob

[adminKeymaster]

Hi Rob,

Thanks for the feedback.

Would it be possible for you to share a very small jsfiddle example for your scenario so we can test and debug it?

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts