jQuery UI Widgets Forums Navigation Tabs Disabling the first tab of a tabs in a window

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

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

  • 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>


    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/


    brian.allone
    Participant

    Hi Dimitar,

    Yes! Now the chrome’s console is clean.

    Thank you!

    Regards,
    Brian

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

You must be logged in to reply to this topic.