Load tab content AFTER clicking on tab

This site is best viewed in a modern browser with JavaScript enabled.

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/how-to-create-tab-with-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.

tabbed_ajax_thing.zip

1kB

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

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.

Christophe27

Ok, I'll do what you suggested. Thank you!

Christophe27

Hi,

I have a small problem with the script.

When I include an upload php-script in one of the ajax tabs, the script won't work. I can upload images but the uploaded image isn't written to the server, nor an error is showing. The page simply loads again with a fresh upload form.

The php script works perfectly on a normal page.

Also when providing a link in a tab to another tab (for example domain.com/#2) the url changes, but the second tab won't load. When loading domain.com/#2 directly in the browser (copy/paste) it does work.

... any suggestions? Normally this must work, isn't it?

Best,
Christophe

mitya

I don't understand the problem. Please elaborate or demonstrate.

Christophe27

Hi mitya,

Here is an example on a test domain where I include a photo upload script in an ajax tab: Example 1

When uploading a photo you see nothing happens. No error messages, or success messages, nor is the photo written to the destination directory.

Here is a direct link to the photo upload file I include: Example 2

As you notice, the script itself works perfectly.

Also when I provide a link to another tab in one of the tabs, the url changes but the tab won't change as you can see in the example below:

Example 3

But when clicking the exact same link with Ctrl, the correct tab opens (in a new browsertab of course)

Any suggestions ...

Best,
Christophe

mitya

You have no action property set in your form. In such cases, the form merely calls itself again.

Therefore, it works with your include method, because the include file has the necessary code to handle the upload.

But in the ajax tab page, there is no code to handle the upload. Think about it; the form calls the ajax tabs page, and that has no PHP on it to process your upload.

You probably want it to forward the upload via ajax to the php page, but this isn't possible - ajax doesn't do file uploads.

I hope the above is understandable. The reason is very simple but hard to explain.