Проблемы после отправки формы с добавленной новой строкой

Question

У меня здесь немного борьбы, это моя проблема: у меня есть таблица, содержимое которой взято из компонента, содержащего две строковые переменные и список фасолей, которые, в свою очередь, образованный двумя строковыми переменными и MultipartFile. Таким образом, в этом случае я представить пользователю таблицу с так:

Проблема возникает, когда я пытаюсь реализовать функциональность «Добавить изображение»: новая строка в таблице показано, но после того, как подать значения, которые я получаю в контроллере, помещают новые значения в последний бит в списке, т. е. если в новом вводе для «Bean 2 - field 1» я помещаю «new_value_5» в контроллер, я получаю «значение 5, new_value_5 "в поле 1" из последнего компонента в списке, я не получаю новый экземпляр компонента, я просто получаю все значения в последнем компоненте списка. Это мой код на странице JSP:

<form:form action="myaction.html" method="post" modelAttribute="main_bean" enctype="multipart/form-data"> 
    <table> 
     <tr> 
      <td>Bean 1 - field 1: <form:input path="bean1_field1"/></td> 
     </tr> 
     <tr> 
      <td>Bean 1 - field 2: <form:input path="bean1_field2"/></td> 
     </tr> 
     <tr> 
      <td>Images: 
       <table id="imgTable"> 
        <tbody> 
        <c:forEach var="bean_2" items="${main_bean.list_of_bean_2}" varStatus="imgStatus"> 
         <tr> 
          <td> 
           <img src="image/${main_bean.id}/${bean_2.pathImage}" class="imagen" width="100px;" height="100px;" id="idImage"> 
           <div id="divFile" style="display:none;"><!-- When the user wants to add a new image I enable this input--> 
            <form:input type="file" path="${bean_2.image}" name="imagen" id="imgFile"/> 
           </div> 
          </td> 
          <td> 
           Bean 2 - field 1: <form:input path="list_of_bean_2[${imgStatus.index}].field1" id="field1Id"/> 
           <form:input type="hidden" path="list_of_bean_2[${imgStatus.index}].id"/> 
          </td> 
          <td> 
           Bean 2 - field 2: <form:input path="list_of_bean_2[${imgStatus.index}].field2" id="field2Id"/> 
          </td> 
         </tr> 
        </c:forEach> 
        </tbody> 
       </table> 
      </td> 
      <td> 
       <input type="button" value="Add image" id="addImgBtn" class="addImgBtn"> 
      </td> 
     </tr> 
     <tr> 
      <td><input type="submit" value="Confirm changes" > </td> 
      <td><input type="button" value="Cancel changes" > </td> 
     </tr> 
    </table> 
</form:form> 

И структура бобов:

public class Bean1 { 
    private List<Bean2> imagesCampaign; 
    private String field1; 
    private String field2; 
    //getters and setters 
} 

public class Bean2 { 
    private MultipartFile image; 
    private String field1; 
    private String field2; 
    //getters and setters 
} 

Я не указан код в контроллере, потому что я думаю, не стоит, но если ты хочешь, просто дайте мне знать.
Буду очень признателен, если кто-нибудь может дать мне понять, что здесь происходит. Заранее спасибо.
EDIT: Я пытался доступ к п + 1 индекс (list_of_bean_2[${imgStatus.index + 1}]), но получил ConcurrentModificationException
Кто-нибудь, пожалуйста, немного помочь здесь ???

Answer 1

Наконец-то я сумел решить эту проблему, если кто-то знает лучшее решение, я был бы благодарен, но тем временем вот мое решение. Вместо того, чтобы иметь кнопку, чтобы сделать всю работу, которую я создал 2: первый будет просто добавить строку для нового образа, а второй один будет представлять добавлены данные, поэтому, это мой JavaScript:

$(".addImgBtn").click(function() { 
     $('#imgTable tbody>tr:last').clone(true).insertAfter('#imgTable tbody>tr:last'); 
     $("#imgTable tbody>tr:last #field1").val(''); 
     $("#imgTable tbody>tr:last #field2").val(''); 
     $("#imgTable tbody>tr:last #divFile").show(); 
     $(".addImgBtn").attr("disabled", "true"); 
     return false; 
    }); 

Предыдущая функция добавит новую строку в таблицу, и она отключит кнопку «Добавить изображение».

$(".confirmImgBtn").click(function(eve) { 
    var field1 = $("#imgTable tbody>tr:last #field1").val(); 
    var field2 = $("#imgTable tbody>tr:last #field2").val(); 
    var form = $('#confirmImgForm'); 
    var newfile = $("#imgTable tbody>tr:last #imgFile")[0].files[0]; 
    var formdata = false; 
    if (window.FormData) { 
     formdata = new FormData(); 
    } 
    if (window.FileReader) { 
     reader = new FileReader(); 
     reader.onloadend = function (e) { 
      //showUploadedItem(e.target.result, file.fileName); 
     }; 
     reader.readAsDataURL(newfile); 
    } 
    if (formdata) { 
     formdata.append("image", newfile); 
     formdata.append("field1",field1); 
     formdata.append("field2",field2); 
    } 
    if (formdata) { 
     jQuery.ajax({ 
      url: form.attr('action'), 
      type: "POST", 
      data: formdata, 
      processData: false, 
      contentType: false, 
      success: function (res) { 
       alert('succeed!!'); 
      } 
     }); 
    } 
}); 

Последняя функция будет представлять значения в контроллер: Я прочитал значение для field1, FIELD2, тем формы (просто, чтобы получить URL) и, наконец, изображения, и когда я отправляю все в контроллер, я получаю экземпляр моего компонента, который содержит 2 строковых переменных (для filed1 и field2) и org.springframework.web.multipart.MultipartFile для изображения.