Ajax drop down menu [Archive]

RivaCom

02-08-2010, 05:20 PM

I'm trying to get a ajax drop down menu to work, but it doesn't seem to be doing anything onChange. Maybe someone can help me out.

<script type="text/javascript">
function GetXmlHttpObject(){
var xmlHttp = false;
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")//For Old Microsoft Browsers
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//For Microsoft IE 6.0+
}
catch(e1){
xmlHttp = false;
}
}
}

function getFolder(fold) {
var URL="drop.php?folder="+fold;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('folderselect').innerHTML=req.responseText;
} else {

alert("There was a problem while using XMLHTTP:\n" + req.statusText);

}

}

}

req.open("GET", strURL, true);
req.send(null);

}

}
</script>
</head>
<body style="text-align:center">
<?php
if (!array_key_exists('Submitted',$_POST)) {
?>

<form action="upload.php" method="post">
<select name="folder" onChange="getFolder(this.value)">
<option value="">Select Group</option>
<?php
while($row = mysql_fetch_array($squery)) {
echo "<option value='" . $row['foldername'] . "'>" . $row['groupname'] . "</option>"; }
?>
</select>

<div id="folderselect">
<select name="subfolder" disabled>
<option value="">Select Group First</option>
</select>
</div>

Doh004

02-08-2010, 11:39 PM

mattle

02-09-2010, 09:32 AM

Also, install the Firebug extension...really handy little tool for debugging JS/AJAX. Ajax requests show all the details including request parameters and server return values.

Hosting24

02-09-2010, 09:58 AM

Why don't you use one of ajax functions which are "ready to use". You can check out ajaxrain.com for tons of useful ajax snippets

Host Ahead

02-09-2010, 12:39 PM

Could you provide some more information on what error message you get? Until what point does your script work? Where does it stop and what does it say? You could use firebug or the builtin debugger in Internet Explorer 8 to debug your script.

SRSimon

02-09-2010, 06:39 PM

Yes, like Doh004 said - try with jQuery, it's free and will make your JS adventure way easier. To process AJAX request with jQuery, use this:

$.ajax({
type: "POST",
url: "somefile.php",
data: "parameter=getcontents",
success: function(data){
$("#yourmenu").html(data);
});

This code would call "somefile.php?parameter=getcontents", and anything it get in response, will be html code of anything what has ID="yourmenu"

RivaCom

02-10-2010, 03:43 PM

mattle

02-10-2010, 04:33 PM

Error I get in Firebug is

getXMLHTTP is not defined
getFolder(Object { name="fold"})upload.php (line 23)
function onchange(event) { getFolder(this.value); }(Object { name="event"})1 (line 2)
[Break on this error] var req = getXMLHTTP();

Yep... I see it. You've got this:

var req = getXMLHTTP();
But right before it, you define a function called GetXmlHttpObject(). I think that's the function you meant to call on this line.

That will however not behave as expected. GetXmlHttpObject() doesn't return anything, so your next statement

if (req) { //...
doesn't make much sense...

Instead, GetXmlHttpObject() creates an XML Object in a global variable. You probably want this instead (untested):

// initialize
var xmlHttp = false;

// try to create XML object
GetXmlHttpObject();

// see if it worked
if (xmlHttp) { //...

RivaCom

02-10-2010, 04:46 PM

Hmm I add the Get in there and then it says

missing ; before statement
[Break on this error] Get XmlHttpObject();\n
upload.php (line 8)

getFolder is not defined
function onchange(event) { getFolder(this.value); }(Object { name="event"})1 (line 2)
[Break on this error] getFolder(this.value);

Cmafai

02-10-2010, 05:14 PM

Just to throw in another potentially useful ajax tool, check out "jx". It's the best tiny ajax library I've found, so if you don't need the extra clutter that comes with jQuery (which is amazing if you do want to make other stuff easier in JS...) check it out:

http://www.openjs.com/scripts/jx/

It's absolutely minuscule and is easy to use :)

SRSimon

02-10-2010, 07:28 PM

Alternatively, you can use ready solution - IzzyMenu.com (http://www.izzymenu.com), online menu builder - will create nice looking menu with drop-down submenu if needed.

mattle

02-11-2010, 12:33 AM

RivaCom

02-11-2010, 09:33 AM

I still get this if I take the space out.

getXMLHTTP is not defined
[Break on this error] var req = getXMLHTTP();

RivaCom

02-11-2010, 01:05 PM

Ok I think I fixed it. What I'm trying to do now is when they choose the second drop down , that it calls another function that calls a php file that pulls another list in. However all it seems to do is reset the second combo box to be blank. Here is my code.

function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}

function getFolder(strURL) {

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('folderselect').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}

function getFiles(strURLs) {

var req = new getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('fileselect').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURLs, true);
req.send(null);
}

}

And my php/html

<form action="upload.php" method="post">
<select name="folder" onChange="getFolder('/ftp/drop.php?folder='+this.value)">
<option value="1">Select Group</option>
<?php
while($row = mysql_fetch_array($squery)) {
echo "<option value='" . $row['foldername'] . "'>" . $row['groupname'] . "</option>"; }
?>
</select>

<div id="folderselect">
<select name="subfolder" disabled>
<option value="">Select Group First</option>
</select>
</div>

<div id="fileselect">
</div>

Host Ahead

02-11-2010, 01:30 PM

On your second dropdownlist you haven't defined an onchange handler, so no code will be called. Try to play with some breakpoints in FireBug to see what is actually called and what not, you can find the solution much easier using breakpoints, so you know where it goes wrong.

RivaCom

02-11-2010, 03:12 PM

sorry forgot to mention that , it's all taken care of in the first select

The first select references a file that edits the second select.

<select id="fileselect" name="subfolder" onChange="getFiles('/ftp/filelist.php?files='+this.value)">

Host Ahead

02-11-2010, 03:37 PM

Ok, try to break it down in steps:
- place a breakpoint in FireBug and look at what your PHP script is returning. If it's returning an empty string or an incorrect string, your problem is in the PHP file.
- If the PHP script is returning the correct values, check the updated HTML with firebug, is everything there? If not, there's a problem with putting the returned string in the div.
- If everything is there check if it's syntactillay correct.

Tell me to which step you reached, and I can give you hints on what the problem might be. I don't have the code from the filelist.php file, nor the contents off your datasource, so I'm a bit in the dark without that code.

wtwolf6

04-03-2010, 08:34 PM

Sorry if this a 2 month old thread, I have been having issues with this as well and figured out how to fix it, since this topic came up in google when i searched for my issue ill respond what I found fixed it for me.

filelist.php
drop.php

I had a bit of code, think we modified the same bit

<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}

function getBn(strURL) {

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('bndiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getItem(strURL) {

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('itemdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}
function showItem(strURL) {

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('itemshow').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}

</script>

with the php section looking like

<table>
<tr>
<td>
Boss Name:<br />
<select name="name" onChange="getBn('/listed_loot/ajax/boss.php?bname='+this.value)">
<option selected="selected">Select a boss</option>
<?php
$boss_name_select=mysql_query($bnamesel=("SELECT DISTINCT item_creaturename FROM list_loot_items"));
while($bnsrow=mysql_fetch_array($boss_name_select)) {
$boss_name_mn = $bnsrow['item_creaturename'];
$boss_name_ap = str_replace(" ","_", $boss_name_mn);
$boss_name_db = str_replace("'","248", $boss_name_ap);
$boss_name = stripslashes($boss_name_db);
?>
<option value="<?php echo"$boss_name"; ?>"><?=$bnsrow['item_creaturename']?></option>
<?php
}
?>
</select>
</td>
<td>
Difficulty:<br />
<div id="bndiv">
 Select a Boss first!! 
</div>
</td>
<td>
Item Name:<br />
<div id="itemdiv">
 Select a Difficulty Mode first!! 
</div>
</td>
</tr>
<tr>
<td colspan="3"><br />
<div id="itemshow"><center>
<br />
</center></div><br />
</td>
</tr>
</table>

So I change my boss.php file from

<?php
$boss_name = htmlspecialchars($_GET["bname"]);
?>
<select name="bn" onChange="getItem('/listed_loot/ajax/item.php?item='+this.value)">
<option value="<?php echo"$boss_name/h"; ?>"><?php echo"Heroic"; ?></option>
<option value="<?php echo"$boss_name/n"; ?>"><?php echo"Normal"; ?></option>
<option selected="selected"><?php echo"Select a Difficulty"; ?></option>
</select>

to

<?php
$boss_name = htmlspecialchars($_GET["bname"]);
?>
<html>
<select name="bn" onChange="getItem('/listed_loot/ajax/item.php?item='+this.value)">
<option value="<?php echo"$boss_name/h"; ?>"><?php echo"Heroic"; ?></option>
<option value="<?php echo"$boss_name/n"; ?>"><?php echo"Normal"; ?></option>
<option selected="selected"><?php echo"Select a Difficulty"; ?></option>
</select>
</html>

adding the html tags, it worked fine. Hope this helps some one