Results 1 to 5 of 5

Thread: AJAX tabs v2.2 - Dynamically Adding a Tab

  1. #1
    Join Date
    Jul 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

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

  3. #3
    Join Date
    Jul 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by molendijk View Post
    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.
    Last edited by kymcisaac; 07-24-2019 at 04:40 AM.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    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>

  5. #5
    Join Date
    Jul 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by molendijk View Post
    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()
    			}

Similar Threads

  1. Adding controls dynamically
    By SwaroopKumar in forum HTML
    Replies: 10
    Last Post: 04-30-2009, 08:42 AM
  2. Dynamically adding a div.
    By Bob90 in forum JavaScript
    Replies: 6
    Last Post: 04-12-2007, 12:31 AM
  3. Ajax Tabs Content Script - Dynamically Selecting Tabs
    By wence in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-04-2007, 01:47 AM
  4. Dynamically adding extention
    By deadlyromio in forum JavaScript
    Replies: 4
    Last Post: 10-05-2006, 07:00 PM
  5. Adding content dynamically
    By edgeofcliff in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-21-2006, 04:47 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •