I am trying to get link two drop down using ajax with data in json format. I tried the following code, but it only shows blank drop down for departments as well as projects. I am not sure where my code is wrong.
Code of the main page index.php is given below:
<?php
include_once("includes/connection.php");?>
<html><head> <script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/Javascript">
function showdept(){
$('#deptdropdown').empty();
$('#deptdropdown').append("<option> Loading...</option>");
$('#projectdropdown').append("<option value='0'> All Projects </option>");
$.ajax({
type:"POST",
url:"departmentdropdown.php",
contentType:"application/json; charset:utf-8",
dataType:"json",
success: function(data){
$('#deptdropdown').empty();
$('#deptdropdown').append("<option value='0'> All Departments </option>");
$.each(data,function(i,item){
$('#deptdropdown').append('<option value="'+ data[i].deptID +'">'+ data[i].deptname +'</option>');
});
},
complete: function(){
}
});
}
function showproject(departmentID){
$('#projectdropdown').empty();
$('#projectdropdown').append("<option> Loading...</option>");
$.ajax({
type:"POST",
url:"projectdropdown.php",
contentType:"application/json; charset:utf-8",
dataType:"json",
success: function(data){
$('#projectdropdown').empty();
$('#projectdropdown').append("<option value='0'> All Projects </option>");
$.each(data,function(i,item){
$('#projectdropdown').append('<option value="'+ data[i].projectID +'">'+ data[i].projectname+'</option>');
});
},
complete: function(){
}
});
}
$(document).ready(function(){
showdept();
$("#deptdropdown").change(function(){
var deptid= $("#deptdropdown").val();
showproject(deptid);
});
});
</script></head><body> <span>Departments</span><br />
<select id="deptdropdown"></select>
<br /><br />
<span>Projects</span><br />
<select id="projectdropdown"></select> </body></html>
The code for the departmentdropdown.php file is as below:
<?php
include_once("includes/connection.php");
$query=" SELECT deptID, deptname FROM departmentdetails WHERE active_status=1 ORDER BY deptname";
$result=mysqli_query($con,$query);
$data=array();
while($array=mysqli_fetch_assoc($result)){
$data[] = array('deptID' => $array['deptID'], 'deptname' => $array['deptname']);
}
header('Content-type: application/json');
echo json_encode($data);?>
The code for the projectdropdown.php file is as below:
<?php
include_once("includes/connection.php");
$query="SELECT projectID, deptID projectname FROM projectdetails WHERE active_status=1 AND deptID='".$_GET['departmentID']."' ORDER BY projectname";
$result=mysqli_query($con,$query);
$data=array();
while($array=mysqli_fetch_assoc($result)){
$data[] = array('proID' => $array['projectID'], 'depID' => $array['deptID'], 'projectname' => $array['projectname']);
}
header('Content-type: application/json');
echo json_encode($data);?>
