AJAX is temperamental or slow when deleting from database

Question

I'm having a problem when I use AJAX to edit an SQL database through PHP. It works in effect, but you have to click the "remove" button, refresh the page to see it hasn't worked and then do the exact same thing again which then works, or sometimes just wait a few seconds before reloading the page. It seems very odd.

This is my HTML and 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>

This is my 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;

?>

Any help in figuring out why it does not work properly would be very much appreciated. Thanks

Your AJAX request is most likely asynchronous, which means that it does not wait for remote command completion to continue with local code execution. It's possible you are refreshing the page before the remote SQL transaction has actually completed. Unfortunately, I can't advise on how to modify your jQuery for synchronous AJAX because I typically avoid jQuery for something so minor; this might be helpful though http://stackoverflow.com/questions/5821380/how-to-make-a-jquery-post-request-synchronous — Dave Lasley, Feb 20 '13 at 22:24

score 0 · Answer 1 · answered Sep 22 '17 at 15:22

I think the closest function might be pointing to a different selector, I don't know which PHP or JS tool are you using to render the table data, but a good idea would be to encapsulate your JS code to map on the document ready state in case your button is not getting loaded before jQuery maps its click function.

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

AJAX is temperamental or slow when deleting from database

1 Answers1