使用ajax添加和删除

时间:2015-11-12 13:06:11

标签: php jquery mysql ajax

我尝试使用ajaxphp向数据库添加和删除数据。

一切都很好。但问题是如果我删除最后一项然后尝试添加新项目,只能添加第一项,第二项,第三项......也会添加到数据库中,但它们不会显示在数据库中页。我只有在刷新页面时才能看到它们。

我的删除和添加代码:

添加:

<!--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>

删除:

<!-- 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>

显示数据库数据的表是:

<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>

因此,如果数据库中没有数据并且我尝试添加新数据,那么一切都很有效,它会添加到数据库并显示在页面上。第一个,第二个..每个记录都被添加并显示。然后,当我尝试删除它时,它也非常好用。

只有当我删除最后一条记录时,我才能只添加一条页面上显示的新记录。第二个也被添加到数据库中,但在刷新页面之前它不会显示在页面上。

有什么想法吗?感谢。

更新

当我将$(&#34; .sadrzaj&#34;)添加到控制台时,我得到:

enter image description here

当我添加$(&#34; .sadrzaj&#34;)。追加(&#39; test&#39;);我得到的cosole(显示):

enter image description here

当我尝试添加新记录时,我得到下一个响应(正是我需要得到的,表行要附加到表中,但是没有显示)

enter image description here

然后当我刷新页面时,我做对了:

enter image description here

0 个答案:

没有答案