2017-03-08 3 views
0

に実際のオブジェクトIDを送信しません。ブラウザの削除ボタンを押すと、要求は特定のオブジェクトIDを送信するのではなく、コントローラに番号1を送信するだけです。したがって、リストから最初の要素を削除しますが、選択した要素は削除しません。Thymeleafフォームは、だから私はThymeleafに次のように書かれているJavaのコントローラ

EDIT:実際は、これは増分です。リストからランダムなオブジェクトを初めて削除すると、最初のアイテムがリストから削除されます。リストから別のランダムな要素を削除すると、2番目のアイテムが削除されます。

Somethingそれ以外の場合は、詳細ページに移動しようとした場合や、オブジェクトを編集しようとしたときにこれが起こらないということです。コントローラに正しいIDを送信します。これは、削除要求に対してのみ発生します。

重要な違いは、編集アクションと詳細アクションがリンクであり、削除がフォームアクションであることです。

これは、全体のマークアップファイルがどのように見えるかです:

<!DOCTYPE html> 
<html lang="en"> 
<head th:replace="layout :: head"></head> 
<body> 

<nav th:replace="layout :: nav"></nav> 

<div class="grid-container"> 

    <div th:replace="layout :: logo"></div> 

    <div class="grid-100"> 

     <div class="recipes"> 

      <div class="grid-100 row controls"> 
       <div class="grid-30"> 
        <select> 
         <option value="">All Categories</option> 
         <option value="breakfast">Breakfast</option> 
         <option value="lunch">Lunch</option> 
         <option value="dinner">Dinner</option> 
         <option value="dessert">Dessert</option> 
        </select> 
       </div> 
       <div class="grid-40"> 
        <input placeholder="Search"></input> 
       </div> 
       <div class="grid-30"> 
        <div class="flush-right"> 
         <a th:href="@{/recipes/add-new-recipe}"><button>+ Add Recipe</button></a> 
        </div> 
       </div> 
      </div> <div class="clear"></div> 

      <div class="grid-100 row addHover" th:each="recipe : ${recipes}"> 
       <a th:href="@{|/recipes/${recipe.id}/detail|}"> 
        <div class="grid-70"> 
         <p> 
          <span><img th:src="@{/images/favorite.svg}" height="12px"/> </span> 
          <span th:text="${recipe.name}"></span> 
         </p> 
        </div> 
       </a> 
       <div class="hoverBlock"> 
        <div class="grid-30"> 
         <div class="flush-right"> 
          <p> 
           <a th:href="@{|/recipes/${recipe.id}/edit|}"> <img th:src="@{/images/edit.svg}" height="12px"/> Edit </a> 
           <a href="javascript:;" onclick="document.getElementById('recipeDeleteForm').submit();"> <img th:src="@{/images/delete.svg}" height="12px"/> Delete </a> 
           <form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm"> 
           </form> 
          </p> 
         </div> 
        </div> 
       </div> 
      </div><div class="clear"></div> 

      <div class="row">&nbsp;</div> 

     </div> 
    </div> 
</div> 
</body> 
</html> 
+0

@ {| /レシピ/ n/array/listで繰り返し処理する必要があります – reos

答えて

0

問題は、私は削除フォームを送信するために<a>タグを使用していたということでした。

<a href="javascript:;" onclick="document.getElementById('recipeDeleteForm').submit();"> <img th:src="@{/images/delete.svg}" height="12px"/> Delete </a> 
           <form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm"> 
           </form> 

ソリューションを使用することですボタンの代わりにフォームタグの中に入れ、アンカーを削除してください:

<form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm"> 
            <button type="submit">Delete</button> 
           </form> 
関連する問題