jQuery UI Widgets › Forums › Navigation › Tabs › Synchronous XMLHttpRequest error
Tagged: add, addLast, dynamic, dynamically, jqxTabs, jqxTabs is not a function, tab, Tabs
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 12 months ago.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Author
-
I would like to implement a dynamic tabs features.
I would like to create the website below.
=Removed Link=
but, to the error.
In the case of regular HTML it will operate without failure.
If the page with the jqxGrid an error occurs.
The contents of error are as follows:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check http://xhr.spec.whatwg.org/.
layout.do:54 Uncaught TypeError:. $ (…) jqxTabs is not a function
54 Line:
function goPage (setTitle, src) {
. var length = $ (‘# jqxTabs’) jqxTabs (‘length’);Below is my code.
Layout.jsp
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>TNC Technology</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <!-- Open Sans font from Google CDN --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css"> <!-- jQuery --> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!-- Pixel Admin's javascripts --> <script src="static/assets/javascripts/bootstrap.min.js"></script> <script src="static/assets/javascripts/pixel-admin.min.js"></script> <!-- Pixel Admin's stylesheets --> <link href="static/assets/stylesheets/bootstrap_test.css" rel="stylesheet" type="text/css"> <link href="static/assets/stylesheets/pixel-admin_test.css" rel="stylesheet" type="text/css"> <link href="static/assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css"> <link href="static/assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css"> <link href="static/assets/stylesheets/themes_test.css" rel="stylesheet" type="text/css"> <!-- jqWidget --> <link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <script type="text/javascript" src="static/widgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxtabs.js"></script> <!--[if lt IE 9]> <script src="assets/javascripts/ie.min.js"></script> <![endif]--> <script type="text/javascript"> $(document).ready(function() { $('#jqxTabs').jqxTabs({ width : '100%', animationType : 'fade', //컨텐츠 로딩 애니메이션 적용 scrollAnimationDuration : 500, //스크롤 애니메이션 enabledHover : true, //마우스 가져가면 탭 라인 보임 collapsible : false, //접기 기능 불가 selectedItem : 0, //첫번째 main선택 selectionTracker : true, //탭 이동 애니메이션 적용 scrollable : true, //스크로블 추가 scrollPosition : 'both', //스크로블위치 autoHeight : false, //자동높이조절 불가 showCloseButtons : true, //닫기 버튼 추가 keyboardNavigation : true, //키보드 단축 기능 reorder : true, //재배열기능 추가 scrollStep : 300, //스크로블 스텝 }); }); function goPage(setTitle, src) { var length = $('#jqxTabs').jqxTabs('length'); var flag = true; var title; for (var i = 0; i < length; i++) { title = $('#jqxTabs').jqxTabs('getTitleAt', i); if (title == setTitle) { $('#jqxTabs').jqxTabs('select', i); $('#jqxTabs').jqxTabs('ensureVisible', -1); flag = false; } } if (flag) { /* $('#jqxTabs').jqxTabs('addLast',setTitle,'<div class="newTab">sample title'); $('.newTab').load(src, function(){ $(this).removeClass('newTab'); }); $('#jqxTabs').jqxTabs('ensureVisible', -1); */ $.get(src).done(function(data) { $('#jqxTabs').jqxTabs('addLast', setTitle, data); //alert(data); $('#jqxTabs').jqxTabs('ensureVisible', -1); }); /* $('#jqxTabs').jqxTabs('addLast',setTitle, '<div style="height: 100%;"><iframe src="' + src + '" height="100%" width="100%" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" /></div>'); */ } }; </script> </head> <body class="theme-purple-hills main-menu-animated"> <script> var init = []; </script> <div id="main-wrapper"> <!-- 2. $MAIN_NAVIGATION =========================================================================== Main navigation --> <div id="main-navbar" class="navbar navbar-inverse" role="navigation"> <!-- Main menu toggle --> <button type="button" id="main-menu-toggle"> <i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span> </button> <div class="navbar-inner"> <!-- Main navbar header --> <div class="navbar-header"> <!-- Logo --> <a href="layout.do" class="navbar-brand"> <div> <img alt="TNC Technology" src="static/assets/images/pixel-admin/main-navbar-logo.png"> </div> TNC Technology </a> <!-- Main navbar toggle --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"> <i class="navbar-icon fa fa-bars"></i> </button> </div> <!-- / .navbar-header --> <div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse"> <div> <div class="right clearfix"> <ul class="nav navbar-nav pull-right right-navbar-nav"> <li class="login-time"><i class="nav-icon fa fa-clock-o"></i> 로그인 유효시간 : 23분 24초</li> <li class="dropdown"><a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown"> <i class="menu-icon fa fa-user"></i> <span>홍길동</span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li> <li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li> <li><a href="#"><i class="dropdown-icon fa fa-cog"></i> Settings</a></li> <li class="divider"></li> <li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i> Log Out</a></li> </ul></li> </ul> <!-- / .navbar-nav --> </div> <!-- / .right --> </div> </div> <!-- / #main-navbar-collapse --> </div> <!-- / .navbar-inner --> </div> <!-- / #main-navbar --> <!-- /2. $END_MAIN_NAVIGATION --> <div id="main-menu" role="navigation"> <div id="main-menu-inner"> <ul class="navigation"> <li class="mm-dropdown"><a href="#"><i class="menu-icon fa fa-users"></i><span class="mm-text">common</span></a> <ul> <li id="menu"><a href="#" tabindex="-1" onclick="goPage('메뉴데이터관리','./tab1.do')"><span class="mm-text">menu</span></a></li> <li id="admin"><a href="#" tabindex="-1" onclick="goPage('권한별메뉴관리','./tab3.do')"><span class="mm-text">admin</span></a></li> <li id="test"><a href="#" tabindex="-1" onclick="goPage('메세지정보관리','./tab4.do')"><span class="mm-text">test</span></a></li> <li id="error"><a href="#" tabindex="-1" onclick="goPage('권한레벨관리','./tab5.do')"><span class="mm-text">error</span></a></li> </ul></li> </ul> <!-- / .navigation --> <div class="menu-content"> <!-- <a href="pages-invoice.html" class="btn btn-info btn-block btn-outline dark">Create Invoice</a> --> </div> </div> <!-- / #main-menu-inner --> </div> <!-- / #main-menu --> <!-- /4. $MAIN_MENU --> <div id="content-wrapper"> <div id='jqxWidget'> <div id='jqxTabs'> <ul style='margin-left: 10px;'> <li>Main</li> </ul> <div class="row"> <ul class="breadcrumb"> <li>Home</li> <li>공통 관리</li> <li>메뉴 데이터 관리</li> </ul> <div class="panel-body"> <div class="table-warning"> <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="jq-datatables-example"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center">4</td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> </tr> <tr class="even gradeA"> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> </tr> <tr class="even gradeA"> <td>Trident</td> <td>AOL browser (AOL desktop)</td> <td>Win XP</td> <td class="center">6</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.7</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 2.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 3.0</td> <td>Win 2k+ / OSX.3+</td> <td class="center">1.9</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.0</td> <td>OSX.2+</td> <td class="center">1.8</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.5</td> <td>OSX.3+</td> <td class="center">1.8</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape 7.2</td> <td>Win 95+ / Mac OS 8.6-9.2</td> <td class="center">1.7</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape Browser 8</td> <td>Win 98SE+</td> <td class="center">1.7</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape Navigator 9</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.0</td> <td>Win 95+ / OSX.1+</td> <td class="center">1</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- / #content-wrapper --> <div id="main-menu-bg"></div> </div> <!-- / #main-wrapper --> <!-- Get jQuery from Google CDN --> <!--[if !IE]> --> <script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">' + "<"+"/script>"); </script> <!-- <![endif]--> <!--[if lte IE 9]> <script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script> <![endif]--> <script type="text/javascript"> init.push(function() { // Javascript code here }) window.PixelAdmin.start(init); </script> </body> </html>tab4.jsp
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" /> <meta name="description" content="The jqxTabs is breaking the content into multiple sections. You can populate it from 'UL' for the tab titles and 'DIV' for it's contents." /> <title>TNC</title> <!-- jQuery --> <script src="js/jquery-1.11.1.min.js"></script> <!-- jqWidget --> <link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <script type="text/javascript" src="static/widgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="static/widgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript"> $(document) .ready( function() { var data = '[{"GroupID": 1,"GroupName":"고객사-Admin","ParentGroupID":null,"ParentGroupName":"Admin","Level":"개발사 권한","":""},{"GroupID": 2,"GroupName":"고객사-법무부서","ParentGroupID":1,"ParentGroupName":"고객사-Admin","Level":"개발사 권한"},{"GroupID": 3,"GroupName":"고객사-회계팀","ParentGroupID":2,"PGroupName":"고객사-법무부서","Level":"개발사 권한"},{"GroupID": 4,"GroupName":"고객사-system","ParentGroupID":null,"PGroupName":"고객사-시스템","Level":"시스템 권한"}]'; // prepare the data var source = { dataType : "json", localData : data, dataFields : [ { //그룹 ID name : 'GroupID', type : 'number' }, { //그룹명 name : 'GroupName', type : 'string' }, { //부모그룹 ID name : 'ParentGroupID', type : 'number' }, { //부모그룹 name : 'ParentGroupName', type : 'string' }, { //권한레벨 name : 'Level', type : 'string' } ], hierarchy : { keyDataField : { name : 'GroupID' }, parentDataField : { name : 'ParentGroupID' } }, id : 'GroupID', addRow : function(rowID, rowData, position, parentID, commit) { commit(true); newRowID = rowID; }, updateRow : function(rowId, rowData, commit) { commit(true); }, deleteRow : function(rowID, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete : function() { } }); //var dataAdapter = new $.jqx.dataAdapter(source); $("#treeGrid").jqxTreeGrid({ width : '100%', theme : 'energyblue', source : dataAdapter, pagerMode : 'advanced', pageable : true, editable : true, showToolbar : true, altRows : true, pagerButtonsCount : 8, toolbarHeight : 35, renderToolbar : function(toolBar) { var toTheme = function(className) { //if (theme == "") return className; //return className + " " + className + "-" + theme; } // appends buttons to the status bar. var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>"); var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>"; var addButton = $(buttonTemplate); var editButton = $(buttonTemplate); var deleteButton = $(buttonTemplate); var cancelButton = $(buttonTemplate); var updateButton = $(buttonTemplate); container.append(addButton); container.append(editButton); container.append(deleteButton); container.append(cancelButton); container.append(updateButton); toolBar.append(container); addButton.jqxButton({ cursor : "pointer", enableDefault : false, disabled : true, height : 25, width : 25 }); addButton.find('div:first').addClass(toTheme('jqx-icon-plus')); addButton.jqxTooltip({ position : 'bottom', content : "Add" }); editButton.jqxButton({ cursor : "pointer", disabled : true, enableDefault : false, height : 25, width : 25 }); editButton.find('div:first').addClass(toTheme('jqx-icon-edit')); editButton.jqxTooltip({ position : 'bottom', content : "Edit" }); deleteButton.jqxButton({ cursor : "pointer", disabled : true, enableDefault : false, height : 25, width : 25 }); deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete')); deleteButton.jqxTooltip({ position : 'bottom', content : "Delete" }); updateButton.jqxButton({ cursor : "pointer", disabled : true, enableDefault : false, height : 25, width : 25 }); updateButton.find('div:first').addClass(toTheme('jqx-icon-save')); updateButton.jqxTooltip({ position : 'bottom', content : "Save Changes" }); cancelButton.jqxButton({ cursor : "pointer", disabled : true, enableDefault : false, height : 25, width : 25 }); cancelButton.find('div:first').addClass(toTheme('jqx-icon-cancel')); cancelButton.jqxTooltip({ position : 'bottom', content : "Cancel" }); var updateButtons = function(action) { switch (action) { case "Select": addButton.jqxButton({ disabled : false }); deleteButton.jqxButton({ disabled : false }); editButton.jqxButton({ disabled : false }); cancelButton.jqxButton({ disabled : true }); updateButton.jqxButton({ disabled : true }); break; case "Unselect": addButton.jqxButton({ disabled : true }); deleteButton.jqxButton({ disabled : true }); editButton.jqxButton({ disabled : true }); cancelButton.jqxButton({ disabled : true }); updateButton.jqxButton({ disabled : true }); break; case "Edit": addButton.jqxButton({ disabled : true }); deleteButton.jqxButton({ disabled : true }); editButton.jqxButton({ disabled : true }); cancelButton.jqxButton({ disabled : false }); updateButton.jqxButton({ disabled : false }); break; case "End Edit": addButton.jqxButton({ disabled : false }); deleteButton.jqxButton({ disabled : false }); editButton.jqxButton({ disabled : false }); cancelButton.jqxButton({ disabled : true }); updateButton.jqxButton({ disabled : true }); break; } } var rowKey = null; $("#treeGrid").on('rowSelect', function(event) { var args = event.args; rowKey = args.key; updateButtons('Select'); }); $("#treeGrid").on('rowUnselect', function(event) { updateButtons('Unselect'); }); $("#treeGrid").on('rowEndEdit', function(event) { updateButtons('End Edit'); }); $("#treeGrid").on('rowBeginEdit', function(event) { updateButtons('Edit'); }); addButton.click(function(event) { if (!addButton.jqxButton('disabled')) { $("#treeGrid").jqxTreeGrid('expandRow', rowKey); // add new empty row. $("#treeGrid").jqxTreeGrid('addRow', null, {}, 'first', rowKey); // select the first row and clear the selection. $("#treeGrid").jqxTreeGrid('clearSelection'); $("#treeGrid").jqxTreeGrid('selectRow', newRowID); // edit the new row. $("#treeGrid").jqxTreeGrid('beginRowEdit', newRowID); updateButtons('add'); } }); cancelButton.click(function(event) { if (!cancelButton.jqxButton('disabled')) { // cancel changes. $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, true); } }); updateButton.click(function(event) { if (!updateButton.jqxButton('disabled')) { // save changes. $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, false); } }); editButton.click(function() { if (!editButton.jqxButton('disabled')) { $("#treeGrid").jqxTreeGrid('beginRowEdit', rowKey); updateButtons('edit'); } }); deleteButton.click(function() { if (!deleteButton.jqxButton('disabled')) { var selection = $("#treeGrid").jqxTreeGrid('getSelection'); if (selection.length > 1) { var keys = new Array(); for (var i = 0; i < selection.length; i++) { keys.push($("#treeGrid").jqxTreeGrid('getKey', selection[i])); } $("#treeGrid").jqxTreeGrid('deleteRow', keys); } else { $("#treeGrid").jqxTreeGrid('deleteRow', rowKey); } updateButtons('delete'); } }); }, columns : [ { text : '그룹명', dataField : 'GroupName', align : 'center', width : '40%' }, { text : '부모그룹', dataField : 'ParentGroupName', align : 'center', width : '30%' }, { text : '권한레벨', dataField : 'Level', align : 'center', width : '30%' } ] }); }); </script> </head> <body> <ul class="breadcrumb"> <li>Home</li> <li>공통 관리</li> <li>사용자 그룹관리</li> </ul> <div class="panel-body"> <div id="treeGrid"> </div> </div> </body> </html>Hello coni,
Please try defining the goPage function in $(document).ready(), too and make sure it is not invoked before the jqxTabs has been initialized.
The “Synchronous XMLHttpRequest…” message is actually a warning and should not cause the page to break.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Fixed like the code below.
But, an error occurs.$(document).ready(function() { $('#jqxTabs').jqxTabs({ width : '100%', animationType : 'fade', //컨텐츠 로딩 애니메이션 적용 scrollAnimationDuration : 500, //스크롤 애니메이션 enabledHover : true, //마우스 가져가면 탭 라인 보임 collapsible : false, //접기 기능 불가 selectedItem : 0, //첫번째 main선택 selectionTracker : true, //탭 이동 애니메이션 적용 scrollable : true, //스크로블 추가 scrollPosition : 'both', //스크로블위치 autoHeight : false, //자동높이조절 불가 showCloseButtons : true, //닫기 버튼 추가 keyboardNavigation : true, //키보드 단축 기능 reorder : true, //재배열기능 추가 scrollStep : 300 }); goPage = function(setTitle, src) { var length = $('#jqxTabs').jqxTabs('length'); var flag = true; var title; for (var i = 0; i < length; i++) { title = $('#jqxTabs').jqxTabs('getTitleAt', i); if (title == setTitle) { $('#jqxTabs').jqxTabs('select', i); $('#jqxTabs').jqxTabs('ensureVisible', -1); flag = false; } } if (flag) { $.get(src).done(function(data) { $('#jqxTabs').jqxTabs('addLast', setTitle, data); //alert(data); $('#jqxTabs').jqxTabs('ensureVisible', -1); }); } }; });Hi coni,
What error occurs? Is it the same one?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hi Dimitar,
yes, same error
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check http://xhr.spec.whatwg.org/.
layout.do:81 Uncaught TypeError: $(…).jqxTabs is not a function
> goPage @ layout.do:81
> onclick @ layout.do:228I suspect code is below.
$('#jqxTabs').jqxTabs('addLast', setTitle, data);An error occurs when the code is called.
Hi coni,
Unfortunately, we cannot test your example and cannot determine the source of the issue. Here is an example of our own with a similar functionality, which works fine:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript"> $(document).ready(function () { // create jqxtabs. $('#jqxtabs').jqxTabs({ width: 550, height: 350 }); $('#addTab').click(function () { $.get('grid.htm', function (data) { $('#jqxtabs').jqxTabs('addLast', 'Grid tab', data); }); }); }); </script> </head> <body class='default'> <button id="addTab"> Add a new tab</button> <div id='jqxtabs'> <ul style='margin-left: 20px;'> <li>Tab 1</li> </ul> <div> Content 1 </div> </div> </body> </html>And here is the code of the page grid.htm:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to create a Grid from Array data. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; for (var i = 0; i < 100; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } var source = { localdata: data, datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); $("#jqxgrid").jqxGrid( { width: 500, height: 300, source: dataAdapter, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.