jQuery UI Widgets Forums General Discussions Refresh jqxTabContent

This topic contains 3 replies, has 2 voices, and was last updated by  admin 8 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Refresh jqxTabContent #112687

    robf
    Participant

    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

    Refresh jqxTabContent #112692

    admin
    Keymaster

    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/

    Refresh jqxTabContent #112730

    robf
    Participant

    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

    Refresh jqxTabContent #112732

    admin
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.