I have two dropdowns, the 2nd dropdown is dependent to the 1st dropdown and the table is dependent to the 2nd dropdown only.
I have this code on the main php file. This is the ajax script for the table and 2nd dropdown:
<script>
$(document).ready(function() {
function GenerateReports(qry){
$.ajax({
url: "include/project-table.php",
method: "POST",
data: {qry:qry},
success: function(data) {
$("#project_result").html(data);
console.log(data);
}
});
}
$("#selection2").on("change", function(){
var qry = $(this).val();
GenerateReports(qry);
});
});
function makeAjaxRequest(opts){
$.ajax({
type: "POST",
data: { opts: opts },
url: "dropdown.php",
success: function(res) {
$("#results").html(res);
}
});
}
$("#selection1").on("change", function(){
var selected = $(this).val();
makeAjaxRequest(selected);
});
</script>
Now, the table should appear here:
<div class="card shadow mb-4 fa-sm">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Result</h6>
</div>
<div class="card-body">
<div id="project_result">
</div>
</div>
</div>
The php file to fetch the data and the table, filename: project-table.php
if($_POST['qry']!="")
{
$selected = $_POST['qry'];
if($selected<10 && $selected>1)
{
$sqlphase = $conn->prepare('SELECT pd.projectid, projectname, date_created, pd.projectphaseid, phasename, projectstatus, pd.critical_id, rcr.criticality, assignedto FROM project_details pd LEFT JOIN ref_criticality rcr ON pd.critical_id=rcr.critical_id LEFT JOIN ref_project_phase rpp ON pd.projectphaseid=rpp.projectphaseid LEFT JOIN users us pd.assignedto=us.userid WHERE pd.assignedto=:userid AND pd.projectphaseid=:selected');
$sqlphase->execute(['userid'=>$userid, 'selected'=>$selected]);
echo "<div class='table-responsive'>
<table class='table table-bordered' width='100% 'cellspacing='0'>
<thead>
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Date Created</th>
<th>Phase</th>
<th>Status</th>
<th>Criticality</th>
</tr>
</thead>
<tbody>";
while($displayphasedetails = $sqlphase->fetch(PDO::FETCH_ASSOC))
{
echo "<tr>";
echo "<td>" .$displayphasedetails['projectid']. "</td>";
echo "<td>" .$displayphasedetails['projectname']. "</td>";
echo "<td>" .$displayphasedetails['date_created']. "</td>";
echo "<td>" .$displayphasedetails['phasename']. "</td>";
echo "<td>" .$displayphasedetails['projectstatus']. "</td>";
echo "<td>" .$displayphasedetails['criticality']. "</td>";
echo "</tr>";
}
echo "</tbody>
</table>
</div>";
}
elseif($selected == "FULL" || $selected == "LIMITED" || $selected == "NO PARTICIPATION" || $selected == "ENDORSED")
{
$sqlapproval = $conn->prepare('SELECT projectid, projectname, date_created, pd.projectphaseid, phasename, projectstatus, pd.critical_id, rcr.criticality, approval_type, assignedto FROM project_details pd LEFT JOIN ref_criticality rcr ON pd.critical_id=rcr.critical_id LEFT JOIN ref_project_phase rpp ON pd.projectphaseid=rpp.projectphaseid LEFT JOIN users us pd.assignedto=us.userid WHERE pd.assignedto=:userid AND approval_type=:selected');
$sqlapproval->execute(['userid'=>$userid, 'selected'=>$selected]);
echo "<div class='table-responsive'>
<table class='table table-bordered' width='100% 'cellspacing='0'>
<thead>
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Date Created</th>
<th>Phase</th>
<th>Status</th>
<th>RA Participation</th>
<th>Criticality</th>
</tr>
</thead>
<tbody>";
while($displayapprovaldetails = $sqlapproval->fetch(PDO::FETCH_ASSOC))
{
echo "<tr>";
echo "<td>" .$displayapprovaldetails['projectid']. "</td>";
echo "<td>" .$displayapprovaldetails['projectname']. "</td>";
echo "<td>" .$displayapprovaldetails['date_created']. "</td>";
echo "<td>" .$displayapprovaldetails['phasename']. "</td>";
echo "<td>" .$displayapprovaldetails['projectstatus']. "</td>";
echo "<td>" .$displayapprovaldetails['approval_type']. "</td>";
echo "<td>" .$displayapprovaldetails['criticality']. "</td>";
echo "</tr>";
}
echo "</tbody>
</table>
</div>";
}
}
here's my 2nd dropdown box: filename: dropdown.php
<?php
$selected = $_POST['opts'];
if($selected == "Project Phase")
{
$sqlphasename = $conn->query('SELECT projectphaseid, phasename FROM ref_project_phase');
}
?>
<div class="form-group">
<label class="form-control-label">Filter 2</label>
<select class="form-control form-control-sm" name="selection2" id="selection2">
<?php
if($selected == "Project Phase")
{
while($row = $sqlphasename->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['projectphaseid'];?>"><?php echo $row['phasename'];?></option>
<?php
}
}
else
{
?>
<option value="FULL">FULL</option>
<option value="LIMITED">LIMITED</option>
<option value="NO PARTICIPATION">NO PARTICIPATION</option>
<option value="ENDORSED">ENDORSED</option>
<?php
}
?>
</select>
</div>
I tried the console.log but it is not showing anything. The table is not showing after I select any values in selection2. Please help me to find the problem and solve it. Thanks.
