Dynamic Ajax drop down menu problem... [Archive]

xombie4less

04-13-2007, 03:28 PM

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: Load more than external page with a drop down menu

I am using the Dynamic Ajax Content script drop down menu option to load the content into the "mainText" DIV. I also have a menu that needs to be loaded in the DIV "bottomNav", which is directly under "mainText", and is specific to the content loaded into the "mainText" DIV.

Hoping that I haven't confused everone completely with this description, I was wondering if anyone knew how to load 2 seperate external files into 2 seperate DIVs with the drop down menu option? I do not have any problems loading 2 or more DIVs with a typical link, but I can not get the same results with the drop down menu. Any help at all would be greatly appreciated!

No-Tech

04-20-2007, 05:04 PM

If you have'nt solved your problem already, and this is waht you were thinking of(have'nt tested this exact code, I generate drop-down menus not text in div tags). This is probobly an unefficient and unclever way, but it gets the job done. Manipulate it so that it works for u

Make a javascript file like this:

//select.js

// JavaScript Document
var xmlHttp

function getMenu(string)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url="menu.php";
url=url+"?string="+string;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function getMenu2(string)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url="menu2.php";
url=url+"?string="+string;
xmlHttp.onreadystatechange=stateChanged2;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("divID").innerHTML=xmlHttp.responseText;
}
}

function stateChanged2()
{
if (xmlHttp.readyState==4)
{
document.getElementById("divID2").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Note I send this request to a menu.php that retrievs my reqested item!

make the html code something like this:

<html>
<head>
<script src="select.js"></script>
<script type="text/javascript">
function getValue(str)
{
getMenu(str);
getMenu2(str);
}
<title>menu test</title>
</head>

<body>
<form name="form">
<select name="race" onChange="getMenu(this.value)">
<option value="0" selected>-Select Option-</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>&nbsp&nbsp

<div id="divID"></div>
<div id="divID2"></div>
</form>

</body>
</html>

Rgrds
No-Tech