[SOLVED] Showing appropriate contents of a php file based on what was clicked

Daniel St. Jules · August 1, 2007

Hello,

I'm new to Ajax and am attempting to implement it in a part of my website.

I've been following this tutorial in order to create a sort of tabbed browsing-based page:

http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/

Here's the page that I've been working on:

http://gamexe.net/smashbros/ssbb_characters.php

The basic CSS, PHP and HTML is all set, but of course, being new to javascript as I am, I can't get it to work as I'd like.

My Goal:

I'd like to code the page so that when a user clicks on a tab in the left menu, a PHP script is processed and two variables are accessed depending on which tab the user clicked on. These variables, $content and $content2, would then be echoed on the page. The $content variable would be echoed within the series of divs to the top, and $content would be displayed in the series of divs toward the bottom.

The Problem:

1. When clicking on a tab, the divs surrounding the content are removed. It only echoes the contents of $content. I'd like to make it so that the surrounding container as well as their backgrounds remain visible at all times, no matter the tab that was selected.

2. The script only echoes the content of $content and not $content2. Both variables are set properly, so I imagine I'm just not calling $content2 properly with javascript? Fixed this part of the problem. =)

The Code:

ssbb_characters.php

(irrelevant code removed. See http://gamexe.net/smashbros/ssbb_characters.php for exact code)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gamexe.net - Super Smash Bros Brawl - Characters</title>
<link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" />
<link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]-->
<script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script>
<script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script>

<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
	$(tabs[i].id).onclick = function () {
		getTabData(this.id);
	}
}
}
function getTabData(id) {
var url = '../smashbros/ssbb_characters_content.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('load').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('load').style.display = 'none';
$('content').innerHTML = newData;
$('content2').innerHTML = newData;
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.tabs {
width: 50px;
margin-right: 10px;
padding:4px;
cursor: pointer;
display: block;

}
#content {
clear:both;
}

#load {
display: none;
text-align: center;
padding-top: 100px;
}
</style>
</head>
<body onload="init()">

<div id="content">
<h1>Characters</h1>

<div id="ginfo1"><div id="ginfo2"><div id="ginfo3">
<div id="ginfo_left">
<div class="tabs" id="tab1">Tab 1</div>
<div class="tabs" id="tab2">Tab 2</div>
<div class="tabs" id="tab3">Tab 3</div>
<div class="tabs" id="tab4">Tab 4</div>
</div>
<div id="ginfo_right">
<div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div>

<div id="content"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />I'd like $content to be echoed right here.
</div>
</div></div></div>

<div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3">
<div id="content2"></div>
<br /><br /><br /><br /><br /><br />I'd like $content2 to be echoed right here. The contents of both variables should be dependant
on what tab the user has clicked on.
</div></div></div>
</div><!-- content -->

</body>
</html>

ssbb_characters_content.php

<?php
function stringForJavascript($in_string) {
   $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
   $str = ereg_replace('"', '\\"', $str);
   Return $str;
}
switch($_GET['id']) {
case 'tab1':
	$content = 'This is content for tab 1.';
	$content2 = 'This is secondary content for tab 1.';
	break;
case 'tab2':
	$content = 'This is content for tab 2.';
	$content2 = 'This is secondary content for tab 2.';
	break;
case 'tab3':
	$content = 'This is content for tab 3.';
	$content2 = 'This is secondary content for tab 3.';
	break;
case 'tab4':
	$content = 'This is content for tab 4.';
	$content2 = 'This is secondary content for tab 4.';
	break;
default:
	$content = 'There was an error.';
	$content2 = 'Please refresh this page.';
	break;								

} 
print stringForJavascript($content);
usleep(900000);
?>

Well, I really don't know how to solve this issue. I'm very new to Ajax as well as Javascript (I understand the basic syntax, but I don't know any of the functions, etc) so chances are that there's a much more efficient and better way of accomplishing what I'd like to do. For all I know, I could be doing this completely wrong. ^_^ " So, any help at all would be greatly appreciated.

Thanks,

Daniel St. Jules

EDIT:

I just noticed why $content2 wasn't being echoed. I forgot to call it in ssbb_characters_content.php. =P So I just added print stringForJavascript($content2); right below print stringForJavascript($content); and that works now. However, the surrounding divs are still disappearing. Any ideas on how to fix this?

Philip · August 1, 2007

I'm not really sure on how you are giving the response to AJAX, it seems like you're printing it all into one piece of text. The problem I see with that is js won't be able to tell what goes into the content box, and the secondary content box.

My way wasn't the best, but it works (until you get really big amounts of text) and I'm going to change it to apply to your setting:

Setup the response so it becomes:

(in the ssbb_characters_content.php file)

<?
...
$request_text = $content . "|||" . $content2;
print $request_text;
usleep(900000);
?>

(in the ssbb_characters.php file)

...
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
var response = newData.split("|||");
$('load').style.display = 'none';
document.getElementById('content').innerHTML = response[0];
document.getElementById('content2').innerHTML = response[1];
}
...

