У меня странная проблема!В настоящее время я публикую данные с помощью Ajax, и он работает нормально, он публикует данные и обновляет их как следует.Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопку «отправить» в текстовой области в модальном режиме, которая отправляет новые инструкции, текст не покидает текстовую область, как должен делать текст сообщения, но он отправляет значения через ajax.как я хочу ..
Это текстовая область в модале с инструкциями имени, которые меня интересуют.Так что мне интересно, почему текст не исчезнет, когда он будет опубликован.Аякс работает как надо .. Что не так?
Вот мой первый html
<div class="container">
<div class="row">
<div class="headlineBox">
<h2 class="headlineTodo text-light"> ToDo list Application PHP and Mysql Database</h2>
</div>
</div>
<div class="d-flex justify-content-center createMargin">
<form method="post" action=" " class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Todo</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
</div>
<input type="text" name="toDo" class="form-control" id="todoTask" placeholder="Add things to do">
</div>
<button type="submit" name="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
<div class="row justify-content-center">
<table>
<tr>
<th></th>
<th>ToDo task</th>
<th>Add instructions</th>
<th>time Created</th>
<th>Delete task</th>
</tr>
Первый код php
<?php
$stmt = $pdo->query("SELECT * FROM todo");
$todo = $stmt->fetchAll();
// skapa en tabell
foreach($todo as $task) {
echo "<tr>";
echo '<td><label class="toDoCheckBox">';
echo "<td>".$task['toDo']."</td>";
echo "<td><a href='#testmodal'class='connect_modal' data-toggle ='modal' data-target='#testmodal' data-title ='".$task['toDo']."' data-id='".$task['id']."'>Add</a></td>";
echo "<td>".date("Y-m-d",$task['timestamp'])."</td>";
echo "<td><a href='addToDo.php?id=".$task['id']."'>Ta bort</a></td>";
echo "</tr>";
}
?>
</table> // end table
</div>
<div class="modal fade" id="testmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Todo instructions for</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="confirmUpdate"></div>
<div class="listInstructions">
<table id="showInstructions">
<tr>
<th>Instructions</th>
</tr>
<!--<td><div id="showInstructions"></div></td>-->
</table>
<button id="closeInstruction" class="btn btn-secondary">Close</button>
</div>
<div class="modal-body">
<textarea name="instructions" class="form-control" id="instructionsText" style="min-width: 100%;"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" id="showList">Show instructions</button>
<button class="btn btn-primary" id="submitInstructions">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#showList").click(function(){
$(".listInstructions").show();
});
$("#closeInstruction").click(function(){
$(".listInstructions").hide();
});
var instructionsModal = $('#testmodal'), // The modal
showInstructions = $('#showInstructions'), // The Div where we want to show the instructions
instructionsText = $('#instructionsText'), // ID to the textarea
submitInstructions = $('#submitInstructions'),// Button in the Text area
ModalLabel = $('#ModalLabel');
instructionsModal.on('show.bs.modal', function (e) {
var target = $(e.relatedTarget),
todoId = target.data('id'),
taskName = target.data('title'); // The uniqe id to todo instruction column
submitInstructions.attr('data-id', todoId); // Button ID
ModalLabel.html("#ID " + todoId + " " + taskName);
$('#modalElement').data('modal', null);
$.ajax({
url:"fetchTodoDetails.php",
method: "POST",
data:{todoId:todoId, status:"select"},
dataType:"JSON",
success:function(data)
{
var st = "";
$.each(data, function(index){
st += "<tr><td>"+data[index]+"</td>";
});
$("#showInstructions").html(st);
//showInstructions.html(data);
}
})
});
submitInstructions.on('click', function (e) {
var todoId = submitInstructions.attr('data-id'),
newInstruction = instructionsText.val();
console.log(todoId);
$.ajax({
url:"fetchTodoDetails.php",
method: "POST",
data:{todoId:todoId, status:"update", newInstruction:newInstruction},
dataType:"JSON",
success:function(data)
{
showInstructions.html(data.test);
}
})
});
});
</script>
Вот php, куда я отправляю свой ajax
<?php
require_once('dbconfig.php');
/// Selects all the instructions and shows them in the textarea
if($_POST['status'] == "select") {
if(isset($_POST['todoId']) && is_numeric($_POST['todoId'])) {
$id = $_POST['todoId'];
$stmt = $pdo->prepare("SELECT instructions FROM todo WHERE id=?");
$stmt->execute([$id]);
$instructions = $stmt->fetch();
$getInstructions = explode(";",$instructions['instructions']);
echo json_encode($getInstructions);
}
else {
echo "Something went wrong";
}
}
if($_POST['status'] == "update") {
if(isset($_POST['todoId'])) {
$updateId = $_POST['todoId'];
$addInstruction = trim($_POST['newInstruction']);
$array = [
'test' => "Ny instruktion är tillagd",
'checkId' => $updateId
];
$stmt = $pdo->prepare("UPDATE todo SET instructions = concat(instructions, ';', :newInstructions) WHERE id = :id");
$stmt->execute( array('newInstructions' => $addInstruction, 'id' => $updateId));
echo json_encode($array);
}
}