I am using this ajax function to get options for two dropdown via ajax but it is not returning any output. Hi this is my ajax function :
<script>
$('#department').on('change',function(){
var department = $(this).val();
var course = $('#course').val();
if(department){
$.ajax({
type:'POST',
url:'ajaxData.php',
dataType: 'json',
cache: false,
data:{department: department, course: course },
success: function(data){
$('#head_name').html(data.head_name);
$('#email').html(data.email);
}
});
}else{
$('#head_name').html('<option value="">Select Department first</option>');
$('#email').html('<option value="">Select Department first</option>');
}
});
</script>
And this is my query code:
if(isset($_POST["department"]) && isset($_POST["course"])){
//Get all courses data
$query = $db->query("SELECT head_name, email FROM head WHERE course = '".$_POST['course']."' AND department = '".$_POST['department']."' ");
//Count total number of rows
$rowCount = $query->num_rows;
//Display result list
if($rowCount > 0){
while($row = $query->fetch_assoc()){
$temp = array('head_name' => '<option value="'.$row['head_name'].'">'.$row['head_name'].'</option>', 'email' => '<option value="'.$row['email'].'">'.$row['email'].'</option>' );
echo json_encode($temp);
}
}else{
$temp = array('head_name' => '<option value="">Not avaialble </option>', 'email' => '<option value="">Not avaialble </option>' );
echo json_encode($temp);
}
}
But I'm not getting output result from it, what I'm doing wrong ?
Your Ajax call expects JSON (dataType: 'json') but you do not return JSON via your PHP output because the default content type is text/html and not application/json. Add the appropriate Content-Type header before echo'ing your JSON output.
header('Content-Type: application/json');
echo json_encode(array('something' => 'else'));
you echo an array so you should access to data element as an array by index ..
eg for first element
success: function(data){
$('#head_name').html(data[0].head_name);
$('#email').html(data[0].email);
}
eventually try jsonParse data
success: function(data){
jsonData = JSON.parse(data);
$('#head_name').jsonData(data[0].head_name);
$('#email').jsonData(data[0].email);
}
in your while you should use an array for store the values
while($row = $query->fetch_assoc()){
$temp[] = array('head_name' => '<option value="'.$row['head_name'].'">'.$row['head_name'].'</option>', 'email' => '<option value="'.$row['email'].'">'.$row['email'].'</option>' );
echo json_encode($temp);
}
I have just change the variable name of course and my function starts working , don't know why like this:
data:{ department: department, courseid: course},