That will show the content inside the div ID'd content, not after the < br /> (same with content2)

<div id="content"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />I'd like $content to be echoed right here.

Daniel St. Jules · August 2, 2007

Hmm.. That didn't quite work out for me. I used the code you mentioned (unless I misplaced it?) and now it seems that the contents of $content2 aren't displayed at all, and the surrounding divs continue to disappear upon clicking the tabs.

The following is the updated code:

ssbb_characters_content.php

<?php
function stringForJavascript($in_string) {
   $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
   $str = ereg_replace('"', '\\"', $str);
   Return $str;
}
switch($_GET['id']) {
case 'tab1':
	$content = 'This is content for tab 1.';
	$content2 = 'This is secondary content for tab 1.';
	break;
case 'tab2':
	$content = 'This is content for tab 2.';
	$content2 = 'This is secondary content for tab 2.';
	break;
case 'tab3':
	$content = 'This is content for tab 3.';
	$content2 = 'This is secondary content for tab 3.';
	break;
case 'tab4':
	$content = 'This is content for tab 4.';
	$content2 = 'This is secondary content for tab 4.';
	break;
default:
	$content = 'There was an error.';
	$content2 = 'Please refresh this page.';
	break;								

} 
$request_text = $content . "|||" . $content2;
print $request_text;
usleep(900000);
?>

and ssbb_characters.php (irrelevant code removed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" />
<link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]-->
<script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script>
<script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script>

<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
	$(tabs[i].id).onclick = function () {
		getTabData(this.id);
	}
}
}
function getTabData(id) {
var url = '../smashbros/ssbb_characters_content.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('load').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
var response = newData.split("|||");
$('load').style.display = 'none';
document.getElementById('content').innerHTML = response[0];
document.getElementById('content2').innerHTML = response[1];
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.tabs {
width: 50px;
margin-right: 10px;
padding:4px;
cursor: pointer;
display: block;

}
#content {
clear:both;
}

#load {
display: none;
text-align: center;
padding-top: 100px;
}
</style>
</head>
<body onload="init()">

<div id="container">
<h1>Characters</h1>

<div id="ginfo1"><div id="ginfo2"><div id="ginfo3">
<div id="ginfo_left">
<div class="tabs" id="tab1">Tab 1</div>
<div class="tabs" id="tab2">Tab 2</div>
<div class="tabs" id="tab3">Tab 3</div>
<div class="tabs" id="tab4">Tab 4</div>
</div>
<div id="ginfo_right">
<div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div>

<div id="content"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />I'd like $content to be echoed right here.
</div>
</div></div></div>

<div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3">
<div id="content2"></div>
<br /><br /><br /><br /><br /><br />I'd like $content2 to be echoed right here. The contents of both variables should be dependant
on what tab the user has clicked on.
</div></div></div>
</div>

</body>
</html>

You can also just check out the url of the page posted above to see what I mean. I wonder if I may have done something wrong while implementing your code, or misunderstood something? Again, I'm new to javascript, so I wouldn't be surprised if I made some really baby-ish error. ^^"

Again, help with this matter would be appreciated.

Thanks.

Philip · August 2, 2007

I found the problem, but it's not in the code you have above (it seems you stripped it out). I ended up just saving your site, with full code to my HDD and played around with it. You have 2 div's with an ID of 'content'. Simply change the 2nd one (the one you want to have updated) to something like 'contentx'. Also don't forget to change the variable in the JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" />
<link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]-->
<script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script>
<script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script>

<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
	$(tabs[i].id).onclick = function () {
		getTabData(this.id);
	}
}
}
function getTabData(id) {
var url = '../smashbros/ssbb_characters_content.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('load').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
var response = newData.split("|||");
$('load').style.display = 'none';
document.getElementById('contentx').innerHTML = response[0];
document.getElementById('content2').innerHTML = response[1];
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.tabs {
width: 50px;
margin-right: 10px;
padding:4px;
cursor: pointer;
display: block;

}
#content {
clear:both;
}

