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">×</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
