Load tab content AFTER clicking on tab

[Christophe27]

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

[mitya]

Happy new year. Here you go - wrote you a simple example.

CSS:

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

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:

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

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

[Christophe27]

Happy Newyear indeed

I'll try it immediately. Thank you!

[mitya]

The attached file might save you some time. Just unzip it to a folder in your localhost and run test.php.

[mitya]

p.s. I forgot to say JS expects the PHP file to be called getTabContent.php

[Christophe27]

Yes, I just found out. I'm checking it further out! Thx!

[Christophe27]

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!

[Christophe27]

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

[mitya]

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

[Christophe27]

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

[mitya]

Possible in JS, easier in PHP.

Change

getTabContent(1);

to

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?

[Christophe27]

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

[mitya]

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:

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

location.href = '<?php echo basename($_SERVER['REQUEST_URI']); ?>#'+clickedTabNum;

[Christophe27]

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

[mitya]

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.