#load {
display: none;
text-align: center;
padding-top: 100px;
}
</style>
</head>
<body onload="init()">

<div id="container">
<h1>Characters</h1>

<div id="ginfo1"><div id="ginfo2"><div id="ginfo3">
<div id="ginfo_left">
<div class="tabs" id="tab1">Tab 1</div>
<div class="tabs" id="tab2">Tab 2</div>
<div class="tabs" id="tab3">Tab 3</div>
<div class="tabs" id="tab4">Tab 4</div>
</div>
<div id="ginfo_right">
<div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div>

<div id="contentx"></div>
</div>
</div></div></div>

<div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3">
<div id="content2"></div>
<br /><br /><br /><br /><br /><br />I'd like $content2 to be echoed right here. The contents of both variables should be dependant
on what tab the user has clicked on.
</div></div></div>
</div>

</body>
</html>

Hope it works

Daniel St. Jules · August 2, 2007

Oops, I hadn't noticed that I had already used the id "content" in my layout. Well, I changed the value of the two ids which would be affected by js, as you said, and it work perfectly now. =)

My way wasn't the best, but it works (until you get really big amounts of text)

Curious, but how much text is too much? =P I plan on having maybe 600-1000 words between the two content divs, for each tab case. Would that cause a drastic increase in loading times, or just a slight one?

Also, my next question isn't exactly Ajax related, but I figured I'd ask here anyway.

switch($_GET['id']) {
case 'tab1':
	$content = 'This is content for tab 1.';
	$content2 = 'This is secondary content for tab 1.';
	break;
case 'tab2':
	$content = 'This is content for tab 2.';
	$content2 = 'This is secondary content for tab 2.';
	break;
case 'tab3':
	$content = 'This is content for tab 3.';
	$content2 = 'This is secondary content for tab 3.';
	break;
case 'tab4':
	$content = 'This is content for tab 4.';
	$content2 = 'This is secondary content for tab 4.';
	break;
default:
	$content = 'There was an error.';
	$content2 = 'Please refresh this page.';
	break;								

}

How would you go about validating the data submitted by $_GET to prevent things such as SQL injection? Or is it even necessary? I've always been one to use $_POST instead, so I'm really not sure about it.

Well, I appreciate the help so far. You've been a great help.

Thanks,

Daniel

Philip · August 2, 2007

That's fine.

It's upwards of kilobytes of text, like 50KB+

Have you ever cleaned variables for the post before? If not, it's something you're going to want to get into the habit of.

http://phpsec.org/projects/guide/1.html

That a good basic start & explanation on why you'll need it.

sayedsohail · August 2, 2007

I think there are two methods which are very popular used for valid post and get data in php file and its quite simple

$receviedpost1 = addslashes($_POST['name']);

IF you have 'get' replace post with get and the other method is:

$receivedpost1 = mysql_real_escape_string($_POST['name']);

moreover, its better to validate your data after performing the above, an extra precuation using regex etc. for security reasons.

best of luck.

Daniel St. Jules · August 2, 2007

Yeap, I've been validating and filtering data submitted through POST for a while now, so I've got that covered. It's just that I've never used GET before, which was why I didn't quite understand how I'd validate that.

But anyway, everything's working fine.

I greatly appreciate the help. =)

@sayedsohail: I don't see how addslashes is going to help in this case. The code only performs actions if the result of GET equals to a few particular cases.

And how exactly would I use regex to help validate content? O.o

sayedsohail · August 2, 2007

your first question just do google addslashes() you will get to know what it does. Secondly regex like not regex you can have your own patterns against preg_match to validate data received. sorry if i was not clear.

Philip · August 2, 2007

Yeah, if you have it to where it is like it is just matching with certain cases, you should be okay, but it is always best to be on the safe side.

Glad to help, don't forget to mark it solved if you think everything is running the way you want it to

Daniel St. Jules · August 2, 2007

I've used addslashes previously to prevent SQL injection, but I still don't quite understand how it would be beneficial in this case. Actually, to be more precise, I don't understand how one can completely prevent SQL injection or hacking altogether in their script if they rely on user input.

For example:

