Selecting a tab in jqxlayout

[NormBParticipant]

I have successfully created a simple layout using jqxlayout with layout as follows

var layout = [{
		type: 'layoutGroup',
		orientation: 'horizontal',
		items: [{ // LHS
			type: 'tabbedGroup',
			width: '40%',
			items: [{ // LHS - upper
				type: 'layoutPanel',
				title: 'Options',
				contentContainer: 'OptionsPanel',
				selected: true
			},
			{ // LHS - lower
				type: 'layoutPanel',
				title: 'ABC',
				contentContainer: 'AbcPanel'
			}]
		},
		{ // RHS
			type: 'tabbedGroup',
			width: '60%',
			items: [{ // RHS - upper
				type: 'layoutPanel',
				title: 'Music',
				contentContainer: 'MusicDisplayPanel',
				selected: true
			},
			{ // RHS - lower
				type: 'layoutPanel',
				title: 'Messages',
				contentContainer: 'MessagesPanel'
			}]
		}]
	}];
	$('#jqxLayout').jqxLayout({ theme: 'energyblue', width: '100%', height: 750, layout: layout });

After using the initially selected “Options” Panel, I update the content of the “ABC” panel.

How can I now make that the new selected tab programatically?

If I could select the tab I could perhaps trigger a “click” event on it – something like $(“.jqx-ribbon-item[innerHTML=’ABC’]).trigger(‘click’)

That selector does not work (it may not be legal syntax).

How can I do it?

Thanks

[MartinParticipant]

Hello NormB,

You can select the jqxRibbon element using jQuery and call its selectAt method passing the index of the tab you need to select.
Here is an Example.

Let us know if you need any further assistance!

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[NormBParticipant]

Thank you

[Author]

Posts