Как я могу динамически создать кнопку удаления для объекта rails, используя Javascript?

Question

У меня есть скрипт для динамического отображения индекса элементов на странице при нажатии кнопки «показать», но когда я пытаюсь добавить новую кнопку, чтобы удалить каждый показанный объект, он выдает ошибку, которую я не могу устранить.Вот весь сценарий:

<script type="text/javascript" charset="utf-8">
    $(function() {
      $(".js-view-decks").on("click", function() {
        var id = $(this).data("id");
        $.get("/users/" + id + "/decks.json", function(data) {
          var complete = ""
          data.forEach(function(deck) {

            const markup = `
            <fieldset>
              <legend><h4> ${deck.name}

              <%= button_to "View Details", "/users/${deck.user_id}/decks/${deck.id}/", method: "get", form: { style: "display:inline-block"} %>
              <%= button_to "Edit", "/users/${deck.user_id}/decks/${deck.id}/edit", method: "get", form: { style: "display:inline-block"} %>
              <%= button_to "Delete", "/users/${deck.user_id}/decks/${deck.id}/", type: "POST", data: {"_method":"delete"}, form: { style: "display:inline-block"} %>
              </h4></legend>

              <p>
                <%= "Format: ${deck.format}" %> <br/>
                <%= "Cards: ${deck.deck_cards.length}" %>
              </p>
            </fieldset>
            `
            complete += markup
          });
            $("#user_decks").html(complete)
        });
      });
    });
  </script>

Я получаю следующую ошибку:

bad URI(is not URI?): /users/${deck.user_id}/decks/${deck.id}/

Динамически созданные кнопки «Просмотр сведений» и «Редактирование» работают нормально, но удалениеКажется, у кнопки по какой-то причине возникла проблема с URL, и я не могу понять, почему, какие-либо предложения?

Редактировать: Кажется, возникла проблема при попытке использовать помощник по рельсам для генерации кнопки удаления.Генерация кнопки вручную с помощью формы, кажется, работала следующим образом:

<form method='post' action='/users/${deck.user_id}/decks/${deck.id}' data-remote='true' form={ style="display:inline-block"}>
                 <input name='_method' value='delete' type='hidden' />
                 <input value='Delete' type='submit' />
               </form>

Answer 1

Да, если поменять его на сообщение, оно сломается так же, как и третья кнопка

Ах, мы на что-то. Проблема здесь в том, что button_to происходит на стороне сервера. Loooong, прежде чем пытаться интерполировать колоду в эти пути. И "/users/${deck.user_id}/decks/${deck.id}/", как таковой, не является действительным URI. Но button_to нужно, чтобы он был действительным URI, когда вы делаете кнопку POST. (не знаю почему, но это не имеет значения. На самом деле удивительно, что в двух других случаях это не сработало)

Возможным решением было бы не использовать button_to и записывать ссылки / формы напрямую, без помощников рельсов. То есть <form>, а не <%= form_for %> и <a> вместо <%= link_to %>.

Answer 2

Для лучшего подхода создайте новый файл и просто установите ответ на $("#user_decks")

, вы можете получить больше информации от здесь .