问题:
I've been trying to make a table with a list of users for a school project. I'm doing this with jquery, php and mysql.
I'm retrieving all data from the mysql database and...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I've been trying to make a table with a list of users for a school project. I'm doing this with jquery, php and mysql.
I'm retrieving all data from the mysql database and printing it out in a table. now i'm trying to add an update button to i can easily update data for each specific row.
This however is not working as expected. It only selects the data from the same row. While the data-id value is different. Could anyone tell me why this is happening? I'll leave my code below for clearance
JS:
$(document).ready(function () {
$(document).on('click', '#update-btn', function () {
var id =$("[id='update-btn']").attr('data-id');
var username = $('#username').val();
var dob = $('#dob').val();
var address = $('#address').val();
$.ajax({
url: 'ajax/update.php',
method: 'POST',
data: {
ID: id,
username: username,
dob: dob,
address: address
},
success: function (data) {
if (data){
console.log(data);
swal({
title: 'Update successful',
icon: 'success',
text: 'User with ID ' + id + ' updated.'
});
setTimeout(function () {
window.location = 'medewerkers.php';
}, 5000)
}
else if (data === "update_failed"){
}
}
});
});
});
PHP:
public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('
SELECT * FROM medewerkers
');
$mysql->execute();
while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{
$html = '<tr>
<td><input type="text" value="'. $fetch['username'] .'" id="username"></td>
<td><input type="text" value="'. $fetch['dob'] .'" id="dob"></td>
<td><input type="text" value="'. $fetch['address'] .'" id="address"</td>
<td><button type="button" class="btn btn-danger" id="delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
<button type="button" class="btn btn-warning" id="update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
</tr>';
echo $html;
}
}
回答1:
The problem is because your loop is causing multiple elements to have the same id
, when id
attributes must be unique within the DOM. To fix this use common classes on the elements within the loop, then DOM traversal to find them when the button
is clicked.
public static function loadMedewerkers()
{
$mysql = Database::DBCon()->prepare('SELECT * FROM medewerkers');
$mysql->execute();
while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{
$html = '<tr>
<td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
<td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
<td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
<td>
<button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
<button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
</tr>';
echo $html;
}
}
$(document).ready(function() {
$(document).on('click', '.update-btn', function() {
var $row = $(this).closest('tr');
var id = $(this).data('id');
var username = $row.find('.username').val();
var dob = $row.find('.dob').val();
var address = $row.find('.address').val();
// ajax request here...
});
});
Note the use of data()
to retrieve the data
attribute. Also note that you could put the data-id
attribute itself on the tr
instead of each button
to DRY up the HTML slightly.
回答2:
You are using ID in your buttons when returning ID is unique for each object in the screen try using class something like this:
$(document).ready(function () {
$(document).on('click', '.update-btn', function () {
var id =$(this).data('id');
var username = $(this).closest('tr').find('.username').val();
var dob = $(this).closest('tr').find('.dob').val();
var address = $(this).closest('tr').find('.address').val();
$.ajax({
url: 'ajax/update.php',
method: 'POST',
data: {
ID: id,
username: username,
dob: dob,
address: address
},
success: function (data) {
if (data){
console.log(data);
swal({
title: 'Update successful',
icon: 'success',
text: 'User with ID ' + id + ' updated.'
});
setTimeout(function () {
window.location = 'medewerkers.php';
}, 5000)
}
else if (data === "update_failed"){
}
}
});
});
});
public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('
SELECT * FROM medewerkers
');
$mysql->execute();
while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{
$html = '<tr>
<td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
<td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
<td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
<td><button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
<button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
</tr>';
echo $html;
}
}
same goes for your delete button
and use .data() instead of attr()
Also, in other columns for getting the username, dob and address you have to use class
instead of id
.