is this easy to do?

[Woodburn2006]

i am creating a site for a local band and am very new to ajax. what i was wondering is would it be easy to create the following page using ajax? so that when you click 'view gear' it just changes the bit below the select box and not the whole page. if so are there any good tutorials out there that are similar to what i want to do?

 

http://www.ontherocks.me.uk/index2.php?go=gear&member=ben

 

thanks

[solon]

its easy enough. you can do it using javascript alone if you want without ajax. You only need an event on your button that will trigger a javascript function that would do the following:

 

lets say you have the information that are shown by default in a <div>.

 

that would be :

 

<div id='content'>
//your text here
</div>

 

the javascript function should be like:

 

<script type='text/javascript'>
function show(x)
{
    if (x = 'Guitars')
    {
        document.getElementById("content").innerHTML = "the html content you want to show for guitars";
    }
    else if (x = 'Effects')
    {
        document.getElementById("content").innerHTML = "the html content you want to show for effects";
    }

//and so on...
}
</script>

 

the function should be called like :

<select id= 'select' onchange='show(this.value)'>
<option></option>
.
.
.
.
.
<option></option>
</select>

 

or 

 

<button value='Show' onclick='show(document.getElementById("select").value)'>

 

if you need anything else please ask

[JonnoTheDev]

This is a bad idea. If you use ajax then a search engine cannot read the information on the page. You should create these as dynamic pages.

i.e. http://www.ontherocks.me.uk/index2.php?go=gear&member=ben&gear_id=1

 

Use a mod rewrite to make the pages search engine friendly i.e.

http://www.ontherocks.me.uk/gear/ben/1

 

Place the URLs in a sitemap so Google can spider the pages. I'm guessing you want search engine rankings!

[Woodburn2006]

how do you do mod re-writes then?

 

im just acting upon what the guy has asked me to do, i will be contructing a site map when the site is complete to get rating

[JonnoTheDev]

http://www.sitepoint.com/article/guide-url-rewriting/

[Woodburn2006]

also, how would i do the above if the info is being pulled from a DB?

[Woodburn2006]

i have tried doing the page the way you have shown using javascript but i cannot get it to work. should this code do the trick?

 

<script type='text/javascript'>
function show(x)
{
    if (x = 'Guitars')
    {
        document.getElementById("gear_inner").innerHTML = "the html content you want to show for guitars";
    }
    else if (x = 'Effects')
    {
        document.getElementById("gear_inner").innerHTML = "the html content you want to show for effects";
    }

//and so on...
}
</script>
<?
$member = ((isset($_GET['member']))?($_GET['member'])''));
if($member!=""){

	$query_member = "SELECT role FROM site_gear WHERE member = '$member' LIMIT 1";     
    	$result_member = mysql_query($query_member, $connection);   
	$row_member = mysql_fetch_array($result_member);
	extract($row_member);

	$div = "content_gear_".$member;

	$query_menu = "SELECT id,heading FROM site_gear WHERE member = '$member'";     
    	$result_menu = mysql_query($query_menu, $connection);   

	$div = "content_gear_".$member;
	echo"<div id='$div'><div id='gear_1'>
			<h1>$member - $role</h1>
			<hr width='100%' color='#4885c6' />";
	echo"<form id='form1' method='post' action='?go=gear&member=$member'>
  				<select id= 'gear_select' onchange='show(this.value)'>";

	while ($row_menu = mysql_fetch_array($result_menu)) {
		extract($row_menu);
		echo"<option value='$id'>$heading</option>";
	}

	echo"</select>
		</form>
		<div id='gear_inner'>
		<ul>";

	if ($_SERVER['REQUEST_METHOD'] == "POST") {
		$id = $_POST["gear_menu"];
		$query_gear = "SELECT heading,content FROM site_gear WHERE id = '$id'";
	}else{
		$query_gear = "SELECT heading,content FROM site_gear WHERE member = '$member' LIMIT 1";
	}
	     
    	$result_gear = mysql_query($query_gear, $connection);
	$row_gear = mysql_fetch_array($result_gear);
	extract($row_gear);
	echo $content;

	echo"</ul></div></div></div>";

}else{

	echo"
		<div id='content_gear'>
			<div id='gear_heading'>
				Band Gear<hr width='100%' color='#4885c6' />
			</div>
			<div id='gear'>
				<br />
						<a href='index2.php?go=construction'>Andy Teague - Bass/Vocals</a><br /><br />
						<a href='index2.php?go=construction'>Ben Smith - Guitar/Vocals</a><br /><br />
						<a href='index2.php?go=construction'>Lee Munkton - Drums</a><br />
			</div>
		</div>
	";
}

?>

[RichardRotterdam]

This is a bad idea. If you use ajax then a search engine cannot read the information on the page. You should create these as dynamic pages.

I agree on the ajax part. However I don't think you need seperate dynamic pages either. Why don't you simply use hidden divs that shows one div at a time? Also wouldn't it be handier to use tabs instead of the pulldown? That way you simply use one click to show the desired content. Besides having one action less to deal with you know directly what a certain action does. On your page you only know what content is "hidden" after you have clicked the pulldown.

 

Here is a link of what I mean:

http://www.stilbuero.de/jquery/tabs_3/

 

[Woodburn2006]

ok sounds good but im new to all of this, i can do php sql html etc but javascript is a new one for me. do you know of any tutorials i can look at to do this as i like to learn it and simply not copy code and not understand it, thanks

[RichardRotterdam]

If you really want to go in depth with this I suggest you learn about DOM(Document Object Model).

w3c schools has some tutorials about that

http://www.w3schools.com/htmldom/default.asp

 

After knowing the basics of javascript and DOM you might wanna grab yourself a js framework such as mootools, jQuery, Prototype etc since it makes that stuff a hell lot easier

[Woodburn2006]

ok cool thanks, well i have just brought a book on ajax and javascript which covers with using it alongside php etc and covers dom so will give that a read and see what i get out of it