Return multiple values from AJAX with jquery
Posted: Mon Jul 20, 2009 3:10 am
I have an ajax call that requests data from a server side php script. But it echoes back only data for the <select>. How can I return back multiple data for e.g. the .map class as well?
Code: Select all
<?php
header("Cache-Control: must-revalidate");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 60 * 60 * 24 * 1) . " GMT");
?>
<!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>
<!--encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--title-->
<title>Title here</title>
<!--meta tags-->
<meta name="description" content="description here" />
<meta name="keywords" content="keywords here" />
<meta name="robots" content="index, follow" />
<meta http-equiv="imagetoolbar" content="false" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#sublocation").hide();
//GET LOCATION
$("#geo").change(function(event){
var geo = $('#geo').attr('value');
$.ajax({
url: 'get-location.php',
type: 'POST',
cache: false,
data: "geo="+ geo,
beforeSend: function(){
//$("#location").html("<img src='throbber.gif' alt='Loading...'/>");
},
success: function(data){
$("#location").html(data);
$("#sublocation").html("<option value=\"-1\" selected=\"selected\">???????????</option>");
$("#sublocation").hide();
},
error: function(){
alert('AJAX Request Error!');
}
});
});
//END
//GET SUBLOCATION
$("#location").change(function(event){
var location = $('#location').attr('value');
$.ajax({
url: 'get-sublocation.php',
type: 'POST',
cache: false,
data: "location="+ location,
beforeSend: function(){
//$("#location").html("<img src='throbber.gif' alt='Loading...'/>");
},
success: function(data){
$("#sublocation").html(data);
$("#sublocation").fadeIn();
},
error: function(){
alert('AJAX Request Error!');
}
});
});
//END
});
</script>
</head>
<body>
<noscript>JavaScript is disabled. Some features of this website may not be available.</noscript>
<div id="wrapper" align="left">
<fieldset id="myfieldset">
<legend>???????</legend>
<form name="testform" method="post">
<input type="hidden" name="www" value="www"/>
<select name="geo" id="geo" tabindex="1">
<?php
echo '<option value="-1" selected="selected">???????????</option>';
require_once('database-connect.php');
$result = mysql_query("SELECT * FROM types WHERE type_targetfield='geo'");
while($row = mysql_fetch_array($result))
{
//while loop
$get_id=$row['type_id'];
$get_name=$row['type_name'];
echo '<option value="'.$get_id.'">'.$get_name.'</option>';
}
?>
</select>
<br/><br/>
<select name="location" id="location" tabindex="2">
<option value="-1" selected="selected">???????????</option>
</select>
<br/><br/>
<select name="sublocation" id="sublocation" tabindex="3">
<option value="-1" selected="selected">???????????</option>
</select>
<br/><br/>
<span class="map">
<img src="greece.png" alt="image" title="" width="297" height="301" border="0" />
</span>
</form>
</fieldset>
</div>
</body>
</html>
<?php mysql_close(); ?>Code: Select all
<?php
require_once('database-connect.php');
$geovalue=strip_tags($_POST['geo']);
echo '<option value="-1" selected="selected">???????????</option>';
$result = mysql_query("SELECT * FROM types WHERE type_targetfield='location' AND type_parentid='$geovalue'");
while($row = mysql_fetch_array($result))
{
//while loop
$get_id=$row['type_id'];
$get_name=$row['type_name'];
echo '<option value="'.$get_id.'">'.$get_name.'</option>';
}
?>