Ajax selectbox not populating
Question
This is pretty much one of my first ajax scripts so please keep that in mind as I am very much still learning...
Im trying to do the following:
Display results of a certain tournament by allowing user to do the following:
- user selects sport
- now select tournament based on sport_type
- now select round based on tournament and sport_type
My problem
The 1st select box (Sport) populated perfectly yet the other select boxes does not populate...any im getting no error messages...
My Code
result.php
$(document).ready(function()
{
$(".sport").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_sport.php",
data: dataString,
cache: false,
success: function(html)
{
$(".tournament").html(html);
}
});
});
$(".tournament").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_round.php",
data: dataString,
cache: false,
success: function(html)
{
$(".round").html(html);
}
});
});
});
</head>
<body>
<center>
<div>
<label>Sport :</label>
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?php
var_dump($id);
$sql="SELECT distinct sport_type FROM events";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
?>
<option value="<?php echo $row['sport_type']; ?>"><?php echo $row['sport_type']; ?></option>
<?php
}
?>
</select>
<label>Tournamet :</label> <select name="tournament" class="tournament">
<option selected="selected">--Select Tournament--</option>
</select>
<label>Round :</label> <select name="round" class="round">
<option selected="selected">--Select Round--</option>
</select>
get_sport.php
include("connect.php");
if($_POST['id'])
{
$id=$_POST['id'];
$sql="SELECT distinct tournament FROM events WHERE sport_type ='$id'";
$result=mysql_query($sql);
?>
<option selected="selected">Select Tournament</option><?php
while($row=mysql_fetch_array($sql)){
?>
<option value="<?php echo $row['tournament'];?>"><?php echo $row['tournament']?></option>
<?php
}
}
get_round.php
include('connect.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql="SELECT DISTINCT round FROM events WHERE tournament='$id'";
$result=mysql_query($sql);
?>
<option selected="selected">Select Round</option><?php
while($row=mysql_fetch_array($result)){
?>
<option value="<?php echo $row['round'] ?>"><?php echo $row['round'] ?></option>
<?php
}
}
?>
Im sure I just forgot to add a statment or something similar Ive been staring at this for the best part of an hour, yet I can not find the error. Any help will be greatly appreciated
5 answers
solution1
4 2015-06-29 06:33:55
Try dataType : 'html' :
var dataString = {id:id};
$.ajax({
type : 'POST',
url: "get_sport.php",
dataType : 'html',
data: dataString,
cache: false,
success: function(html)
{
$(".tournament").html(html);
}
});
solution2
2 ACCPTED 2015-06-29 06:47:51
问题是在while循环中的get_sport.php mysql_fetch_array($sql)参数应该是$result ....多么尴尬
solution3
2 2015-06-29 07:06:31
Try this by replacing,
$(".tournament").change(function()
to
$(document).on('change','.tournament',function()
and int get_sport.php replace,
while($row=mysql_fetch_array($sql))
to
while($row=mysql_fetch_array($result))
solution4
0 2015-06-29 06:36:36
I can't find the problem in your code but the best thing you can do its learn hot to spot this kind of problems.
You can do a few things:
- Use alerts on Jquery to see if your functions are been called.
- You can debug the PHP or use some Echo or something like that to see if your php pages are been called, or use a tool as fiddler.
- Look at network in Chrome to see what the php return.
solution5
0 2015-06-29 06:59:01
Change the
while($row=mysql_fetch_array($sql)){...
in get_sport.php to
while($row=mysql_fetch_array($result)){...
since you used
$result=mysql_query($sql);
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.