Use div loading url in tabs div

[jiahuaiMember]

May i know that how i can include the jquery load() in the tabs div?
And what is the limitation of the load() that used in the jqWidgets product?

Thanks.

[DimitarParticipant]

Hello jiahuai,

The load() function can be used to successfully load content for jqxTabs and other widgets. Please, take a look at the demo Loading Tab contents with Ajax.

Best Regards,
Dimitar

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

[jiahuaiMember]

Thanks 1st.

I need used a tabs div to loading different mvc in a same page. That is similar like a iframe. Is that have a conflict between of each mvc?

[casttParticipant]

I hope we will get feature to set content of dynamically created tabs via ajax in future. While we don’t actually have it, here is workaround:

 $('#jqxTabs').jqxTabs('addLast',title, '<div class="newTab">Sample title');
      $('.newTab').load(url, function() {
          $(this).removeClass('newTab');
      });

[jiahuaiMember]

But when i load the url into the tabs, the jqxtabs had a conflict with other jqx library. So what method and solution that i can taken to solve it?

[casttParticipant]

I don’t see any conflicts, could you be more specific?

[jiahuaiMember]

This is my sample code.

<!–

$(document).ready(function () {
// create jqxtabs.
$(‘#jqxtabs’).jqxTabs({showCloseButtons: true});
var tabOpened = [];
tabCounter = 2;
$(‘#tab-1’).load(“../” + id + “/” + “index”);
$(‘.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++;

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

}
});
});

<!–

Tab 1

Appointments

My Calendar
TestingBoards
TestingKeys

–>

<!–

$(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;
}
});
});

–>

First, i display the main page and the tabs will included the testing Key page. The menu bar is allow the user click to display a new url, that mean it will added a new tabs to load a new url.

After i finished display the main page with the testing key page, that not allow me to add a new tabs when i click a menu item. The error mention that $(…).jqxTabs is not a function.

But when i remove the testing key page, it will added successfully without any error. So is that any conflict for the jquery?

[jiahuaiMember]

The menu page html coding.

Tab 1

Appointments

My Calendar
TestingBoards
TestingKeys

[jiahuaiMember]

Do u have any email? i wan send u my sample code, since i dun know how to paste my code in this forum.

[Author]

Posts