Dynamic Content Swapping

the2003s

Dec 4th 2006, 7:32 am

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!

krakjoe

Dec 4th 2006, 7:36 am

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....

the2003s

Dec 4th 2006, 7:57 am

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....

Yes, it's static content. can you please tell me how to do it?

The html file is here (http://imbatabil.ro/Untitled-2.html).

mynabird

Dec 4th 2006, 7:59 am

you could try this tutorial :
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-dynamic-content

Also contains a demo.

the2003s

Dec 4th 2006, 8:07 am

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..

TheHoff

Dec 4th 2006, 8:16 am

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.

krakjoe

Dec 4th 2006, 8:31 am

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>

<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 :

<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>

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;
?>

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 ?

the2003s

Dec 4th 2006, 12:30 pm

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.

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..

krakjoe

Dec 4th 2006, 1:21 pm

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

<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>


<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>

</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>

??

the2003s

Dec 4th 2006, 2:15 pm

krakjoe, great work. I was just getting caught up in your first example. Thanks a lot.

krakjoe

Dec 4th 2006, 2:16 pm

no problem.....

TheHoff

Dec 4th 2006, 7:28 pm

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..

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.

Jennha

Dec 15th 2006, 1:03 pm

This code is AWESOME - the simplest I've found for switching out DIVS. Thanks!

TheHoff

Dec 17th 2006, 8:57 am

Cheers; simple is best :) Using AJAX for this when you're not sending any variables to a database is unnecessary.