#javascript #php #mysql #ajax #pdo
#javascript #php #mysql #ajax #pdo
Вопрос:
У меня есть система, в которой я могу загружать изображения от разных пользователей. Затем каждый пользователь может получить доступ к вкладке, где он может увидеть все изображения, которые он загрузил самостоятельно. На этой вкладке пользователь также должен иметь возможность нажать на кнопку и удалить каждое изображение индивидуально.
Я изо всех сил пытаюсь заставить это работать, поэтому я надеюсь, что кто-нибудь сможет мне помочь.
Вот как выглядит моя база данных:
- таблица: рисунки, строки:
- Описание изображения
- ID
- imageFullNamePicture
- Заголовок изображения
- идентификатор пользователя
- таблица: пользователи, строки:
- пользовательская почта
- user_id
- имя_пользователя
- user_password
- user_phone
- пользователь_zip
Это мой код:
DBH.INC.PHP
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chhoe17";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname",
$username,
$password,
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(PDOException $e) {
echo $e->getMessage();
}
UPLOAD.PHP
<?php
include_once 'header.php';
include_once "includes/dbh.inc.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="main-container">
<div class="main-wrapper">
<h2>Manage your pictures</h2>
<?php
//display a message and images if logged in!
if (isset($_SESSION['u_id'])) {
echo "Upload your pictures";
echo '<div class="picture-upload">
<h2>Upload</h2>
<br>
<br>
<br>
<form action="upload.inc.php" id="upload" method="POST" enctype="multipart/form-data">
<input type="text" name="filetitle" placeholder="Image title">
<input type="text" name="filedesc" placeholder="Image description">
<input type="file" id="file" name="file">
<button type="submit" name="submit">Upload</button>
</form>
</div>';
}
if (isset($_SESSION['u_id'])) {
echo ' <section class="picture-links">
<div class="wrapper">
<h2>Pictures</h2> ';
?>
<div id="pictures">
<?php
$sql = "SELECT * FROM pictures WHERE userid = '{$_SESSION['u_id']}'";
//$sql = "SELECT * FROM pictures ORDER BY userid DESC LIMIT 20;";
$stmt = $conn->prepare($sql);
$stmt->execute();
$pictures = $stmt->fetchAll();
// if ($pictures !== null) {
foreach ($pictures as $pic) {
?>
<li>
<figure id="<?php echo $pic['id']; ?>">
<b>
<figcaption><?php echo $pic["titlePicture"] ?>
<img src=<?php echo $pic["imageFullNamePicture"] ?>>
<?php echo $pic["descPicture"] ?> <br>
</figure>
</li>
<span><input type="submit" id="del_btn" value="Delete Image" /></span>
<script type="text/javascript">
$(document).ready(function() {
$("input#del_btn").click(function() {
$.ajax({
type: "POST",
url: "delete.php", //
data: {
id: <?php echo $delid; ?>
},
success: function(msg) {
alert("Your picture has been deleted");
},
error: function() {
alert("failure");
}
});
});
});
</script>
<?php
}
}
?>
</div>
</div>
</section>
</body>
</html>
<?php
include_once 'footer.php';
?>
DELETE.PHP
<?php
include_once "includes/dbh.inc.php";
if (isset($_POST['id'])) {
$picID = $_POST['id'];
$sql = "DELETE FROM pictures WHERE id=?";
$stmt = $conn->prepare($sql);
$stmt->execute(array($picID));
}
?>
Как и сейчас, ничего не происходит, когда я нажимаю кнопки удаления, прикрепленные к изображениям, и я также не получаю никаких предупреждений. Я был бы очень признателен за любую помощь, которую кто-нибудь мог бы предоставить для выполнения этой работы.
Комментарии:
1. там масса кода, и довольно сложно расшифровать, что есть что, но, судя по всему, вы повторяете разделы HTML в цикле — эти повторяющиеся разделы html содержат дублированные идентификаторы, которые недопустимы. Javascript прослушивает один такой идентификатор, но также кажется, что код прослушивателя событий также находится в цикле??
Ответ №1:
Вы повторно используете id значения, поэтому, когда ваш селектор jQuery выполняет, какой элемент он должен найти? Кроме того, вы снова и снова повторяете обработчик кликов на стороне клиента в своем цикле. Все это можно упростить.
Используйте class для идентификации вашей кнопки «удалить» и поместите соответствующую id в атрибут данных:
<button type="button" class="del_btn" data-id="<?php echo $delid; ?>">Delete Image</button>
Затем позже, вне цикла, создайте единый обработчик событий, который будет прослушивать все кнопки и использовать их data-id для выполнения AJAX-запроса:
$('input.del_btn').on('click', function() {
let id = $(this).data('id');
$.post('delete.php', { id: id })
.done(function () {
alert('Your picture has been deleted');
})
.fail(function () {
alert('failure');
});
});