AJAX tabs v2.2 - Dynamically Adding a Tab

[kymcisaac]

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!

[molendijk]

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

[kymcisaac]

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.

[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:

<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>

[kymcisaac]

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:

<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:

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