У меня есть 2 формы, в каждой из которых JS-скрипт, один из которых загружает несколько комментариев после нажатия кнопки «Отправить», а другой скрипт отправляет комментарий.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<?php
$conn = mysqli_connect('dbserver', 'dbuser', 'dbpw', 'dbname') or die("Connection failed: " . mysqli_connect_error());
$conn->query("SET NAMES 'utf8'");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$sql = "SELECT * FROM table_name ORDER BY date ASC";
$rs_result = mysqli_query($conn, $sql);
//the following part will echo multiple individual forms, depending on the table content.
while ($row = mysqli_fetch_assoc($rs_result)) {
echo '
<form action="load_comments.php" method="POST" id="form_' . $row["id"] . '" class="load_comments_form">
<div id="result_comments_form_' . $row["id"] . '">
<!--load all comments here-->
</div>
<input type="hidden" name="identifier" value="' . $row["identifier"] . '">
<input type="hidden" name="translation_language" value="' . $row["language"] . '">
<input type="submit" name="" value="Load / refresh comments" class="load-comments">
</form>
<form action="save_comment.php" method="POST" id="save_comment_form_' . $row["id"] . '" class="comment_form">
<textarea rows="4" name="comment_content" class="textarea-comment"></textarea>
<input type="hidden" name="username" value="' . $row["username"] . '">
<input type="hidden" name="identifier" value="' . $row["identifier"] . '">
<input type="hidden" name="translation_language" value="' . $row["language"] . '">
<input type="submit" name="" value="Send" class="submit-comment">
</form>
';
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Script 1: Load all comments-->
<script>
$(document).ready(function() {
$(".form").submit(function() {
// Getting the form ID
var formID = $(this).attr('id');
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'load_comments.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
$('#result_comments_'+formID).html(data);
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
$('#result_comments_'+formID).html(error);
}
});
return false;
});
});
</script>
<!--Script 2: Save comment-->
<script>
$(document).ready(function() {
$(".save_comment_form").submit(function() {
$('<div class="changes-saved_comment">✓ Comment sent.<br>Admin has been notified.</div>').insertAfter(this).fadeOut(6000);
// Getting the form ID
var formID = $(this).attr('id');
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'save_comment.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
}
});
$('.textarea-comment').val(''); //clean textarea
return false;
});
});
</script>
</body>
</html>
Вот краткое демонстрационное руководствовидео текущего состояния:
https://streamable.com/n94sa
Как видно из видео, в настоящее время я должен нажать кнопку отправки первой формы / сценария, чтобы загрузить комментарии.Хотя кнопка отправки должна оставаться там для запуска по требованию, , но она также должна срабатывать один раз при загрузке страницы.
Второй сценарий отправляет новый комментарий.Как видно из видео, комментарии не обновляются автоматически после отправки. Так что мне нужен второй скрипт, если он успешно выполнен, чтобы инициировать отправку первой формы / скрипта.
Пожалуйста, имейте в виду, что существует несколько форм на странице, которые динамически создаются со строкой["id"] и я передаю динамически созданные параметры в оба файла .php с помощью formDetails.serialize ().
Спасибо.