Hi. Do you guys know how I can make one of those AJAX scripts that lets the user load some content without actually requesting another page? Basically I have a div box with 2 buttons on top. I want the content in the div box to change dynamically when I click one of the two buttons on top. I've found 1 or 2 scripts that do this, but they are very complex and difficult to customize. If any of you have a simple version I'd appreciate it. Cheers!
What's the content of each box, ajax may not be necessary, if the content is static it can be done without using any ajax, it's not a good idea to use it for the sake of it....
you could try this tutorial : http://www.dhtmlgoodies.com/index.html?whichScript=ajax-dynamic-content Also contains a demo.
I have already downloaded that one, but the files in the zip file provided by them don't work from the very beginning..
Setup 3 divs. One is your 'container' and the other two are the texts that will be swapped and inserted, given ids of 'swap1' and 'swap2'. The two swap divs should be display:none in the css. Make a link like (a href="javascript:void(0);" onclick="document.getElementById('container').innerHTML = document.getElementById('swap1').innerHTML;") Display number 1 (/a) and the second (a href="javascript:void(0);" onclick="document.getElementById('container').innerHTML = document.getElementById('swap2').innerHTML;") Display number 2 (/a) That is it... swap the innerHTML between the DIVs.
Okay, so I put this together, hopefully, it's simple enough to understand, this is using Ajax and a dynamic php processor to get content or whatever, there are two examples, a forms example, and a content example .... hopefully it's useful to you : Filename : index.html ( or php doesn't matter ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ajax Usage Example</title> <!-- This next part is javascript, you can put this in a seperate file, or not, it's up to you --> <script language="javascript"> function processAjax(ElementId, AjaxProcess, Input) { xmlHttp=GetXmlHttpObject() // Create xmlHTTP Object /** * This switch controls what the xmlHTTP object is doing * it's probably not needed for your use, but it's not a * bad way of doing things, so take note of how it works **/ switch(AjaxProcess) { // Begin : switch(AjaxProcess); /** * Form Process **/ case 'FormsExample': var url="AjaxProcess.php" // Begin to build the url to the proccessing script url=url+"?process=forms&name="+ encodeURI( document.getElementById(Input).value ) url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=StateChangedForms // Discover state changes break; /** * Content Process **/ case 'ContentExample': var url="AjaxProcess.php" // Begin to build the url to the proccessing script url=url+"?process=content&input="+Input url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=StateChangedContent // Discover state changes break; } // End : switch(AjaxProcess); xmlHttp.open("GET",url,true) // Open object at the url specified xmlHttp.send(null) // Send the AJAX request } /** * Detecting if a state has changed ( FORMS EXAMPLE ) **/ function StateChangedForms() { //document.write(ElementId); if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById('exampleForm').innerHTML=xmlHttp.responseText } } /** * Detecting if a state has changed ( CONTENT EXAMPLE ) **/ function StateChangedContent() { //document.write(ElementId); if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById('exampleContent').innerHTML=xmlHttp.responseText } } /** * This function calls an xmlHTTP object for use to do whatever.... **/ function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp } </script> </head> <body> <h2>Forms usage</h2> Enter your name in the box, if your name is joe, you'll be congragtulated : <!-- You'll notice in the form below there is an id tag, this is needed on most elements --> <input type="text" id="name" onkeyup="javascript: processAjax('examlpeForm', 'FormsExample', 'name');" name="name" /> <br /> <span id="exampleForm"></span> <h2>Content Usage</h2> <div > Click the links below to swap dynamic content<br /> <a href="javascript: processAjax('exampleContent', 'ContentExample', 1);">Show Content 1</a> <a href="javascript: processAjax('exampleContent', 'ContentExample', 2);">Show Content 2</a></div> <span id="exampleContent"></span> </body> </html> Code (markup): Filename : AjaxProcess.php ( exactly like that, unless you change the exampe ) <? switch ($_GET['process']) { case "forms": if ( strlen($_GET['name']) > 2 ) { if ($_GET['name'] == "Joe" || $_GET['name'] == "joe") { $responseText = "Yay, congratulations, you're me"; } else { $responseText = "You'll never be me "; } } break; case "content": switch($_GET['input']) { case 1: $responseText = "Content 1 I could be anything"; break; case 2: $responseText = "Content 2 I could be anything"; break; } break; } echo $responseText; ?> PHP: Put both files in same folder to see how it works.... The above php code is NOT secure, neither is it meant to be, it's supposed to be simple, any of it is easily replaced by sql statements or whatever, any questions, ask Have a good day..... EDIT : I just read your reply, gimme a few minutes, hopefully itll be usefull to someone one day EDIT AGAIN : Actually, I'm a little confused, which button is supposed to do what ?
Tried that out and it doesn't work. Here's what's wrong: 1. when the page loads both 'swap1' and 'swap2' are shown 2. when displaying only 'swap1', if you click 'display link 2' it does nothing. Thanks for you effort..
how about <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="http://imbatabil.ro/base.css" rel="stylesheet" type="text/css" /> <script language="javascript"> function Show1() { document.getElementById('content1').style.display = ""; document.getElementById('content2').style.display = "none"; document.getElementById('controls').innerHTML = '<a href="javascript: Show2();">Show 2</a>'; } function Show2() { document.getElementById('content2').style.display = ""; document.getElementById('content1').style.display = "none"; document.getElementById('controls').innerHTML = '<a href="javascript: Show1();">Show 1</a>'; } window.onload=function() { document.getElementById('content2').style.display = "none"; } </script> </head> <body> <table> <tr> <td width="53%" valign="top" align="left" style="display:block;margin-left:5px;font-family:'Trebuchet MS';color:#000000;"><div class="zero"><img src="http://imbatabil.ro/btns_landing.jpg" border="0" usemap="#Map" /></div> <div class="zero" style="width:384px;height:230px;background:url(http://imbatabil.ro/bg_landing_small.jpg);"> <!--// begin content1 //--> <div id="content1" style="display:block;"> <div class="underline"> 01. SPECIFICATII MP3 PLAYER CX112</div> <table cellpadding="1" cellspacing="1" border="0" class="tabel"> <tr style="background-color:#DDDDDD;"> <td width="44%" align="left">Tip memorie:</td> <td width="56%" align="left">NAND Flash </td> </tr> <tr> <td width="44%" align="left">Extensie memorie:</td> <td width="56%" align="left">Nu</td> </tr> <tr style="background-color:#DDDDDD;"> <td align="left">Fisiere suportate:</td> <td align="left">MP3/WMA/WAV/TXT</td> </tr> <tr> <td align="left">Functii:</td> <td align="left">Mp3 player, reportofon, radio, USB drive</td> </tr> <tr style="background-color:#DDDDDD;"> <td align="left">Display:</td> <td align="left">LCD </td> </tr> <tr> <td align="left">Transfer de date:</td> <td align="left">USB 2.0 </td> </tr> <tr style="background-color:#DDDDDD;"> <td align="left">Alimentare:</td> <td align="left">1 x baterie standard de tip AAA </td> </tr> <tr> <td align="left">Autonomie maxima:</td> <td align="left">8-10 h </td> </tr> <tr style="background-color:#DDDDDD;"> <td align="left">Dimensiuni:</td> <td align="left">- </td> </tr> <tr> <td align="left">Greutate</td> <td align="left">- </td> </tr> </table> </div> <!--// end content1 //--> <!--// begin content2 //--> <div id="content2"> <div class="underline"> 02. MP3 PLAYER CX112, FM, REPORTOFON, 256MB</div> <table cellpadding="0" cellspacing="0" border="0" class="tabel"> <tr style="font-weight:bold;"> <td width="40%" align="left"><span style="color:#990000">Pret promotional</span></td> <td width="32%" align="left">116 Ron<br /> 1.160.000 Rol</td> <td width="28%" align="left"><span style="color:#999999;">TVA inclus</span></td> </tr> <tr> <td width="40%" align="left">Garantie</td> <td width="32%" align="left">12 luni </td> <td width="28%" align="left"> </td> </tr> <tr> <td align="left">Disponibilitate</td> <td align="left">in limita stocului </td> <td align="left"> </td> </tr> <tr> <td align="left">Estimare livrare </td> <td align="left">06 decembrie * </td> <td align="left"><span class="style6">prin curierat rapid </span></td> </tr> <tr> <td align="left">Livrare Bucuresti </td> <td align="left">4 Ron </td> <td align="left"> </td> </tr> <tr> <td align="left">Livrare in tara (2 zile) </td> <td align="left">7 Ron </td> <td align="left"><span style="color:#999999;">prin Posta </span></td> </tr> <tr> <td align="left">Livrare in tara (24 h) </td> <td align="left">32 Ron </td> <td align="left"><span style="color:#999999;">prin curierat rapid </span></td> </tr> </table> <div class="underline" style="color:#FFFFFF">.</div> <table cellpadding="0" cellspacing="0" border="0" class="tabel"> <tr style="font-weight:bold;"> <td width="40%" align="left"><span style="color:#990000">Pachetul contine:</span></td> <td width="60%" align="left">Mp3 Player CX112<br /> Casti standard cu snur<br /> CD cu software<br /> Manual de utilizare</td> </tr> </table> </div> <!--// end specificatii //--> </td> </tr> <tr> <td valign="top" align="left" style="display:block;margin-left:5px;font-family:'Trebuchet MS';color:#000000;"><div align="center"><span id="controls"><a href="javascript: Show2();">Show 2</a></span></div></td> </tr> </table> <map name="Map" id="Map"> <area shape="rect" coords="-4,10,84,35" href="#" onClick="ContentSlider.turnpage('slider1', '0')"/> <area shape="rect" coords="87,10,170,35" href="#" onClick="ContentSlider.turnpage('slider1', '1')"/> </map> </body> </html> Code (markup): ??
It does work; I use this all the time. 1. In the above instructions, it says to set display:none for both swap divs. That means in the CSS use display:none; or style="display:none;" for each one. 2. It doesn't matter what you name your DIVs; make as many links as you want, just take the basic principle of swapping innerHTML using getElementById. Seriously, it is as easy as this-- no external javascript or other files.
Cheers; simple is best Using AJAX for this when you're not sending any variables to a database is unnecessary.