jQWidgets Forums

Tagged: Tabs

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 8 years, 4 months ago.

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

Author

Multiple jqxTabs control instances do not work on one page in ver. 4.5 Posts

January 19, 2017 at 5:02 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #90834

Participant

We tried to use two nested jqxTabs controls on one page with ver.4.5 and got a js-error.
Even when we try to place two controls that are not nested on one page – they do not work properly: clicking on tab headers in both controls changes tabs only in the 2nd control.

This issue was not reproduced in ver.4.4.

Examples we used:

<div id='jqxTabs'>
    <ul style='margin-left: 20px;'>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>
        <p>Content 1</p>
        <div id='jqxTabs2'>
            <ul style='margin-left: 20px;'>
                <li>Tab 4</li>
                <li>Tab 5</li>
            </ul>
            <div>Content 4</div>
            <div>Content 5</div>
        </div>
    </div>
    <div>Content 2</div>
</div>

 $('#jqxTabs').jqxTabs({
     width: 300,
     height: 150,
     theme: 'energyblue'
 });
  $('#jqxTabs2').jqxTabs({
     width: 300,
     height: 150,
     theme: 'energyblue'
 });

and

<div id='jqxTabs'>
    <ul style='margin-left: 20px;'>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>
<div id='jqxTabs2'>
    <ul style='margin-left: 20px;'>
        <li>Tab 4</li>
        <li>Tab 5</li>
    </ul>
    <div>Content 4</div>
    <div>Content 5</div>
</div>

 $('#jqxTabs').jqxTabs({
     width: 300,
     height: 150,
     theme: 'energyblue'
 });
  $('#jqxTabs2').jqxTabs({
     width: 300,
     height: 150,
     theme: 'energyblue'
 });

January 19, 2017 at 5:51 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #90835

Peter Stoev

Keymaster

This is not a problem in jqxTabs. It is a problem in jqx-all.js file. The solution is to use the individual script files like in that working example: http://jsfiddle.net/8ndLbyv0/

Best Regards,
Peter Stoev

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

January 20, 2017 at 11:40 am Multiple jqxTabs control instances do not work on one page in ver. 4.5 #90853

Part13an

Participant

We use many jqWidgets controls on many pages in our project, we need correct jqx-all.fs file. When will the issue be fixed?

January 20, 2017 at 12:10 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #90854

Peter Stoev

Keymaster

Hi Part13an,

There is no ETA so please follow my advice.

Best Regards,
Peter Stoev

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

February 2, 2017 at 4:18 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #91214

Part13an

Participant

Hi!
We’ve tried to follow your advice.
We got rid of jqx-all.js file in our application and added all individual script files from jqwidgets folder to the page.
We still have the same error.

February 2, 2017 at 9:38 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #91226

Peter Stoev

Keymaster

Hi Part13an,

Ok, then please provide a jsfiddle.net sample which demonstrates it.

Best Regards,
Peter Stoev

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

February 3, 2017 at 12:47 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #91256

Part13an

Participant

For some reason it works on jsfiddle (http://jsfiddle.net/gLnc0ms2/), though there is an error message in Console: ‘Uncaught TypeError: Cannot read property ‘length’ of undefined’.

But when we try to use it without jsfiddle on a separate page, it doesn’t work. So it works only on jsfiddle.
Here is the page code:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
		<link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
	
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxangular.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxbargauge.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxbulletchart.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxbuttongroup.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcalendar.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxchart.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxchart.annotations.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxchart.api.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxchart.core.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxchart.rangeselector.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxchart.waterfall.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcolorpicker.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcombobox.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcomplexinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.elements.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdata.export.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdatatable.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdate.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdatetimeinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdocking.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdockinglayout.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdockpanel.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdragdrop.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownbutton.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxeditor.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxexpander.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxfileupload.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxformattedinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgauge.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.aggregates.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.columnsreorder.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.columnsresize.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.export.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.filter.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.grouping.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.pager.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.sort.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.storage.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxkanban.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxknob.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxknockout.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxlayout.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxlistmenu.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxloader.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxmaskedinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxnavbar.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxnavigationbar.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxnotification.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxpanel.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxpasswordinput.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxpopover.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxprogressbar.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxradiobutton.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxrangeselector.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxrating.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxresponse.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxresponsivepanel.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxribbon.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.api.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxscrollview.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxslider.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxsortable.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxsplitter.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxswitchbutton.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtabs.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtagcloud.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtextarea.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtoolbar.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtooltip.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtouch.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtree.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtreegrid.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxtreemap.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxvalidator.js"></script>
		<script src="https://jqwidgets.com/public/jqwidgets/jqxwindow.js"></script>
		
		<script type="text/javascript">
			$(function(){
			 $('#jqxTabs').jqxTabs({
				 width: 300,
				 height: 150,
				 theme: 'energyblue',
				 animationType: 'fade'
			 });
			  $('#jqxTabs2').jqxTabs({
				 width: 300,
				 height: 150,
				 theme: 'energyblue',
				 animationType: 'fade'
			 });
			});
		</script>
	</head>
	<body>
		
		<div id='jqxTabs'>
			<ul style='margin-left: 20px;'>
				<li>Tab 1</li>
				<li>Tab 2</li>
				<li>Tab 3</li>
			</ul>
			<div>
				<div id='jqxTabs2'>
					<ul style='margin-left: 20px;'>
						<li>Tab 4</li>
						<li>Tab 5</li>
						<li>Tab 6</li>
					</ul>
					<div>Content 4</div>
					<div>Content 5</div>
					<div>Content 6</div>
				</div>
			</div>
			<div>Content 2</div>
			<div>Content 3</div>
		</div>
		
	</body>
</html>

February 3, 2017 at 2:38 pm Multiple jqxTabs control instances do not work on one page in ver. 4.5 #91258

Peter Stoev

Keymaster

Hi Part13an,

There is no difference in including jqx-all.js and ALL script files. You need to include only the required files for your app. I guess you do not need jqxcore.elements.js as we do no use it anywhere in our demos yet.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.