FloppyFormator
@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 не пугает, просто любопытно, какой из способов адекватнее.
  • Вопрос задан
  • 5581 просмотр
Пригласить эксперта
Ответы на вопрос 7
можно сделать в форме кучу кнопок типа submit с разными именами, серверу будет передано name нажатой кнопки…
Ответ написан
@IlVin
Самый простой в реализации способ — первый, самый дружелюбный к пользователю — последний.
Только последний способ делать надо так:
а) «дизаблим» удаляемую запись (чтобы несколько раз не нажали)
б) отправляем AJAX запрос на сервер
в) получаем ответ сервера
г) анализируем ответ сервера
д) удаляем удаленную на сервере запись со страницы
Ответ написан
Комментировать
@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-ом кнопку надо прятать или дисаблить.
Ответ написан
Комментировать
@egorinsk
Проблема в ИЕ решается заменой button на input typr=submit. Адекватнее сделать сначала удаление через POST формы, потом, если есть время, добавить аяксовое удаление и восстановление записей (надеюсь, вы уже не делаете confirm('А вы точно нажали на кнопку «Удалить»?')).
Ответ написан
taliban
@taliban
php программист
some/site/list/delete?id=4 + редирект назад в список уже не кошерно? Без поста обычным гетом уже никуда?
Ответ написан
super
@super
Зачем устраивать такие сложности? Самый логичный, правильный и простой способ в вашем случае это как написано выше — использовать GET, а не POST:
<li>
     Элемент 1
    <a href="...">Удалить</a>
</li>
<li>
     Элемент 2
    <a href="...">Удалить</a>
</li>
Ответ написан
taliban
@taliban
php программист
Почему никто про чекбоксы не сказал? Это же удобней чем удалять поодному.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы