I have two files, load-request.php, and load-data.php, the delete button in load-request.php returns an undefined value when I click on the delete button to get its value. kindly advise, why I am not getting the value.
Load-request.php
<form>
<table class="table" id="main" border="0" cellspacing="0">
<tr>
<td id="table-load">
<input type="button" id="load-button" value="Load Data">
</td>
</tr>
<table class="table" width="55%">
<tr>
<td id="table-data"></td>
</tr>
</table>
</td>
</tr>
</table>
<script>
$(document).ready(function() { //ajax to load the table
$("#load-button").on("click", function() {
$.ajax({
url: "load-data.php",
type: "POST",
dataType: "text",
success: function(data) {
$("#table-data").html(data);
}
});
});
$(document).on("click", ".delete-btn", function() {
console.log($(this).find("data-id"));
var pn = $(this).attr('value');
alert(pn);
});
});
</script>
</form>
</body>
</html>
load-data.php
<?php
while ($row = mysqli_fetch_assoc($result)) {
$output .= "<tr><td>{$row["pname"]}</td><td>{$row["src"]}</td><td>{$row["dst"]}</td><td>{$row["ports"]}</td><td>{$row["inzone"]}</td><td>{$row["outzone"]}<td><button Class='delete-btn' **data-id'{$row["pname"]}**'>Delete</button></td></tr>";
}
$output .= "</table>";
echo $output;
mysqli_close($conn);
?>
It's been a while since I don't use jQuery but I can tell that if an element is not attached to the DOM at the moment that you register the event, it won't subscribe to it. So maybe after you render the data you can register the event, this way the elements will listen to it. Something like this:
$("#load-button").on("click", function() {
$.ajax({
url: "load-data.php",
type: "POST",
dataType: "text",
success: function(data) {
$("#table-data").html(data);
$(document).on("click", ".delete-btn", function() {
console.log($(this).find("data-id"));
var pn = $(this).attr('value');
alert(pn);
});
}
});
});Jquery.ajax is async by default. You can see this clearly in the Jquery.ajax documentation
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.
so to solve your issue you need to
$(document).ready(function() { //ajax to load the table
$("#load-button").on("click", function() {
$.ajax({
url: "data.php",
type: "POST",
dataType: "text",
success: function(data) {
$("#table-data").html(data);
},
async: false
});
$(document).on("click", ".delete-btn", function() {
console.log($(this));
var pn = $(this).attr('data-id');
alert(pn);
});
})
});
$(document).ready(function() { //ajax to load the table
$("#load-button").on("click", function() {
$.ajax({
url: "data.php",
type: "POST",
dataType: "text",
success: function(data) {
$("#table-data").html(data);
}
});
})
}).on("click", ".delete-btn", function() {
console.log($(this));
var pn = $(this).attr('data-id');
alert(pn);
});
$(document).ready(function() { //ajax to load the table
function myCustomListener(that) {
that.on("click", ".delete-btn", function() {
console.log($(this));
var pn = $(this).attr('data-id');
alert(pn);
});
}
$("#load-button").on("click", function() {
$.ajax({
url: "data.php",
type: "POST",
dataType: "text",
success: function(data) {
$("#table-data").html(data);
myCustomListener($("#table-data"));
}
});
})
});