Блог

Главная - Вопросы по программированию - AJAX удаляет строку таблицы без перезагрузки страницы после успешного удаления из базы данных

AJAX удаляет строку таблицы без перезагрузки страницы после успешного удаления из базы данных

#php #ajax #row

#php #ajax #строка

Вопрос:

У меня есть таблица, которая заполняется с помощью AJAX. Каждой строке таблицы присваивается идентификатор, основанный на идентификаторе записи в моей базе данных. Под таблицей находятся 3 кнопки: СОЗДАТЬ, РЕДАКТИРОВАТЬ и УДАЛИТЬ.

Когда я выбираю строку, я устанавливаю идентификатор данных кнопки УДАЛЕНИЯ на идентификатор выбранной строки. Когда я нажимаю УДАЛИТЬ, мой вызов AJAX продолжает удалять все записи из моей базы данных, которые имеют идентификатор данных кнопки УДАЛЕНИЯ.

Все это работает отлично. После того, как все сделано, я получаю предупреждение о том, что данные были удалены. И это здорово.

Мой вопрос: в разделе If (data == 1) моего AJAX-вызова, как мне удалить строку, fade out, из таблицы без обновления страницы, как я должен сделать сейчас.

Вот мой index.html код

 <div class="container-fluid inputwrapper">
    <table id="workRequests" style="width: 100%;">
       //table is filled by ajax call to db below is an example of the format
       <tr class="table__row" id="124108" onclick="highlight_row()">
          <td class="table__content" data-heading="Number">124108</td>
          ....
      </tr>
    </table>
</div>
<div class="container-fluid">
<div class="row center-block">
<div class="text-center col-sm-2 col-sm-offset-0" style="float: left;">amp;nbsp;</div>
<div class="text-center col-sm-8" style="float: left;">
<button style="margin-right: 10px;" type="button" class="btn btn-default" id="wopnew" onClick="createNew()">New</button>
<button style="margin-right: 10px;" type="button" class="btn btn-default" disabled id="wopedit" onClick="editFile()">Edit</button>
<button  type="button" class="btn btn-default" data-id="0"  id="wopdelete">Delete</button>
</div>
<div class="text-center col-sm-2 col-sm-offset-0" style="float: left;">amp;nbsp;</div>
</div>

Вот мой вызов AJAX.
Я новичок в программировании, и из того, что я вижу, когда я перехожу к функции в моем браузере — элемент var устанавливается на кнопку УДАЛЕНИЯ data-id, поэтому, когда мы переходим к успешной части и data == 1, ничего не происходит, поскольку он сосредоточен на кнопке УДАЛЕНИЯ, а не на таблицеСтрока.

Я попытался изменить элемент на идентификатор моей таблицы, но это тоже не работает.

 <script>
$(document).on("click","#wopdelete",function(){  
    if (confirm("Are you sure you want to delete this Record?  It can NOT be recoverd!!")) { 
        
        var id = $(this).data('id');  
        var element = this;  
        $.ajax({  
            url :"./scripts/delRecord.php",  
            type:"POST",  
            cache:false,  
            data:{deleteId:id},  
            success:function(data){  
                if (data == 1) {  
                    $(element).closest('tr').fadeOut(400, function(){
                        $(this).remove();
                    });
                     
                    alert("User record deleted successfully");       
                }else{  
                    alert("Record did not delete properly!");  
                }  
            } 
        });  
    }  
});  
</script>

Комментарии:

1. Попробуйте с var element = $(this).closest('tr'); помощью , затем в success: element.fadeOut(400... в функции fadeOut hander: element.remove(); .

2. Кроме того, вместо поиска по ней closest , вы можете удалить ее по its id="124108" . Я предполагаю, что он должен быть уникальным на всей странице.

3. Предложение @biesior тоже хорошо. Я не обращал внимания на строки id , я больше думал о потенциальном идентификаторе кнопки.

4. Однако я бы немного изменил его, чтобы сделать его еще более уникальным, например, т.Е. workrequest_124108 В противном случае вы рискуете, что когда-нибудь столкнетесь с другим 124108 идентификатором, который будет comment_124108 т.е. Конечно, этого нет в вашем коде, но иногда полезно «подумать о будущем`.

5. Paul -> Я попробовал, как вы предложили, $(this).closest(‘tr’); но «это» по-прежнему ссылается на кнопку «УДАЛИТЬ».