запуск AJAX для удаления записи при нажатии на якорь

Question

Я новичок в jquery и ajax, но я только что узнал, как разместить форму с помощью jquery ajax и сохранить ее, теперь у меня есть список записей в таблице в моем шаблоне, что-то вроде этого: 1001 *

field1  field2  field3 <a href="#" id="rec1">del</a>
field1  field2  field3 <a href="#" id="rec2">del</a>
field1  field2  field3 <a href="#" id="rec2">del</a>
...

Теперь я хочу удалить запись, кликнув по ее тегу привязки.

Edit: эти записи уже были вставлены в базу данных с использованием ajax и сразу были показаны в этом формате в таблице, теперь я собираюсь удалить каждую запись, щелкнув по anchor с помощью ajax.

как это:

field1  field2  field3 <a href="#" id="rec2" onClick="f({{id}})">del</a>

как я могу это сделать?

Answer 1

попробую

first : вам нужно иметь представление django для удаления выбранного элемента

секунда : определите шаблон в вашем файле url, который указывает на это представление, скажем

(r'^delete/(\d{4})/$', 'delete_item'),

тогда ваш javascript должен выглядеть примерно так:

function deleteAjax(item_id){
$.ajax({
    url: "delete/"+ item_id +"/",
    data: <the id of the record you want to delete>,
    success: function(){
        //here you do the processing needed to remove the row from the html;
    }
});
}

Ваш HTML должен измениться:

<a id="{{id}}" onclick="deleteAjax({{id}}); return false;"> delete item </a>

событие click активирует javascript (deleteAjax) и вызовет правильное представление (django), отправив ему идентификатор удаляемого элемента

только несколько вещей, на которые стоит обратить внимание:

• представление django должно обрабатывать правильный ответ, так как оно определит, какой обратный вызов будет вызван в конце его выполнения (это та часть ajax "success: function ...", вы также можете иметь ошибку : функция)

• в функции успеха вы должны запомнить, чтобы удалить строку таблицы, соответствующую удаленному элементу (в случае успеха при удалении), или вы должны уведомить (в случае неудачи)

last: теперь я не уверен насчет того параметра «data», который вы отправляете в функции ajax, поскольку идентификатор удаленного элемента привязан к URL-адресу. Тем не менее, вы можете использовать это, чтобы отправить все, что вам в конечном итоге понадобится

Answer 2

Это будет что-то вроде onClick = "$ (this) .closest ('tr'). Remove ()"

Предполагается, что это фактическая таблица, как вы сказали, что у вас есть html как этот

<table><tr><td/><td/></tr></table>

Answer 3

@ Самуэле это сработало!: D

tnx, теперь звучит так, будто моя функция успеха не работает:

function f(id) {
                $.ajax({
                    url: "/meeting/delParticipant/"+id+"/",
                    type: "POST",
                    data: {'id':id},
                    success: function(res){
                        alert ('success');
                        $(this).closest('tr').remove();
                    }
                });
            };

Я собираюсь удалить строку в таблице, я использовал оповещение, чтобы проверить ее, и яЯ уверен, что успех не проходит!