Integrate with Jquery UI Tabs

[jiahuaiMember]

I need open multiple MVC url within a page. I using jquery UI library as my tabs and using jqxwidget for table design.

When i use div load() to method load my MVC url page, the page that using jqxwidget cannot fully function.

Is that any conflict integrate between jquery UI tabs, load and jqxwidget?

Thanks

[Peter StoevKeymaster]

Hi,

To use jqxGrid, see: jquery-grid-getting-started.htm. If you added references to the required jqwidgets scripts correctly and followed the instructions from the Getting Started section, then you should not have any issues. As far as I know, we do not have conflicting parts with that widget.

Best Regards,
Peter Stoev

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

[jiahuaiMember]

I using a tabs to load other url in a same page. When user click a new item in menu bar, it will automatic to add on a new tabs.
This is my sample code.

Main Page::

jQuery Tabs Sample

$(document).ready(function () {
// create jqxtabs.
$(‘#jqxtabs’).jqxTabs({showCloseButtons: true});
var tabOpened = [];
tabCounter = 2;

$(‘.menuItemName’).click(function() {
id = $(this).attr(“id”);
var identifier = true;

for (var t=0;t< =tabOpened.length;t++){
if (id == tabOpened[t]){
identifier = false;
}
}

if(identifier){ ;
tabsId = "tabs-" + tabCounter,
$('#jqxtabs').jqxTabs('addLast', id, '

‘);
tabCounter++;
$(‘#’+tabsId).load(“../” + id + “/” + “index”);

}else{
alert(id + ” window already opened.”);

}
});
});

Tab 1

Appointments

My Calendar
TestingBoards
TestingKeys

Testing Key Page::

$(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;
row["available"] = true;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
var columnCheckBox = null;
var updatingCheckState = false;
$("#jqxgrid").jqxGrid(
{
editable: true,
source: dataAdapter,
columns: [
{ text: '', datafield: 'available', columntype: 'checkbox', width: 30, renderer: function () {
return '

‘;
},
rendered: function (element) {
$(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
if (checked == null || updatingCheckState) return;
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

if (checked) {
$(“#jqxgrid”).jqxGrid(‘selectallrows’);
}
else if (checked == false) {
$(“#jqxgrid”).jqxGrid(‘clearselection’);
}

for (var i = 0; i 0) {
$(columnCheckBox).jqxCheckBox(‘indeterminate’);
}
else {
$(columnCheckBox).jqxCheckBox(‘uncheck’);
}
updatingCheckState = false;
}
});
});

Testing Boards Page::

$(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["available"] = true;
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) { }
});
var columnCheckBox = null;
var updatingCheckState = false;
$("#jqxgrid123").jqxGrid(
{
editable: true,
source: dataAdapter,
columns: [
{ text: '', datafield: 'available', columntype: 'checkbox', width: 30, renderer: function () {
return '

‘;
},
rendered: function (element) {
$(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
if (checked == null || updatingCheckState) return;
var rowscount = $(“#jqxgrid123”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid123”).jqxGrid(‘beginupdate’);

if (checked) {
$(“#jqxgrid123”).jqxGrid(‘selectallrows’);
}
else if (checked == false) {
$(“#jqxgrid123”).jqxGrid(‘clearselection’);
}

for (var i = 0; i 0) {
$(columnCheckBox).jqxCheckBox(‘indeterminate’);
}
else {
$(columnCheckBox).jqxCheckBox(‘uncheck’);
}
updatingCheckState = false;
}
});
});

It was successful to run at 1st adding of new tabs,while when add another new tab, the error message said that the $(…).jqxTabs is not a function. So what is problem or error occur? Hope can help me. Thanks

Best Regards,
Jiahuai

[Author]

Posts