使用ajax添加和删除
I'm trying to add and delete data to the database using ajax and php.
Everything works nice. But the problem is if I delete the last item and then try to add a new one, only the first one can be added, the second one, third one... are also added to the databse, but they are not shown on the page. I can see those only when I refresh the page.
My code for delete and add :
Add :
<!--Dodavanje texta-->
<script type="text/javascript">
//Dodavanje texta
$(document).ready(function () {
$(document).on("click", "#btnAddText", function(e){
var title = $("#txtTitle").val();
var text = $("#txtText").val();
$.ajax({
url : "add-text.php",
type : "POST",
dataType:"json",
data : {title:title, text:text},
beforeSend: function(){
$("#btnAddText").text("Saving...");
},
success: function(msg){
if(msg.br_rez == 1){
$(".sadrzaj").append(msg.result);
$("#natpisPrazno").fadeOut(300);
$("#txtTitle").val("");
$("#txtText").val("");
$("#btnAddText").text("Save");
$("#brRez").text(msg.br_rez);
}else{
$("#example1").append(msg.result);
$("#txtTitle").val("");
$("#txtText").val("");
$("#btnAddText").text("Save");
$("#brRez").text(msg.br_rez);
}
},
error: function(){
$("#error").text("Error! Something is wrong, the text is not saved!").fadeIn(300);
}
});
e.preventDefault();
});
});
</script>
Delete :
<!-- Brisanje texta -->
<script type="text/javascript">
$(document).ready(function() {
//Brisanje texta
$(document).on("click", ".btnDelText", function(){
var cijeliID = this.id.split("-");
var id = cijeliID[1];
$.ajax({
url : "text-delete.php",
type: "POST",
data : {id : id},
beforeSend: function(){
$("#delText-"+id).text("Deleting...");
},
success: function(msg){
if(msg){
if(msg == 0){
$(".divSadrzaj").fadeOut(300);
$("#natpisPrazno").addClass("alert-warning");
$("#natpisPrazno").fadeIn().html("Er zijn nog geen texten!");
}else{
$("#textItem-"+id).fadeOut(800);
$("#brRez").text(msg);
}
}else{
$("#errorDel").addClass("btn-danger");
$("#errorDel").text("Something was wrong!");
}
},
error: function(){
$("#errorDel").addClass("btn-danger");
$("#errorDel").text("Something was wrong!");
}
});
});
});
</script>
And the table where the databse data is shown is :
<div class="content">
<!-- Main row -->
<div class="row">
<div class="col-md-12 sadrzaj">
<?php
$rez = mysqli_query($kon, "SELECT * FROM texts");
$brRez = mysqli_num_rows($rez);
if($brRez < 1){
echo "<div class=\"alert alert-warning\" role=\"alert\" style=\"text-align:center;\">
Er zijn nog geen texts!
</div>";
}else{
echo "<div id=\"natpisPrazno\" class=\"alert\" role=\"alert\" style=\"text-align:center;\">
</div>";
?>
<div class="box divSadrzaj">
<div class="box-title">
<h3>Totaal texts - <span id="brRez"><b><u><?php echo $brRez; ?></u></b></span></h3>
</div><!-- /.box-title -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Text</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<?php
while($red = mysqli_fetch_assoc($rez)){
echo "<tr id=\"textItem-". $red["id"] ."\">
<td style=\"text-align:center;\">". $red["id"] ."</td>
<td style=\"text-align:center;\">". $red["title"] ."</td>
<td style=\"text-align:center;\">". $red["text"] ."</td>
<td style=\"text-align:center;\">
<a class=\"btn btn-danger btn-sm btnDelText\" title=\"". $red["title"] . "-wissen\" id=\"delText-". $red["id"] ."\">
<i class=\"fa fa-trash-o \"></i>
</a>
<a class=\"btn btn-success btn-sm\" title=\"". $red["title"] . "-veranderen\" >
<i class=\"fa fa-pencil-square-o\"></i>
</a><br/><br/>
<div id=\"errorDel\"></div>
</td>
</tr>";
}
?>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Title</th>
<th>Text</th>
<th>Acties</th>
</tr>
</tfoot>
</table>
</div>
</div><!-- /.box -->
<?php
}
?>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
Thus everything works great if there is no data in the database and I try to add a new one, it is added to the database and shown on the page. The first one, second one..every record is added and shown. Then when I try to delete it, it works also very nice.
Only when I delete the last record, then I can add only one new record that is shown on the page. The second one is also added to the database but it is not shown on the page until I refresh the page.
Any ideas? Thanks.
UPDATE
When I add $(".sadrzaj") to the console I get :
When I add $(".sadrzaj").append('test'); to the cosole I get (it is shown):
When I try to add a new record, I get next response (exactly what I need to get, table row to append to the table, but it is not shown)
And then when I refresh the page I get it right :