The admin uses code like this to add slashes (it's the first reference to $_POST['thing'] in the script)

$clean = addslashes($_POST['thing']);

Now, if the user submitted the following code, couldn't he "break" the function?

"urgonnabehackedlolz"); function randomfunction($string) {Make up some random function that doesn't do anything;}Now add some 'ol code that would do something completely evil $useless = randomfunction('2'

If the user submitted that, then the code would look like:

$clean = addslashes("urgonnabehackedlolz");

function randomfunction($string) {
Make up some random function that doesn't do anything;
}

Now add some 'ol code that would do something completely evil 

$useless = randomfunction('2');

The function is just created so that there isn't a parse error when the script sees the extra );

I'm not a hacker, and far from it. (I don't know anything about hacking xP) I'm just concerned on how best to protect my pages, and I don't quite understand how to do this, or if it's even truly possible. Anyone mind shedding some light on this? O.o

Also, I noticed the following function in my ssbb_characters_content.php file:

function stringForJavascript($in_string) {
   $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
   $str = ereg_replace('"', '\\"', $str);
   Return $str;
}

What exactly does this do? The function is defined at the top of the script (this was copied/pasted off the tutorial) but isn't called to at all, well, to my knowledge. It seems to me that it's used for security purposes though, although I still don't quite understand it.

Thanks for the help. And sorry about going a bit off topic. I just don't think the creation of a whole new topic would be necessary when these are all relevant to the script I'm trying to create.

-Daniel

Philip · August 2, 2007

Your forjs function, you should be able to get rid of it. After I changed the way that PHP sent back the request, it was unneeded.

And as for the string you said would break it, it comes out like this:

\"urgonnabehackedlolz\"); function randomfunction($string) {Make up some random function that doesn\'t do anything;}Now add some \'ol code that would do something completely evil $useless = randomfunction(\'2\'

Try it yourself:

<?php
if($_POST) {
$array = $_POST['data'];
echo addslashes($array);
// Please note, if you get 3 slashes, your server  
// automatically adds slashes for you
} else {
echo "<form action='".$_SERVER['PHP_SELF']."' method='post'>";
echo "<input type='text' name='data'> <- Put data in<br />";
echo "<input type='submit' name='submit'>";
echo "</form>";
}
?>

Daniel St. Jules · August 2, 2007

Ohhh, I was under the impression that when PHP would use the addslashes function, it would first replace the $variable, which the function is being used on, with its contents, and then add the slashes. I suppose I just didn't quite understand how it would be parsed. Well, that makes me feel so much safer with my website. ^^

Thanks for the help. =D

Daniel St. Jules · August 10, 2007

Well, I've encountered yet another little snag. I'm currently trying to implement LightBox2 in this page:

http://gamexe.net/smashbros/ssbb_characters.php

and I seem to be doing something wrong yet again.

The Problem

Although LightBox works when the page is showing the default content (click on More screenshots! when going to http://gamexe.net/smashbros/ssbb_characters.php to see what I mean), when I click on a tab in the left menu and try to view screenshots, the rel="lightbox[ssbb]" no longer uses the lightbox function to work its magic. (The More Screenshots link at the bottom of the Fox tab is the only other link that uses lightbox) To view the error, try clicking on Fox, and then the More Screenshots! link at the bottom of the container. It's like the content, after Ajax has been used to display it, doesn't have access to the javascript code in my header. =/

The code (unimportant information has been removed)

ssbb_characters.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" />
<link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie6.css" /><![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]-->
<script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script>
<script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script>

<script type="text/javascript" src="http://www.gamexe.net/layout5/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.gamexe.net/layout5/lightbox.js"></script>
<link rel="stylesheet" href="http://www.gamexe.net/layout5/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
	$(tabs[i].id).onclick = function () {
		getTabData(this.id);
	}
}
}
function getTabData(id) {
var url = '../smashbros/ssbb_characters_content.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('load').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
var response = newData.split("|||");
$('load').style.display = 'none';
document.getElementById('gcontent').innerHTML = response[0];
document.getElementById('gcontent2').innerHTML = response[1];
}
</script>
</head>
<body onload="init()">

<div id="container">
<div id="content"><h1>Characters</h1>

<div id="ginfo1"><div id="ginfo2"><div id="ginfo3">
<div id="ginfo_right">
<div style="padding: 0 10px;">
<div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div>
<div id="gcontent">
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot1.jpg" rel="lightbox[ssbb]">More Screenshots!</a><br />
	<div id="lightbox_preload">
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot2.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot3.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot4.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot5.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot6.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot7.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot8.jpg" rel="lightbox[ssbb]"></a>
	</div>
