www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: Load tab content AFTER clicking on tab

  1. #1
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319

    Load tab content AFTER clicking on tab

    Hi,

    I'm new to JavaScript and hope somebody can help me with the following.

    I'd like to create some tabs with one active tab. Now the problem is I don't want to load all tabs at once, but only load the content of the active tab, the first tab by default and the content of the other tabs stored in a database.

    I thought this would be possible with JavaScript and/or Ajax (however I'm new to this matter) but I only can find tutorials where all content of all tabs is loaded at once like the following:

    http://www.developnew.com/resources/...javascript.php

    I hope somebody understand what I mean and can help me with this.

    Thanks in advance!

    Christophe

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    Happy new year. Here you go - wrote you a simple example.

    CSS:
    Code:
    #tabs { margin: 0; padding: 0; height: 0; }
    	#tabs li { float: left; background: #666; list-style: none; padding: 6px 10px; color: #fff; margin-right: 1px; cursor: hand; }
    	#tabs li:hover { background: #888; }
    	#tabs li.on, #tabs li.on:hover { background: #f90; color: #fff; cursor: default; }
    #tabsUnder { background: #f90; width: 300px; height: 300px; clear: both; padding: 30px; }
    JS:
    Code:
    function startAjax() { //appropriate to browser being used
        var xmlHttpObj;
        if (window.XMLHttpRequest)
        xmlHttpObj = new XMLHttpRequest();
        else {
            try { xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP"); }
            catch (e) {
                try { xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP"); }
                catch (e) { xmlHttpObj = false; }
            }
        }
        return xmlHttpObj;
    }
    gateway = startAjax();
    
    function getTabContent(tabNum, afterAjaxResponse) {
    	if (!afterAjaxResponse) {
    	    if (!gateway) {
    	    	alert('Your browser does not support XMLHTTP');
    	    	return;
    	    } else {
    	        gateway.open('GET', 'getTabContent.php?tabNum='+tabNum, true);
    	        gateway.onreadystatechange = function() { getTabContent(null, true); }
    	        gateway.send(null);
    	    }
    	} else if (gateway.readyState == 4 && gateway.status == 200) {
    		document.getElementById('tabsUnder').innerHTML = gateway.responseText;
    	}
    }
    
    window.onload = function() {
    	
    	getTabContent(1);
    	
    	var tabsHouser = document.getElementById('tabs');
    	var tabs = tabsHouser.getElementsByTagName('li');
    	tabsHouser.onclick = function(e) {
    		var clickedElement = e ? e.target : window.event.srcElement;
    		if (clickedElement.id.match(/^tab\d{1}$/)) {
    			var clickedTabNum = clickedElement.id.substr(clickedElement.id.length-1, 1);
    			for(var k=0; k<tabs.length; k++) tabs[k].className = '';
    			clickedElement.className = 'on';
    			getTabContent(clickedTabNum);
    		}
    	}
    	
    }
    HTML:
    HTML Code:
    <ul id="tabs">
    	<li class='on' id='tab1'>tab1</li>
    	<li id='tab2'>tab2</li>
    	<li id='tab3'>tab3</li>
    	<li id='tab4'>tab4</li>
    	<li id='tab5'>tab5</li>
    </ul>
    <div id="tabsUnder"></div>
    ...then to demonstrate the example create a PHP file, in the same folder as the file containing the above, with the following:

    PHP Code:
    switch($_GET['tabNum']) {
        case 
    1: echo "this is the content for the <b>first</b> tab"; break;
        case 
    2: echo "this is the content for the <b>second</b> tab"; break;
        case 
    3: echo "this is the content for the <b>third</b> tab"; break;
        case 
    4: echo "this is the content for the <b>fourth</b> tab"; break;
        case 
    5: echo "this is the content for the <b>fifth</b> tab"; break;

    Tested: Opera 10.1, FF3, IE8

  3. #3
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Happy Newyear indeed

    I'll try it immediately. Thank you!

  4. #4
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    The attached file might save you some time. Just unzip it to a folder in your localhost and run test.php.
    Attached Files Attached Files

  5. #5
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    p.s. I forgot to say JS expects the PHP file to be called getTabContent.php

  6. #6
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Yes, I just found out. I'm checking it further out! Thx!

  7. #7
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319

    Talking

    And it works! Very happy here!

    So now I can use the php file to get some stuff out of the database each tab...?

    Thank you very much!

  8. #8
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Just ordered a JavaScript book 'JavaScript - The good parts'. This book is recommanded to me by somebody.

    If you know any more good javascript or ajax books, please tell me!

    Thx!

    Christophe

  9. #9
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    Depends on your level. I have Douglas Crockford's Javascript: The Complete Guide, but it's not for beginners; it's hundreds of pages and covers some advanced topics in-depth.

    You really don't need a whole book on Ajax. I made that mistake; whilst there is more to Ajax than just loading and retrieving stuff with XMLHTTP, you won't use it much. Any good Javascript book will teach you Ajax, anyway.

    To modify the PHP script to return DB content, you just need to replace my "echo" statements with mysql functions. I assume you know enough PHP to do this.

    If not, see www.php.net/mysqli

  10. #10
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Hi mitya,

    Again, thx for the code.

    There is just one problem though. The tabs I'm about to use are quite large so they take a lot of the webpage.

    Is there a possibility the URL structure changes when clicking another tab? The reason is people probably would like to point to a particular tab. When using the current code they always have to point to the default tab.

    Is this possible in JavaScript or ... ?

    Thank you for your kind reply!

    Best,
    Christophe

  11. #11
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    Possible in JS, easier in PHP.

    Change

    Code:
    getTabContent(1);
    to

    Code:
    var startingOnTab = <?php echo !@is_numeric($_GET['tabNum']) ? 1 : $_GET['tabNum']; ?>;
    document.getElementById('tab'+startingOnTab).className = 'on';
    getTabContent(startingOnTab);
    And remove class='on' from the first tab's <li> tag.

    Then, you can stipulate in the URL which tab should start as on via test.php?tabNum=3. If tabNum is not passed in the URL, or it's not numeric, the first tab will be on by default. Make sense?

  12. #12
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Hi,

    Thank you again!

    I have changed the code and removed the class='on' as you suggested.

    When surfing the tabs the URL structure don't change. So when I'm clicking on the third tab, the URL is still domain.com/test.php instead of domain.com/test.php?tabNum=3

    However when I enter domain.com/test.php?tabNum=3 immediately in the browser the third tab opens, but it is unlikely visitors will do this manually.

    Do you understand where I heading to?

    Best from Belgium,
    Christophe

  13. #13
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    Yes, that's what I intended. I didn't realise you wanted the URL to change on each click. In that case, there's no reason to use Ajax - might as well just use conventional loading.

    Alas, you can't artificially change a URL - you have to actually go to the page. The only way of changing the URL in the address bar without loading a new page is to append an anchor (#).

    You could change the code from my last post to read an anchor, instead of a variable named ?tabNum.

    Replace the 3 lines I gave you in my last post with:

    Code:
    var startingOnTab = location.href.indexOf('#') == -1 ? 1 : location.href.substr(location.href.indexOf('#')+1, 1);
    document.getElementById('tab'+startingOnTab).className = 'on';
    getTabContent(startingOnTab);
    and add the following line ABOVE the line that begins for(var k=0; k<...

    Code:
    location.href = '<?php echo basename($_SERVER['REQUEST_URI']); ?>#'+clickedTabNum;
    Last edited by mitya; 01-09-2010 at 05:26 PM.

  14. #14
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    And it works!

    Waw, thank you very much!

    Do you think I can use .htaccess to change #4 to (for example) /pictures? I believe that would be possible, isn't it?

    Best,
    Christophe

  15. #15
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    I guess so but you'd have to change my code to detect /pictures or whatever, then interpret that as a tab number.

    But this would cause you problems because you want the URL to change on each click, without loading a new page. The only way to do this is with anchors (#). If you change the URL from /pictures to, say, /videos, you will change page and it will reload.

    Why not use a system of named anchors instead, so not #1, #2 etc but #pictures, #videos etc.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles