CODEWITHSUNDEEP
javascriptphpjqueryajax
Tim C
Tim C

Reputation: 5714

Ajax selectbox not populating

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:

  1. user selects sport
  2. now select tournament based on sport_type
  3. now select round based on tournament and sport_type

enter image description here

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

Upvotes: 3

Views: 115

Answers (5)

areeb
areeb

Reputation: 422

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))

Upvotes: 2

sujivasagam
sujivasagam

Reputation: 1769

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);

Upvotes: 0

PHP Worm...
PHP Worm...

Reputation: 4224

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);
       } 
     });

Upvotes: 4

Tim C
Tim C

Reputation: 5714

The problem was in get_sport.php in the while loop mysql_fetch_array($sql) the parameter should be $result....How embarrassing

Upvotes: 2

Luis Tellez
Luis Tellez

Reputation: 2983

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.

Upvotes: 0

Related Questions