0

当我使用 AJAX 通过 PHP 编辑 SQL 数据库时遇到问题。它有效，但您必须单击“删除”按钮，刷新页面以查看它没有工作，然后再次执行完全相同的操作，然后再工作，或者有时只需等待几秒钟再重新加载页面。这似乎很奇怪。

这是我的 HTML 和 JS

<html>
<script type="text/javascript">
$("#placeTable").on('click', 'button.remove', function(e){
    var targ = e.target;
    var id = $(targ).attr('data-id');
    bootbox.confirm("Are you sure you want to remove?", function(result) {
    if (result == true) {
            $.post('/removelocation', {lid : id}, function(){
                $(targ).closest('tr').remove();
            })
        }
    })
})
</script>
<table id="placeTable" class="table table-hover table-condensed">
    <tr>
        <th>Date</th>
        <th>Place</th>
        <th>Comments</th>
        <th>Actions</th>
    </tr>
    {% for locat in location %}
    <tr>
        <td data-id="{{locat.getID}}">{{locat.date}}<br/>{{locat.time}}</td>
        <td data-id="{{locat.getID}}">{{locat.name}}</td>
        <td data-id="{{locat.getID}}">{{locat.description}}</td>
        <td>
            <button data-id="{{locat.getID}}" class="remove btn btn-link"><i class="icon-remove"></i></button>
            <button data-id="{{locat.getID}}" class="edit btn btn-link"><i class="icon-edit"></i></button>
         </td>
    </tr>
    {% endfor %}
</table>
<div id="editmodal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
    <div class="modal-body">
        <form class="form-vertical" action="" method="POST">
            <div class="joshPad">
            <fieldset>
                <label for="logPlaceChange">Place Name</label>
                <input type="text" id="logPlaceChange" name="logPlaceChange"></input>
                <label for="logPlaceDescriptionChange">Comments</label>
                <textarea rows="3" id="logPlaceDescriptionChange" name="logPlaceDescriptionChange"></textarea>
                <label class="checkbox">
                    <input type="checkbox" name="logCurrentPlace"> Use my location</input>
                </label>
            </fieldset>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
        <a href="#" class="btn changeSubmit">Save changes</a>
    </div>
</div>
</html>

这是我的 PHP

<?php

case 'removelocation' :
    R::trash(R::load('location', $_POST['lid']));

    //I HAVE ALSO TRIED THIS TO TRASH ELEMENT AND BEFORE USING AJAX WHEN USING A SIMPLE POST FORM BOTH WORK FOR ME;

    $locationID = $_POST['lid'];
    $locat = R::load('location', $locationID);
    $usery = R::load('user', $_SESSION['user']->getID());
    R::trash($locat);
    R::dependencies(array('location'=>array('user')));
    unset($usery->ownLocation[$locationID]);
    R::store($usery);

exit;

?>

任何帮助弄清楚为什么它不能正常工作将不胜感激。谢谢

4

1 回答 1

0

我认为最接近的函数可能指向不同的选择器，我不知道您使用哪个 PHP 或 JS 工具来呈现表格数据，但一个好主意是封装您的 JS 代码以映射到文档就绪状态如果您的按钮在 jQuery 映射其点击功能之前没有被加载。

<script type="text/javascript">
    $(document).ready(function(){
        $("#placeTable").on('click', 'button.remove', function(e){
            var id = $(this).data('id');
            bootbox.confirm("Are you sure you want to remove?", function(result) {
                if (result) {
                    $.post('/removelocation', {lid : id}, function(){
                        $('#placeTable tr[data-id="'+ id +'"]').remove();
                    });
                }
            });
        });
    });
</script>
于 2017-09-22T15:22:25.647 回答