How to fix POST data not properly set from ajax request? - php

Question

I have a problem in getting the POST data from a page using ajax. In the jquery code the data is running smoothly and it will display when i alert the data. In the ajax request code the data from jquery has been successfully pass into showpercent.php file. Now the problem about showpercent.php, the data POST index percentage_id is unidentified. How can i fix this problem in getting the value of POST?
Below is the table list with button when the data is coming from.
<table>
<tr>
<td>
<button class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="'.$row['hidden_id'] .'" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
</td>
</tr>
</table>
Below is the ajax request sending the data into showpercent.php file. When I alert the percentage_id from button click the data will show in the alert and the ajax was successfully pass into specific php file which is showpercent.php.
<script>
$(document).ready(function(){
$(".show-percentage").click(function(){
var percentage_id = $(this).data('percentage_id');
alert("Ajax Landing ID "+landing_id);
$.ajax({
url: 'ajax/showpercent.php',
type: 'POST',
cache: false,
data: { percentage_id : percentage_id },
success: function(data) {
alert(data);
$('#add-percentage').modal('show');
readRecords();
},
error: function(request, status, error){
alert("Error!! "+error);
}
});
// READ recods when the button is click
readRecords();
});
function readRecords() {
$.get("ajax/showpercent.php", {}, function (data, status) {
$(".display_percentage").html(data);
});
}
});
</script>
Below is the modal having a tab will display the data from ajax request. The class display_percentage will display the current data from showpercentage.
<div id="add-percentage" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fish Landing Percentage</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">Add Percentage</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<br>
<div class="display_percentage"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="primary" class="btn btn-primary" onclick="AddPercentage()"> Add Percentage </button>
<button type="button" id="danger" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
showpercent.php
This file will read by readRecords() function to display into the modal with tab class display_percentage when the button click is triggered.
This is now the problem comes, when the data was successfully pass from ajax request the data POST in the showpercent.php is not properly set and cannot proceed to the mysql process because the POST is not set.
<?php
include 'db.php';
$data = '
<table">
<thead>
<tr class="success">
<th ><center>No.</center></th>
<th ><center>Percentage ID</center></th>
<th ><center>Landing ID</center></th>
<th><center>Percentage</center></th>
<th><center>Date Added</center></th>
</tr>
</thead>';
if(isset($_POST['percentage_id'])){
$landing_id = $_POST['percentage_id'];
$query = mysqli_query($conn, "SELECT
percentage.percent_id,
percentage.landing_id,
percentage.percentage,
percentage.date_recorded
FROM
percentage
WHERE percentage.landing_id = '$landing_id'");
$number = 1;
while($row = mysqli_fetch_array($query)) {
$data .= '
<tr>
<td><center>' . $number . '</center></td>
<td><center>' . $row['percent_id'] . '</center></td>
<td><center>' . $row['landing_id'] . '</center></td>
<td><center>' . $row['percentage'] . '%</center></td>
<td><center>' . date("M. d, Y", strtotime($row['date_recorded'])) . '</center></td>
</tr>';
$number++;
}
}else{
echo 'Percentage id is not set!';
}
$data .= '
</table>';
echo $data;
?>
But in the console the ajax passing data will run smoothly.
I wish anybody will help me to fix this problem.

Answer 1

I read your code your showpercent.php, javascript and html and soo far and notice this
<button class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="'.$row['hidden_id'] .'" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
and check this
data-percentage_id="'.$row['hidden_id'] .'"
you're doing it wrong this is not how you put php value into html value, this will return undefined in javascript if you try to get its value so
This is why
var percentage_id = $(this).data('percentage_id');
returns undefined in javascript and php
So replace it with this
data-percentage_id="<?php echo $row['hidden_id']; ?>"
So replace your button into like this
<button class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="<? echo $row['hidden_id']; ?>" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
thanks to #Keval Mangukiya

Answer 2

try:
add this in your html
<button id="percentage_id" class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="<?=$row['hidden_id'] ?>" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
set the value of your percentage_id before getting it
add to your JavaScript with
$("#percentage_id]").data('percentage_id',loading_id); //setter
var percentage_id = $(this).data('percentage_id'); //getter