Jump to content

is this easy to do?


Woodburn2006

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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>
	";
}

?>

Link to comment
Share on other sites

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/

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.