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 8 years, 1 month 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>- This topic was modified 8 years, 1 month ago by Peter Stoev. Reason: Removed Link due to Forum Policy violation
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); }); } }; });- This reply was modified 8 years, 1 month ago by coni.
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.
- This reply was modified 8 years, 1 month ago by coni.
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.