Welcome to Gamexe.net's Super Smash Bros Brawl Character list. This page is dedicated to bringing you up-to-date information on 
all the Brawl characters announced and confirmed. As the game approaches release, more information will be added. Upon release,
expect to find training videos and more for all your favourite Smash Bros characters.<br /><br />
Now, to start viewing, please click on the name of one of the characters in the left navigation.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>
</div>
<div id="ginfo_left">
<div class="tabs" id="tab1">Bowser</div>
<div class="tabs" id="tab2">Donkey Kong</div>
<div class="tabs" id="tab3">Fox</div>
<div class="tabs" id="tab4">Ike</div>
<div class="tabs" id="tab5">Link</div>
<div class="tabs" id="tab6">Mario</div>
<div class="tabs" id="tab7">Peach</div>
<div class="tabs" id="tab8">Pit</div>
<div class="tabs" id="tab9">Samus</div>
<div class="tabs" id="tab10">Snake</div>
<div class="tabs" id="tab11">Wario</div>
<div class="tabs" id="tab12">Yoshi</div>
<div class="tabs" id="tab13">Zelda</div>

<div class="tabs" id="tab14">Zero Suit Samus</div>
</div>
</div></div></div>

<div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3">
<div id="gcontent2" align="center"><br /><br /></div>
</div></div></div>

</div><!-- content -->
</div><!-- wrapper -->

</body>
</html>

ssbb_characters_content.php:

<?php

$tabid = addslashes($_GET['id']);

switch($tabid) {
case 'tab1':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab2':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab3':
	$gcontent = '
	<div align="center"><img src="http://www.gamexe.net/layout5/veteran.gif" alt="Veteran!" /></div><br />
	<b>Name:</b> Fox<br />
	<b>Quick-Bio:</b>
	<br /><br /><br />
	<img src="http://www.gamexe.net/smashbros/ssbb/fox/fox.jpg" alt="" />
	';
	$gcontent2 = '<h4>Final Smash</h4><br />
	<h4>Screenshots</h4>
	<div style="width: 394px;">
	<div class="spacer"> </div>
	<div class="ginfo_screen">
	<img src="http://www.gamexe.net/smashbros/ssbb/fox/screen1.jpg" alt="screenshot" /><br />
	It\'s over 9000!
	</div>
	<div class="ginfo_screen">
	<img src="http://www.gamexe.net/smashbros/ssbb/fox/screen2.jpg" alt="screenshot" /><br />
	Head to head combat: redefined
	</div>
	<div class="ginfo_screen">
	<img src="http://www.gamexe.net/smashbros/ssbb/fox/screen3.jpg" alt="screenshot" /><br />
	EXTREME staring contest
	</div>
	<div class="ginfo_screen">
	<img src="http://www.gamexe.net/smashbros/ssbb/fox/screen4.jpg" alt="screenshot" /><br />
	Has anyone seen my gun?
	</div>
	<div class="spacer"> </div>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot1.jpg" rel="lightbox[ssbb]">More Screenshots!</a>
	</div>
	<div id="lightbox_preload">
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot2.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot3.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot4.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot5.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot6.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot7.jpg" rel="lightbox[ssbb]"></a>
	<a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot8.jpg" rel="lightbox[ssbb]"></a>
	</div>';
	break;

case 'tab4':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab5':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab6':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab7':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab8':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab9':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab10':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab11':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab12':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab13':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab14':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab15':
	$gcontent = '';
	$gcontent2 = '';
	break;

case 'tab16':
	$gcontent = '';
	$gcontent2 = '';
	break;

default:
	$gcontent = 'There was an error.';
	$gcontent2 = 'Please refresh this page.';
	break;								

} 
$request_text = $gcontent . "|||" . $gcontent2;
print $request_text;
usleep(900000);
?>

The CSS file for LightBox 2 has been slightly modified, but only barely, and it still wasn't working as intended before I made the changes. As for the JS files, they were copy-pasted.

I know I'm a bit out of my league here, but I find that I only learn through trial and error. I just seems that while learning Ajax and javascript, it's been mostly error. ^^ Help with this issue would be greatly appreciated.

Thank you,

Daniel

Sign In

[SOLVED] Showing appropriate contents of a php file based on what was clicked

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information