find tab position based on ID

[ScottNLMember]

This is what i have so far


$(document).ready(function () {

var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ }
],
id: ‘id’,
url:’ajax/menu.php’,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}] );
$(‘#menu’).jqxMenu({ source: records, height: 30, theme: “summer”, width: ‘100%’ });
$(“#menu”).bind(‘itemclick’, function (event) {
var tabid = ‘#tab_’ + event.args.id;
if($(‘#workspace’).find(tabid).length){
$(‘#workspace’).jqxTabs(‘select’, 1);
}else{
$(‘#workspace’).jqxTabs(‘addLast’, ‘

‘ + $(event.args).text() + ‘

‘, “data”);
}
});

var addButton,
addButtonWidth = 29,
index = 0;
// create jqxTabs.
$(‘#workspace’).jqxTabs({ height: 500, width: ‘100%’, theme: “classic”, showCloseButtons: true});
var index = 0;
$(‘#workspace’).bind(‘tabclick’, function (event) {

});

});

this is the html:

<code>

<div class="pagewrap">
        <div class="header">
            <div id='menu'></div>
        </div>

        <div class="content">View Topic

        <div id='workspace' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>Desktop</li>
            </ul>
            <div>
                Desktop
            </div>

        </div>


        </div>

        <div class="footer"></div>
   </div>

</code>

What i am doing is linking menu header with tab.

When clicking on the menu the tab opens. If it is open it blocks it from opening again here:


var tabid = '#tab_' + event.args.id;
if($('#workspace').find(tabid).length){
$('#workspace').jqxTabs('select', 1);
}else{
$('#workspace').jqxTabs('addLast', '

‘ + $(event.args).text() + ‘

‘, “data”);
}

how do i find the position based on the tab id so i can select the tab
$(‘#workspace’).jqxTabs(‘select’, ?????);

Thanks in advance!

[MinkoBlocked]

Hello ScottNL,

actually you can do it without using DOM ids. The problem with DOM ids comes from the uncertainty whether the current DOM id is set to the jqxTab’s header or content.
I suggest the following approach:

JavaScript:

var currentItem = 0,
    tabs = { 'tab_zero': currentItem },
    tabId;
$('#menu').jqxMenu({ width: 370 });
$('#menu').bind('itemclick', function (e) {
    tabId = 'tab_' + e.args.id;
    if (typeof tabs[tabId] === 'number') {
        $('#jqxTabs').jqxTabs('select', tabs[tabId]);
    } else {
        currentItem += 1;
        tabs[tabId] = currentItem;
        $('#jqxTabs').jqxTabs('addLast', e.args.innerHTML, 'Data: ' + e.args.innerHTML);
    }
});

HTML:

<div id="menu">
    <ul>
        <li id="zero">Node.js</li>
        <li id="first">First</li>
        <li id="second">Second</li>
        <li id="third">Third</li>
        <li id="fourth">Fourth</li>
        <li id="fifth">Fifth</li>
    </ul>
</div><br />
<div id='jqxTabs'>
    <ul>
        <li id="tab_zero">Node.js</li>
    </ul>
    <div>
        Data: Node.js
    </div>
</div>

The only difference here is that the jqxMenu is created statically from a fixed HTML markup.
In the hash tabs are saved fake ids (which are not set to any DOM element) and the position for each tab (corresponding to the id). The tab position is depending on the variable currentItem which is incrementing each time a new tab is added.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[ScottNLMember]

Thanks for the effort Minko,

I couldn’t get this to work though.

What i am also failing to understand is why i cannot access the dynamically created tabs by id with jquery basic functions

i tryed this


$("#unorderedList li").each(function() {
alert(this.id );
});


the ones that are loaded in the DOM are shown. The dynamically created ones are blank but this returns true

var tabid = ‘tab_’ + event.args.id;

$(‘#workspace’).find(“#” + tabid).length

How do i access these with a each function or any other?

I am looking at using this library as a platform for a program i am righting and need this kind of functionality.

I thank you in advance for your suggestions.

[ScottNLMember]

it´s not clean but the only way i got it to work

$("#menu").bind('itemclick', function (event) {
var tabid = 'tab_' + event.args.id;
var i = 0;

if($('#workspace').find("#" + tabid).length){

$('div[id^="tab_"],li[id^="tab_"]').each( function(){
if(this.id == tabid){
index = i;
return false;
}
i++;
});

$('#workspace').jqxTabs('select', i);

}else{
$('#workspace').jqxTabs('addLast', '

' + $(event.args).text() + '

', "

data

");
}
});

[Author]

Posts