2013-02-20 2 views
0

У меня проблема, когда я использую AJAX для редактирования базы данных SQL через PHP. Он работает, но вы должны нажать кнопку «удалить», обновить страницу, чтобы увидеть, что она не сработала, а затем повторить то же самое, что затем работает, или просто просто подождать несколько секунд, прежде чем перезагружать страницу. Кажется очень странным.AJAX является темпераментным или медленным при удалении из базы данных

Это мой 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; 

?> 

Любая помощь в выяснить, почему он не работает должным образом будет очень высоко ценится. Спасибо

+0

Ваш запрос AJAX скорее всего асинхронен, а это означает, что он не ждет завершения удаленной команды для продолжения локального выполнения кода. Возможно, вы обновляете страницу до того, как удаленная транзакция SQL действительно завершилась. К сожалению, я не могу посоветовать, как изменить jQuery для синхронного AJAX, потому что я обычно избегаю jQuery для чего-то такого незначительного; это может быть полезно, хотя http://stackoverflow.com/questions/5821380/how-to-make-a-jquery-post-request-synchronous –

+0

@ Дэйв очень благодарен, я отдам его. – Josh

ответ

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> 
Смежные вопросы