Symfony 3/4: удалить строку таблицы из базы данных через AJAX

Question

Я немного застрял в своем коде Symfony.

Позвольте мне объяснить ,

В моей базе данных есть таблица со списком задач, содержащая:

• Идентификатор называется: id
• Поле имени называется: todo
• и еще 3 поля, которые не имеют значения: "завершено "," созданный_ат "," обновлен_ат ".

---

Прежде чем идти дальше: вот мои коды ,

Соответствующий контроллер :

  /**
 * @Route("/todos/delete/{id}", name="todo.delete", methods={"POST"})
 * @param Todo $todo
 * @param ObjectManager $manager
 * @param Request $request
 * @return \Symfony\Component\HttpFoundation\RedirectResponse
 */
public function delete(Todo $todo, ObjectManager $manager, Request $request)
{
    $manager->remove($todo);
    $manager->flush();

    if ( $request->isXmlHttpRequest()) {
        return $this->redirectToRoute('todo.home', [
            'id' => $todo->getId()
        ]);
    }
    throw $this->createNotFoundException('The todo couldn\'t be deleted');
}

Вид :

{% extends 'base.html.twig' %}

{% block title %}Todos{% endblock %}

{% block content %}
<br>
<form action="{{ path('todo.create') }}" method="post">
    <input type="hidden" name="token" value="{{ csrf_token('todo-create') }}"/>
    <label for="todo">Todo</label>
    <input type="text" id="todo" name="todo" class="form-control input-group-lg" placeholder="Create a new todo">
</form><br>
{% for todo in todos %}
    {{ todo.todo }}
    <a href="{{ path('todo.update', {'id': todo.id}) }}" class="btn btn-info btn-sm">Update</a>
    <a href="{{ path('todo.delete', {'id': todo.id}) }}" class="btn btn-danger btn-sm js-delete-todo" id="{{ todo.id }}">x</a>
    {% if todo.completed %}
        <a href="{{ path('todo.completed', {'id': todo.id}) }}" class="btn btn-success btn-sm">Completed !</a>
    {% else %}
        <a href="{{ path('todo.completed', {'id': todo.id}) }}" class="btn btn-warning btn-sm">Mark as completed</a>
    {% endif %}
    <hr>
{% endfor %}
{% endblock %}

Мы фокусируемся на :

<a href="{{ path('todo.delete', {'id': todo.id}) }}" class="btn btn-danger btn-sm js-delete-todo" id="{{ todo.id }}">x</a>

JavaScript :

$(document).ready(function () {
$('.js-delete-todo').on('click', function (e) {
    e.preventDefault();

    var url = $(this).attr('href');
    delTodo(url);

    function delTodo(url) {
        $.ajax({
            type: "POST",
            url: url
        }).done(function (data) {
            $('#id').remove();
        }).fail(function () {
            alert('Could not be deleted');
        });
     }
  });
});

На самом деле ,

Кажется, все работает: POST ajax-запрос и удалите строку из моей таблицы в моей базе данных.

Единственная проблема заключается в том, что мне нужно нажать F5, чтобы увидеть его.

Как я могу заставить его работать без перезагрузки страницыи не нажимать горячую клавишу F5?

Answer 1

В вашем коде Symfony вы должны вернуть формат JSON, например здесь .Оберните свою задачу в контейнер, подобный этому

{% for todo in todos %}
  <div id="todo-{{todo.id}}">
    // your todo staff here 
  </div>
{% endfor %}

Затем измените свой javascript на

function delTodo(url) {
    $.ajax({
        type: "POST",
        url: url
    }).done(function (data) {
        var id = JSON.parse(data).id;
        $('#todo-' + id).remove();
    }).fail(function ()
        alert('Could not be deleted');
    });
 }