Как удалить элементы из списка?

Question

[FloppyFormator]

Коллеги, а поделитесь кто как предпочитает реализовать удаление из списка? Поясню на примере:

...
<li>
     Элемент 1
    <button type="submit">Удалить</button>
</li>
<li>
     Элемент 2
    <button type="submit">Удалить</button>
</li>
...

Требуется, чтобы по нажатию кнопки «удалить» на сервер уходил POST-запрос с необходимыми параметрами: соответствующий action для формы, ID удаляемой записи (той, напротив которой кнопка) и т. п. Варианты решения:

• Делать форму вокруг каждой кнопки
• Дать имя и значение каждой кнопке «удалить»
• Сделать скрытую форму где-нибудь вне списка, заполнять атрибуты через JS и вызывать submit()
• Формировать POST аяксом

Все варианты с недостатками. Первый слишком громоздкий. Второй, вроде, самый адекватный, но IE в качестве значения submit'а посылает слово «Удалить» вместо поля value. Остальные варианты отправляют отдыхать клиентов без JS. В целом, требование к JS не пугает, просто любопытно, какой из способов адекватнее.

Answer 1

[Виталий Перетятько]

можно сделать в форме кучу кнопок типа submit с разными именами, серверу будет передано name нажатой кнопки…

Comments

[FloppyFormator]

Типа remove_item_15? Согласен, можно и так.

[Сергей Береснев]

можно и remove[15]

Answer 2

[IlVin]

Самый простой в реализации способ — первый, самый дружелюбный к пользователю — последний.
Только последний способ делать надо так:
а) «дизаблим» удаляемую запись (чтобы несколько раз не нажали)
б) отправляем AJAX запрос на сервер
в) получаем ответ сервера
г) анализируем ответ сервера
д) удаляем удаленную на сервере запись со страницы

Answer 3

[werdender]

Мой вариант (jquery для читабельности):

<li>
     Элемент 1
    <button onclick="return del('element_id_here');">Удалить</button>
</li>

<script>
function del(id) {
        $.post('/ajax/url', {element_id: id, token: 'csrf_token'}, function(response) {
            var json = $.parseJSON(response);
            if(json.success === 'ok') {
               // если все ок
            }
            if(json.success === 'error') {
                    alert(json.message); // если все не ок
            }
        });
        return false;
}
</script>

Я не яваскпритист — понимаю что джедаи все сделали бы сильно круче, но если бы мне в своем бложике приспичило бы — как-нибудь так и сделал бы (хотя над аяксом лучше бы сделать обертку, чтобы руками каждый раз ошибки не обрабатывать и т.д.). Еще наверное бы сделал вместо button ссылку (вид кнопки ей можно стилями придать), в href которой был бы урл на страницу удаления для юзеров без яваскрипта.

Ну и перед POST-ом кнопку надо прятать или дисаблить.

Answer 4

[egorinsk]

Проблема в ИЕ решается заменой button на input typr=submit. Адекватнее сделать сначала удаление через POST формы, потом, если есть время, добавить аяксовое удаление и восстановление записей (надеюсь, вы уже не делаете confirm('А вы точно нажали на кнопку «Удалить»?')).

Comments

[egorinsk]

А, и естественно, у каждой кнопки должен быть уникальный name, чтобы различить их на сервере, например button_delete[1], button-delete[2] и т.д.

Answer 5

[Анатолий]

some/site/list/delete?id=4 + редирект назад в список уже не кошерно? Без поста обычным гетом уже никуда?

Comments

[FloppyFormator]

Ещё как некошерно :) Если сомневаетесь, представьте этот адрес в атрибуте src у картинки.

[Анатолий]

Какой срц? Какой краулер? Вы не проверяете доступ перед тем как удалить что-то? Вы пускаете ботов в админку которые ходят по всем ссылкам? О.О Вы вообще точно сайты делаете или поделки?

[Анатолий]

Для особо параноиков добавьте перед каждой строкой чекбокс и одну форму на удаление с одной кнопкой.

[Анатолий]

SelenIT2, нахрен идут автопроверяторы в админке =) Это не клиентская часть где куча перекрестных ссылок, это админка где на страницу с десяток ссылок и все стандартные (список/ добавить/ удалить/ изменить/ бла-бла/ меню)

[Анатолий]

«менять состояние базы на сервере гетом мне даже в страшном сне не приходила»
Что может случиться если будет гет вместо поста? «краулер» не в счет.

[Анатолий]

Тоесть ничего не случится, но нужно всеравно пост делать? Или таки случится что-то плохое при гете?

[Анатолий]

<a class="delete" href="delete.php" data-id="2">delete</a>
...
<script>
$(document).delegate('a.delete', 'click', function(){ 
    this.src += '?id=' + this.getAttribute('data-id');
});
</script>

Дело не в методе, дело в подходе. Мне нравится гет, он прост, он удобен. Если я хочу защитить его, я смогу это сделать. _особенно_ от ботов. От людей нужно защищать код а не от ботов, они более разрушительны.

[denver]

Извините, я встряну :) taliban, во-1, наверное слышал про CSRF, но недооценил: можно точечно или коврово грохнуть неприятелю (с правами админа) данные в его админке, попросив/вынудив его зайти на старницу с <img src="his/site/list/delete?id=4"/>, во-2, ну не краулер это будет, а умный браузер/плагин/экстеншн/прокси/да всё что угодно которое будет упреждающе кэшировать все ссылки, чтобы сделать мгновенным переход по ним.

[FloppyFormator]

Ну для защиты от CSRF надо передавать уникальный токен, который не должен быть известен злоумышленнику, однако в GET его передавать, опять же, небезопасно — токен в строке запроса будет логгироваться и кэшироваться в разных немыслимых местах, т. к. очень много кто считает, что в этом нет ничего страшного.

[Анатолий]

Теоретически и жить страшно, ибо машина может сбить, поэтому через дорогу переходить не стоит. А на практике все работало, работает и будет работать.
Если я могу вас вынудить зайти на старницу с <img src=«his/site/list/delete?id=4»/> то элементарно могу вынудить там же сделать пост в айфрейм, даже без вашего ведома. Это так, между прочим.

[denver]

Конечно post сам по себе не защищает, нужен еще полуслучайный токен. Да всё это rule of thumb, как вместо <u onclick="window.location=google.com">link<u> следует пользоваться <a href="google.com">link<a> даже если результат одинаков.

Answer 6

[super]

Зачем устраивать такие сложности? Самый логичный, правильный и простой способ в вашем случае это как написано выше — использовать GET, а не POST:

<li>
     Элемент 1
    <a href="...">Удалить</a>
</li>
<li>
     Элемент 2
    <a href="...">Удалить</a>
</li>

Comments

[Анатолий]

тсссс, это же еретические наклонности, ща вас негодного растерзают

Answer 7

[Анатолий]

Почему никто про чекбоксы не сказал? Это же удобней чем удалять поодному.