Kleber Mota Kleber Mota - 1 month ago 5
Java Question

Updating list after insert new items through a JSP form

In my Spring project, I am passing a List to my JSP page from my controller in this way:

mav.addObject("tipos", tipo.listaTipos());
mav.addObject("campos", atributo.listaKey());


In the JSP page, besides display this items, I can add new items too, as demonstrated in the code below (both HTMl and Jquery):

HTML

<table class="bordered campos" id="edit_campos">
<thead>
<tr>
<th>Campo</th>
<th>#</th>
</tr>
</thead>
<tfoot>
<tr>
<td> <input type="text" name="nome_campo"> </td>
<td> <button type="button" id="incluir_campo" class="btn btn-link">Incluir</button> </td>
</tr>
</tfoot>

<c:forEach var="item_key" items="${campos}">
<tr id="linha_${item_key.id}">
<td> <input type="text" name="${item_key.nome}" value="${item_key.nome}"> </td>
<td> <button type="button" id="excluir_campo" class="btn btn-link">Excluir</button> </td>
</tr>
</c:forEach>
</table>




JQuery

$("#incluir_campo").on("click", function () {
$.ajax({
type: "GET",
url: "<c:out value="${pageContext.request.contextPath}/key/cadastra_campo"/>",
data: {nome: $("input[name=nome_campo]").val() }
}).done(function(data){
if(data=="yes") {
var newRow = $("<tr>");

cols = '<td> <input type="text" name="${item_key.nome}" value="${item_key.nome}"> </td>';
cols += '<td> <button type="button" id="excluir_campo_${item_campo.id}" class="btn btn-link">Excluir</button> </td>';

newRow.append(cols);
$("table.campos").append(newRow);
$("input[name=nome_campo]").val("");
}
else {
alert("erro ao incluir campo");
}
}).fail(function(){
alert("falha ao incluir campo");
});
});


But, in this current scenario, the new lines are display with no content, due the list passed to JSP remains the same. How I can update the list I passed to my JSP after I insert a new item?

Answer

Look at these lines:

cols = '<td> <input type="text" name="${item_key.nome}" value="${item_key.nome}"> </td>';
cols += '<td> <button type="button" id="excluir_campo_${item_campo.id}" class="btn btn-link">Excluir</button> </td>';

Don't use expressions(${}) in Jquery when you working dynamically with DOM elemnts like insert new, update DOM etc, expressions are evaluated when jsp is processed/rendered HTML.

Solution will be:

After getting new item in Controller add it to list, and return the same item as response to AJAX, then append it to exists table. like:

consider your controller method returns data in json like:

var data = {"item_key" : {nome : "abc"}, "item_campo" : {id : "1"}};

then in done do like:

.done(function(data){
    if(data.length != 0) {

   var $newRow = $("<tr>");
   var $newTextbox = $('<input type="text" id="'+data.item_key.nome+'" name="foo">');
   var $newButton = $('<button type="button" id="excluir_campo_'+data.item_campo.id+'" class="btn btn-link">Excluir</button>');

   $newRow.append($('<td>').append($newTextbox));
   $newRow.append($('<td>').append($newButton));

   $("table.campos").append($newRow);
   $("input[name=nome_campo]").val("");
 }
else {
    alert("erro ao incluir campo");
   }
})

jsfiddle

Comments