PDA

View Full Version : Strange result using ajax tutorial


paradox28491
02-25-2009, 09:40 PM
I'm trying to use the same ajax dropdown found in the ajax tutorial for my own use.

I've tried switching out the tables and fields for mine but I haven't been able to get it to work. When I run the ajax_example.htm it still shows the same dropdown values, Audi, BMW etc. Where it the script even getting these values? I can't find where it is still connecting to the same car_make table.

My two tables are called mobo and brands. mobo contains a whole slew of information about various motherboards including a field called mobo_brand and one called mobo_name. I've switched these out with car_model_id and car_model, respectively.

My second table, brands contains two fields. One called brand_id and one called brand. Now, the difference here is that I want to match up brand, which contains various brands(ASRock, ASUS, BIOSTAR, DFI) with the mobo_brand. Will there be a problem with them not being integers? Are there any other values I should change because of this?

I've been trying many different scripts similar to this over the past few days and I'm having some real trouble with them. Is there anywhere you can suggest to read up on ajax? Can anyone spot errors in my code? Thanks for reading this.

ajax_example.htm
<!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</title>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<link href="ajax.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="style1">AJAX dynamic dropdowns </p>
<form name='myForm'>

<table width="200" border="0">
<tr>
<td width="114">

<select name="brand" onchange="ajaxFunction()" id="brand">
<option value="">Select Brand</option>
<option value="1">ASRock</option>
<option value="2">ASUS</option>
<option value="3">BIOSTAR</option>
<option value="4">DFI</option>
</select>

</td>
<td width="76"><div id='ajaxDiv'></div></td>
</tr>
</table>

</form>

</body>
</html>
databaseQuery.php
<?php
require_once("Connections/connection.php"); // database connection

// Retrieve data from Query String
$brand = $_GET['brand'];

//build query
$query = "SELECT * FROM mobo WHERE mobo_brand = '$brand'";
$result = @mysql_query($query);
$rowModel = mysql_fetch_array($result);

/////////////////////////////////////////////////

//Build Result String
$dropdown = "<select name=\"model\">";
$dropdown .= "<option value=\"\">Select Model</option>";


// Insert a new row in the table for each person returned
do {

$dropdown .= "<option value=".$rowModel['mobo_brand'].">".$rowModel['mobo_name']."</option>";

}while ($rowModel = mysql_fetch_array($result));

$dropdown .= "</select>";


echo $dropdown;
?>
ajax.js
// JavaScript Document
function ajaxFunction(){

var ajaxRequest; // magic variable

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

// Receive Data Function
ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}

}

var brand = document.getElementById('brand').value;

var queryString = "?brand=" + brand;
ajaxRequest.open("GET", "databaseQuery.php" + queryString, true);
ajaxRequest.send(null);
}

Also, when I click one of the options in the dropdown when I run it, I get an error, "Notice: Undefined index: brand in N:\My Documents\Web Root\pcb\databaseQuery.php on line 5".

edbr
02-26-2009, 12:10 AM
first step echo
$_GET['brand']; to see if the value is being passed and is correct

paradox28491
03-04-2009, 11:58 PM
Ok, I have this part working now. I'm trying to add a third dropdown though. So for example there would be a car make you could choose as well as the car year. I can't figure out how to do this. I tried making a submit button so that both menus would go at the same time, but it didn't work. I don't really know what I should be changing in the .php and java files. I'll update my code in my first post so you can see what I'm talking about.

I can't edit that post for some reason, here it is anyways:

ajax_example.php:
<?php
require_once("Connections/connection.php");


$queryBrand = sprintf("SELECT brand FROM brands");
$resultBrand = @mysql_query($queryBrand);
$rowBrand = mysql_fetch_array($resultBrand);

$querySocket = sprintf("SELECT socket FROM sockets");
$resultSocket = @mysql_query($querySocket);
$rowSocket = mysql_fetch_array($resultSocket);
?>

<!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</title>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<link href="ajax.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="style1">AJAX dynamic dropdowns </p>

<form name='myForm'>

<table width="318" border="0">
<tr>
<td><select name="brand" id="brand">
<option value="">Select Brand</option>
<?php do { ?>
<option value="<?php echo $rowBrand['brand']; ?>"><?php echo $rowBrand['brand']; ?></option>
<?php }while ($rowBrand = mysql_fetch_array($resultBrand)); ?>
</select></td>
<td><select name="socket" id="socket">
<option value="">Select Socket Type</option>
<?php do { ?>
<option value="<?php echo $rowSocket['socket']; ?>"><?php echo $rowSocket['socket']; ?></option>
<?php }while ($rowSocket = mysql_fetch_array($resultSocket)); ?>
</select></td>
<td><td width="76"><div id='ajaxDiv'></div></td></td>
</tr>
<tr>
<td width="114"><select name="changeit" onchange="ajaxFunction()" id="changeit">
<option>thisisoneoption</option>
<option>thisistheother</option>
</select>
</td>
<td width="114">&nbsp;</td>
</tr>
</table>

</form>

</body>
</html>

Am I building the query the right way?(below)
databaseQuery.php:
<?php
require_once("Connections/connection.php"); // database connection

// Retrieve data from Query String
$brand = $_GET['brand'];
$socket = $_GET['socket'];

//build query
$query = "SELECT * FROM mobo WHERE mobo_brand = '$brand' AND mobo_cpusocket = '$socket'";
$result = @mysql_query($query);
$rowModel = mysql_fetch_array($result);

/////////////////////////////////////////////////

//Build Result String
$dropdown = "<select name=\"model\">";
$dropdown .= "<option value=\"\">Select Model</option>";


// Insert a new row in the table for each model returned
do {

$dropdown .= "<option value=".$rowModel['mobo_id'].">".$rowModel['mobo_model']."</option>";

}while ($rowModel = mysql_fetch_array($result));

$dropdown .= "</select>";


echo $dropdown;
?>
ajax.js:
// JavaScript Document
function ajaxFunction(){

var ajaxRequest; // magic variable

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

// Receive Data Function
ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}

}

var brand = document.getElementById('brand').value;
var socket = document.getElementById('socket').value;

var queryString = "?brand=" + brand + "?socket=" + socket;
ajaxRequest.open("GET", "databaseQuery.php" + queryString, true);
ajaxRequest.send(null);
}Is my queryString variable here correct? I'm not sure how else to do it.

Better than what I'm doing, I would rather have it so that a user can select only one of the boxes to populate the list rather than both. How could I do this? Thanks for reading.

What's happening right now is, when the ajaxFunction() is called it tells me that the variable socket on line 6 in databaseQuery.php is not defined and the list does not populate.

paradox28491
03-05-2009, 01:49 AM
Alright well I figured out how to do this. I had everything right, but in my javascript page I had to use & instead of ? for the second variable I was adding to my string.

I would still love to know how to make it so you don't need to use both of the filters though. Can anyone help?

Also I wanted it to make it so the database field data only has to contain the option, not be exactly alike to it. In my SELECT statement I've used the greater than or equal to sign >= . Is this the right method? It appears to work but I can't tell for sure.

Just one more easy question, how would I go about adding the value selected in the ajax populated menu to a variable? I'm trying to do this with js, but there must be a simpler way.