Loading Tabs Dynamically

[jbpdParticipant]

I’m working on a chat application.
I’m going to grabbing a json object before I load anything so that I can call that to load my tabs/content/other listboxes and then just assign the tabs/other content’s source to the already obtained json object. I don’t see any examples or documentation on how to accomplish this. Just examples on how to load based on another json call after you bind it to a specific tab’s click. At this current moment, I want to load everything at once instead of adding tabs. Also, since I am refreshing the entire data every 2 seconds or so, everything needs to be as performance based as possible. So I’d prefer there be no interating through anything, just a source = data[‘chatrooms’] and it refreshes as need or something similar to that.

1. Load all chat data (all rooms, posts, users, etc)
2. Set the source of each object to be the already obtained data’s source

Thanks, Jeremy

[Peter StoevKeymaster]

Hi Jeremy,

There are 2 approaches for adding data dynamically:

1. Use the jqxTabs ‘setContentAt’ function which accepts 2 params – index and html string.
2. Select a Tabs content DIV tag with jQuery and call the append method to append the content. To remove the old content, you can Select a content DIV tag and clear its children collection.

If you have this Tabs structure:

<div id='jqxTabs'>
    <ul>
        <li style="margin-left: 30px;">Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div id="1">
    </div>
    <div id="2">
    </div>
</div>

You can add content by doing this:

$("#1").append("<input/>");
$("#2").append("<input/>");
$("#2").append("<input type='button' value='button'/>");

To remove content, you can do this:

 $("#1").children().remove();

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pkParticipant]

Just wanted to add that on the above example, if you wish to clear the div “jqxTabs” and recreate it from scratch, you have to add the following line:
$("#jqxTabs").removeData().empty();
Otherwise, the tabs will persist, even if you remove the “ul” and add a new one.

[jbpdParticipant]

That works as good. I had created a parent div and then on refresh, just recreated the div that housed the tabs. It was doing the same basic thing, but I like your example much better. Thanks, Jeremy

I wish the documentation would have had this…the documentation leaves a lot to be desired.

[Author]

Posts