make refresh without refreshing the all page
Question
I made 2 dropdownlists which are filled from my database. In the first drop are countries and in the second are cities. When a user selects a country automatically in the second drop down appears all the cities from that country. The problem is that when I select another country all the page is refreshing and I want just that 2 drop down lists to do the refresh. I'm using Javascript and PHP. Here are the codes:
@$cat=$_GET['cat'];
$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category");
if(isset($cat) and strlen($cat) > 0){
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory");
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); }
echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
while($noticia2 = mysql_fetch_array($quer2)) {
if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[category]'>$noticia2[category]</option>"."<BR>";}
else{echo "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
}
echo "</select>";
echo "  ";
echo "<select name='subcat'><option value=''></option>";
while($noticia = mysql_fetch_array($quer)) {
echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";
and this is the Javascript code:
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='index.php?cat=' + val ;
}
I want that when I change the country the all page doesn't refresh only those 2 drop down lists. Any help will be much appreciated.
4 answers
solution1
3 2012-10-04 08:45:46
U can use Ajax for acheving this.
Pls check this link Populate select list
If U are using jquery use .ajax() . Example of jquery ajax select list populate is Jquery Ajax Select List Populate
solution2
2 2012-10-04 08:45:30
You need to use ajax. A very rudimentary suggestion would be:
//self.location = '...' - removed
ajax('index.php?cat=' + val).done(function (result) {
//update select boxes
});
solution3
1 2012-10-04 10:48:52
Try this
index.php
<!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=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".Select1").change(function()
{
var id=$(this).val();
var dataString = 'your_param='+ your_param;
$.ajax
({
type: "POST",
url: "select_2.php",
data: dataString,
cache: false,
success: function(html)
{
$(".Select2").html(html);
}
});
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<?php
include("config.php");
$sql="SELECT * FROM your_table";
$result2 = mysql_query($sql);
?>
<select class="Select1">
<option value=""></option>
<?php
while($row2 = mysql_fetch_array($result2))
{
?>
<option value="<?php echo $row2['your_value']?>"><?php echo $row2['your_value']?> </option>
<?php
}
?>
</select><br />
<select class="Select2"></select>
</body>
</html>
And in select_2.php
<?php
include('config.php');
if($_POST['your_param'])
{
$your_param=$_POST['your_param'];
$sql = mysql_query("SELECT * FROM yortable WHERE param = '".$your_param."'") or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
$your_value=$row['your_param'];
echo '<option></option>';
echo '<option value="'.$your_value.'">'.$your_value.'</option>';
}
}
?>
solution4
0 2012-10-04 11:05:26
Yep you're going to need to use AJAX in order to just update part of the page. The easiest way to use AJAX is through JQuery. Here's their API for AJAX .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.