如何使用 Javascript 为 rails 对象动态创建删除按钮？

Question

I have a script to dynamically show an index of items on a page when a "show" button is pressed but when I try to add a new button to delete each object shown it throws an error I cant seem to resolve. Here is the whole script:

<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>

The error I am getting is this:

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

The dynamically created "view details" and "edit" buttons work fine, but the delete button seems to be having a problem with the URL for some reason and I can't figure out why, any suggestions?

Edit: There seems to have been an issue trying to use the rails helper to generate the delete button. Manually generating the button with a form seems to have worked as follows:

<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

Yes, changing it to post breaks it the same way the third button was breaking

Ah, we're onto something. The problem here, then, is that button_to happens on server-side. Loooong before you attempt to interpolate a deck into those paths. And "/users/${deck.user_id}/decks/${deck.id}/" , as it is, is not a valid uri. But button_to needs it to be a valid uri when you make a POST button. (don't know why, but it's irrelevant. It is actually a surprise that it didn't fail in the other two cases)

A possible solution would be to not use button_to and write out the links/forms directly, without rails helpers. That is, <form> , not <%= form_for %> and <a> instead of <%= link_to %> .

Answer 2

For a better approach create a new file and just set the response to $("#user_decks")

you can get more information from here .