Disabling the first tab of a tabs in a window - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: disable, disableAt, initContent, jqxTabs, jqxwindow, tab, Tabs, window

This topic contains 2 replies, has 2 voices, and was last updated by brian.allone 9 years, 12 months ago.

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

Author

Disabling the first tab of a tabs in a window Posts
December 10, 2014 at 10:54 am Disabling the first tab of a tabs in a window #64024
brian.allone
Participant
Hi,

The following error msg appears in the debug console of Chrome(39.0.2171.71 m):

“Uncaught TypeError: Cannot read property ‘outerWidth’ of undefined”

Did I miss importing some .css or .js?
Or any mistakes in my code?

===
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>Disabling the first tab of jqxTabs in a jqxWindow</title>

<link href=”http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”stylesheet”>
<script src=”js/lib/jquery-1.10.2.min.js”></script>
<script src=”js/lib/jquery-ui-1.11.2.js”></script>

<link rel=”stylesheet” href=”js/lib/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script src=”js/lib/jqwidgets/jqxcore.js”></script>
<script src=”js/lib/jqwidgets/jqxdata.js”></script>
<script src=”js/lib/jqwidgets/jqxbuttons.js”></script>
<script src=”js/lib/jqwidgets/jqxscrollbar.js”></script>
<script src=”js/lib/jqwidgets/jqxgrid.js”></script>
<script src=”js/lib/jqwidgets/jqxgrid.selection.js”></script>
<script src=”js/lib/jqwidgets/jqxtabs.js”></script>
<script src=”js/lib/jqwidgets/jqxsplitter.js”></script>
<script src=”js/lib/jqwidgets/jqxmenu.js”></script>
<script src=”js/lib/jqwidgets/jqxgrid.filter.js”></script>
<script src=”js/lib/jqwidgets/jqxgrid.columnsresize.js”></script>
<script src=”js/lib/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script src=”js/lib/jqwidgets/jqxgrid.sort.js”></script>
<script src=”js/lib/jqwidgets/jqxdropdownlist.js”></script>
<script src=”js/lib/jqwidgets/jqxlistbox.js”></script>
<script src=”js/lib/jqwidgets/jqxcombobox.js”></script>
<script src=”js/lib/jqwidgets/jqxdatetimeinput.js”></script>
<script src=”js/lib/jqwidgets/jqxcalendar.js”></script>
<script src=”js/lib/jqwidgets/jqxcheckbox.js”></script>
<script src=”js/lib/jqwidgets/jqxpanel.js”></script>
<script src=”js/lib/jqwidgets/jqxwindow.js”></script>
<script src=”js/lib/jqwidgets/jqxslider.js”></script>
<script src=”js/lib/jqwidgets/globalization/globalize.js”></script>
<script>
function main() {
$( ‘#windowX’ ).jqxWindow( {width:303, height:425, autoOpen:false, resizable:false, animationType:’none’, isModal:true, modalOpacity:0.2 } );
$( ‘#tabsX’ ).jqxTabs( {width:’99%’, height:’99%’} );
$( ‘#buttonX’ ).jqxButton( {width:350, height:30} );
$( ‘#buttonX’ ).click( function() {
$(‘#windowX’).jqxWindow(‘open’);
$( ‘#tabsX’ ).jqxTabs(‘disableAt’, 0);
} );
}
</script>

</head>
<body onload=”main();”>
<input type=”button” id=”buttonX” value=”press me and see the debug console”/>
<div id=”windowX”>
<div>windowTitle</div>
<div>
<div id=”tabsX”>
- A
- B
- C
<div id=”tabA”>Tab A</div>
<div id=”tabB”>Tab B</div>
<div id=”tabC”>Tab C</div>
</div>
</div>
</div>
</body>
</html>
December 10, 2014 at 2:10 pm Disabling the first tab of a tabs in a window #64044

Dimitar
Participant

Hello brian.allone,

Widgets in jqxWindow have to be initialized in the window’s initContent callback function (example). Please initialize your jqxTabs in initContent. If the issue persists, please create a JSFiddle example which reproduces the issue.

Best Regards,
Dimitar

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

December 11, 2014 at 3:05 am Disabling the first tab of a tabs in a window #64059

brian.allone
Participant

Hi Dimitar,

Yes! Now the chrome’s console is clean.

Thank you!

Regards,
Brian
Author

Posts

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

You must be logged in to reply to this topic.