Return multiple values from AJAX with jquery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Return multiple values from AJAX with jquery

Post by Sindarin »

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>';
    }
 
?>
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Return multiple values from AJAX with jquery

Post by kaszu »

I would use JSON and generate HTML on the client-side instead of server or you can do even:

Code: Select all

{
    "select": "<option value="-1" selected="selected">???????????</option><option ......",
    "something_else": "....."
}
But outputting only data is a better approach, instead of JSON which contains html.
Post Reply