AJAX tabs v2.2 - Dynamically Adding a Tab

Hi everyone,

I am experimenting with the AJAX tabs v2.2 script found on the site (http://www.dynamicdrive.com/dynamici...axtabscontent/) however I am unsure how to add a new tab dynamically. Is this even a possibility with this script, and if so, how can I do it?

Thanks in advance!

What do you mean exactly by 'add a new tab dynamically'?

Quote:

---

Originally Posted by molendijk

What do you mean exactly by 'add a new tab dynamically'?

---

So, I have an AJAX function that checks a database for certain responses. If it detects a response, for example "true:12345", then I need to be able to add a new tab called "12345" and access the content inside.

I have the AJAX part all settled and able to retrieve the responses, that I'm not having the issue with. The issue I'm having is the generation of a new tab that is clickable/viewable.

I doubt if the AJAX tabs v2.2 script can be used for what you want. But you can make your own script. Try to eperiment with the following:

Code:

---

<script>
/* Emulation of the responses */
var responses = ['12345', '12346', '12347']
</script>

<div id="ifr_container"></div>

<iframe id="the_ifr" style="display: block; vertical-align: top; width: 500px; max-width: 100%; height: 30vh; margin: auto" src="about:blank"></iframe>

<script>
function add_tabs(tab_content, ifr_location)
{
var add_tab=document.createElement('span');

add_tab.innerHTML='<a href="javascript: void(0)" onclick="document.getElementById(&quot;the_ifr&quot;).src=&quot;'+ifr_location+'&quot;">'+tab_content+'</a>' ;

document.getElementById('ifr_container').appendChild(add_tab);
}
var i;
for (i = 0; i < responses.length; i++) {
if(responses[i]=='12345'){add_tabs('12345 ', 'external1.htm')}
if(responses[i]=='12346'){add_tabs('12346 ', 'external2.htm')}
if(responses[i]=='12347'){add_tabs('12347 ', 'external3.htm')}
}
</script>

---

Quote:

---

Originally Posted by molendijk

I doubt if the AJAX tabs v2.2 script can be used for what you want. But you can make your own script. Try to eperiment with the following:

Code:

---

<script>
/* Emulation of the responses */
var responses = ['12345', '12346', '12347']
</script>

<div id="ifr_container"></div>

<iframe id="the_ifr" style="display: block; vertical-align: top; width: 500px; max-width: 100%; height: 30vh; margin: auto" src="about:blank"></iframe>

<script>
function add_tabs(tab_content, ifr_location)
{
var add_tab=document.createElement('span');

add_tab.innerHTML='<a href="javascript: void(0)" onclick="document.getElementById("the_ifr").src="'+ifr_location+'"">'+tab_content+'</a>' ;

document.getElementById('ifr_container').appendChild(add_tab);
}
var i;
for (i = 0; i < responses.length; i++) {
if(responses[i]=='12345'){add_tabs('12345 ', 'external1.htm')}
if(responses[i]=='12346'){add_tabs('12346 ', 'external2.htm')}
if(responses[i]=='12347'){add_tabs('12347 ', 'external3.htm')}
}
</script>

---

---

I figured out what I needed to do, now I just got to figure out tab style customization. What needs to be done is whenever a tab is added/removed (code below), the tabs need to be reinitialized. Here's the (very ugly) code I'm using:

Code:

---

                        function addTab() {
                                var node = document.createElement("LI");
                                var newlink = document.createElement('a');
                                newlink.setAttribute('href', '#');
                                newlink.setAttribute('rel', 'tcontent5');
                                var textnode = document.createTextNode("New Tab 1");
                                newlink.appendChild(textnode);
                                node.appendChild(newlink);
                                document.getElementById("flowertabs").appendChild(node);
                               
                                var newChatFrame = document.createElement("div");
                                newChatFrame.setAttribute('class', 'tabcontent');
                                newChatFrame.setAttribute('id', 'tcontent5');
                                newChatFrame.innerHTML = "Tab content 5 here<br />Tab content 5 here<br />";
                               
                                document.getElementById("contents").appendChild(newChatFrame);
                               
                                var myflowers=new ddtabcontent("flowertabs")
                                myflowers.setpersist(false)
                                myflowers.setselectedClassTarget("link") //"link" or "linkparent"
                                myflowers.init()
                        }
                       
                        function closeTabDynamic(id) {
                                var element = document.getElementById(id);
                                element.parentNode.removeChild(element);
                                var element = document.getElementById("tab-" + id);
                                element.parentNode.removeChild(element);
                                                                var myflowers=new ddtabcontent("flowertabs")
                                myflowers.setpersist(false)
                                myflowers.setselectedClassTarget("link") //"link" or "linkparent"
                                myflowers.init()
                        }

---