Woodburn2006 Posted April 23, 2009 Share Posted April 23, 2009 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 Quote Link to comment Share on other sites More sharing options...
solon Posted April 24, 2009 Share Posted April 24, 2009 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 Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted April 24, 2009 Share Posted April 24, 2009 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! Quote Link to comment Share on other sites More sharing options...
Woodburn2006 Posted April 24, 2009 Author Share Posted April 24, 2009 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 Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted April 24, 2009 Share Posted April 24, 2009 http://www.sitepoint.com/article/guide-url-rewriting/ Quote Link to comment Share on other sites More sharing options...
Woodburn2006 Posted April 24, 2009 Author Share Posted April 24, 2009 also, how would i do the above if the info is being pulled from a DB? Quote Link to comment Share on other sites More sharing options...
Woodburn2006 Posted April 27, 2009 Author Share Posted April 27, 2009 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> "; } ?> Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted April 28, 2009 Share Posted April 28, 2009 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/ Quote Link to comment Share on other sites More sharing options...
Woodburn2006 Posted April 28, 2009 Author Share Posted April 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted April 28, 2009 Share Posted April 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
Woodburn2006 Posted April 28, 2009 Author Share Posted April 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.