PDA

View Full Version : AJAX tabs v2.2 - Dynamically Adding a Tab



kymcisaac
07-22-2019, 01:10 AM
Hi everyone,

I am experimenting with the AJAX tabs v2.2 script found on the site (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/) 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
07-23-2019, 02:33 PM
What do you mean exactly by 'add a new tab dynamically'?

kymcisaac
07-24-2019, 12:01 AM
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
07-24-2019, 01:45 PM
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
07-27-2019, 03:29 AM
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()
}