Bueno al leer sus comentarios, los cuales les agradesco muchisimo =) . Y investigando un poco junto a mi preciada taza de café. encontre una forma de hacer mi jsp con ajax, desgraciadamente no pude user el jstl =( .
Mi jsp:
<table class="table table-striped table-bordered table-hover" id="tblFactores">
<button type="button" class="btn btn-primary" name="btnAdd" id="btnAdd"> Agregar</button>
<thead>
<tr>
<th>Factor</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<%
List<Factor> listafactores = FactorNEG.Instancia().Listar();
for (int i = 0; i < listafactores.size(); i++)
{
int tipo = listafactores.get(i).getCodigo();
out.println("<tr>");
out.println("<td class='text-center'>" + listafactores.get(i).getDescripcion() + "</td>");
if (listafactores.get(i).getEstado()== 1) {
out.println("<td class='text-center'><i class='fa fa-check-square-o'></i></td>");
} else {
out.println("<td class='text-center'><i class='fa fa-square-o'></i></td>");
}
%>
<td class="text-center" data-id="<%=listafactores.get(i).getCodigo()%>" >
<a href="javascript:;" class="btn btn-primary btn-circle edit" title="Editar"><i class="fa fa-edit"></i></a>
<a href="javascript:;" class="btn btn-danger btn-circle remove " title="Eliminar"><i class="fa fa-remove"></i></a>
</td>
</tr>
<%
}
%>
</tbody>
</table>
Mi servlet :
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
String action = request.getParameter("action");
Factor f = new Factor();
if (action.equalsIgnoreCase("registrar")) {
// Factor f = new Factor();
f.setCodigo(Integer.parseInt(request.getParameter("codigo")));
f.setDescripcion(request.getParameter("descripcion"));
f.setEstado(Integer.parseInt(request.getParameter("estado")));
int valor = FactorNEG.Instancia().Registrar(f);
response.setContentType("application/json");
response.setHeader("Cache-Control", "no-cache");
Map<String, String> data = new HashMap<String, String>();
data.put("codigo",String.valueOf(valor));
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json = gson.toJson(data);
response.getWriter().write(json);
}
if(action.equalsIgnoreCase("delete"))
{
f.setCodigo(Integer.parseInt(request.getParameter("codigo")));
Boolean respuesta = FactorNEG.Instancia().delete(f.getCodigo());
response.setContentType("application/json");
response.setHeader("Cache-Control", "no-cache");
Map<String, String> data = new HashMap<String, String>();
data.put("codigo",String.valueOf(respuesta));
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json = gson.toJson(data);
response.getWriter().write(json);
}
} catch (Exception ex) {
Logger.getLogger(sFactor.class.getName()).log(Level.SEVERE, null, ex);
}
}
mi jsFactor
var oTable;
$(function () {
oTable = fn_iniciarDT(oTable, "tblFactores");
$("#btnAdd").on("click", function () {
fn_Add();
});
oTable.on("click", ".edit", function () {
fn_Edit(this);
});
oTable.on("click", ".save", function () {
fn_save(this);
});
oTable.on("click", ".remove", function () {
var elem = this;
bootbox.confirm("\u00BFEst\u00e1 seguro de eliminar esta factor?\u003F", function (result) {
if (result) {
oTable.fnDestroy();
fn_Delete(elem);
}
});
});
oTable.on("click", ".cancel", function () {
fn_Cancel(this);
});
});
function fn_Add() {
$("#tblFactores tbody").prepend("<tr>" +
"<td><input type='text' class='form-upload input-sm' style='width: 100%'/></td>" +
"<td class='text-center'><input type='checkbox' checked='checked'/></td>" +
"<td class='text-center'>" +
"<a class='btn btn-info btn-circle save' href='javascript:;' title='Guardar' ><i class='fa fa-save'></i></a>" +
"<a class='btn btn-danger btn-circle cancel' href='javascript:;' title='Cancelar' ><i class='fa fa-ban'></i></a>" +
"</td></tr>");
};
var fn_save = function (elem) {
var par = $(elem).parent().parent();
var tdnombre_factor = par.children("td:nth-child(1)");
var tdestado = par.children("td:nth-child(2)");
var tdbuttons = par.children("td:nth-child(3)");
var id_codigo = tdbuttons.attr('data-id') === undefined ? 0 :tdbuttons.attr('data-id');
var data = {'codigo': id_codigo, 'descripcion': tdnombre_factor.children("input[type=text]").val(),
'estado': tdestado.children("input[type=checkbox]").is(":checked") ? 1 : 0
};
var success = function (res) {
if (res.codigo > 0)
{
tdnombre_factor.html(tdnombre_factor.children("input[type=text]").val());
tdestado.html(res.estado === 1 ? '<i class="fa fa-check-square-o"></i>' : '<i class="fa fa-square-o"></i>');
tdbuttons.html('<a class="btn btn-primary btn-circle edit"><i class="fa fa-edit"></i></a><a class="btn btn-danger btn-circle remove"><i class="fa fa-remove"></i></a>');
tdbuttons.attr("data-id", res.codigo);
}
};
var error = function () {
alert("error");
};
console.log(data);
fn_callmethod(base_url + "../sFactor?action=registrar", data, success, error);
};
var fn_Delete = function (elem) {
var codigo = $(elem).parent().attr('data-id') === undefined ? 0 : $(elem).parent().attr('data-id');
if (codigo !== 0) {
var success = function (res) {
if (res) {
var par = $(elem).parent().parent();
par.remove();
oTable = fn_iniciarDT(oTable, "tblFactores");
}
};
var error = function () {
};
fn_callmethod(base_url + "../sFactor?action=delete", {codigo: codigo}, success, error);
}
};
function fn_Edit(elem) {
var par = $(elem).parent().parent();
var tdnombre_factor = par.children("td:nth-child(1)");
var tdestado = par.children("td:nth-child(2)");
var tdbuttons = par.children("td:nth-child(3)");
var estado;
tdnombre_factor.html("<input type='text' id='txtdescripcion' class='form-control input-sm' style='width: 100%' value='" + tdnombre_factor.html() + "'/>");
estado = tdestado.children("i").hasClass("fa-square-o") ? "<input type='checkbox'/>" : "<input type='checkbox' checked='checked'/>";
tdestado.html(estado);
tdbuttons.html('<a class="btn btn-primary btn-circle save"><i class="fa fa-save " title="Guardar"></i></a><a class="btn btn-danger btn-circle cancel" title="Cancelar"><i class="fa fa-ban"></i></a>');
}
;
var fn_Cancel = function (elem) {
var par = $(elem).parent().parent();
var tdbuttons = par.children("td:nth-child(3)");
var id = tdbuttons.attr('data-id') === undefined ? 0 : tdbuttons.attr('data-id');
if (id === 0) {
par.remove();
} else {
var par = $(elem).parent().parent();
var tdnombre_factor = par.children("td:nth-child(1)");
var tdestado = par.children("td:nth-child(2)");
tdnombre_factor.html(tdnombre_factor.children("input[type=text]").val());
tdestado.html((tdestado.children("input[type=checkbox]").is(":checked") ? '<i class="fa fa-check-square-o"></i>' : '<i class="fa fa-square-o"></i>'));
tdbuttons.html('<a class="btn btn-primary btn-circle edit"><i class="fa fa-edit"></i></a><a class="btn btn-danger btn-circle remove"><i class="fa fa-remove"></i></a>');
}
};
servicios js :
var fn_callmethod = function(url, data, success, error) {
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
dataType: "json",
success: success,
error: error
});
};
var fn_callmethod_get = function(url, data, success, error) {
$.ajax({
type: "GET",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
dataType: "json",
success: success,
error: error
});
};
function combo(url, id) {
$.ajax({
type: "GET",
url: base_url + url,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
dataType: "json",
success: function(data) {
var option = "<option value='0'>----Seleccione----</option>";
var tam = data.length;
$("#" + id).append(option);
for (var i = 0; i < tam; i++)
{
var option = $(document.createElement('option'));
option.text(data[i].Descripcion);
option.val(data[i].Codigo);
$("#" + id).append(option);
}
}
});
}
var fn_iniciarDT = function(oTable, idtable) {
oTable = $("#" + idtable).dataTable({
"iDisplayLength": 25,
"aLengthMenu": [[15, 25, 50, 100, -1], [15, 25, 50, 100, "All"]],
"language": {
"lengthMenu": "Mostrar _MENU_ registros por página",
"zeroRecords": "Nada encontrado - lo siento",
"info": "Mostrando la página _PAGE_ de _PAGES_",
"infoEmpty": "No hay registro disponibles.",
"infoFiltered": "(Filtrado _MAX_ registros en total)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Ultimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
}
}
});
return oTable;
};
PD :
El unico detalle que aun no logro descubir son :
1) como validar (en la funcion add y edit creo cajas de texto y select) , la pregunta es como puedo validarlos.
2) Como saber si me manda un succes o error (es decir si pasa un cath en mi servlet como enviarlo como error)
"factores"
no está vacío y es alcanzable desde tu página JSP? Podrías hacer una prueba de Expression Language usando${factores.size}
en alguna parte del JSP, si da un resultado entonces significa que la variable sí se puede alcanzar y que el problema está en otro lado.c:out
. JSTL y EL, son independientes, puedes poner solo ${factores.size} o ${factores}<jsp:include>
?