I am developing an application with JSP, Servlets and Bootstrap, but I have a problem when showing a modal the problem is that I print in a table data brought from the database and there I have the options to delete and edit, when it is to be edited I want a modal with the data of the registry to appear, but I can not do it I have tried in many ways but in no way I have been able to solve the problem.
In the following code I print the values brought from the query:
while (rs.next()) {
String clave = rs.getString("clave");
String nombre = rs.getString("nombre");
String ubicacion = rs.getString("ubicacion");
String telefono = rs.getString("telefono");
out.println("<tr class='info'>");
out.println("<td>");
out.println(clave);
out.println("</td><td>");
out.println(nombre);
out.println("</td><td>");
out.println(ubicacion);
out.println("</td><td>");
out.println(telefono);
out.println("</td><td>");
out.println("<button class='btn btn-danger' onclick='confirmarDelete("
+ clave + ")'>Eliminar</button>");
out.println("</td>");
out.println("<td>");
out.println("<button onclick='showModalEdit("+ clave + ")' class='btn btn-success'>Editar</button>");
out.println("</td>");
out.println("</tr>");
} In the button <button onclick='showModalEdit("+ clave + ")' class='btn btn-success'>Editar</button> I call a JavaScript function which receives as a parameter the code (primary key) and I try to send a servlet through AJAX:
JavaScript code:
function showModalEdit(clave){
$.ajax({
type: "POST",
url: "buscar",
contentType: "application/json", // NOT dataType!
data: JSON.stringify(clave),
success: function(responseJson) {
$.each(responseJson, function(index, item) {
document.getElementById(item+"Edit").value = item;
});
document.getElementById("claveEdit").value = clave;
document.getElementById("tituloEdit").innerHTML = "Editar "+clave;
$('#modalEdit').modal('show');
}Servlet:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Conexion conexion = new Conexion();
String clave = request.getParameter("clave");
Statement Estamento;
String nombre = "";
String telefono = "";
String ubicacion = "";
try {
Estamento = conexion.conectarBD().createStatement();
ResultSet rs = Estamento.executeQuery("select clave, nombre, ubicacion, telefono from delegacion where clave = "+clave);
while(rs.next()){
nombre = rs.getString("nombre");
telefono = rs.getString("telefono");
ubicacion = rs.getString("ubicacion");
}
List<String> list = new ArrayList<>();
list.add(nombre);
list.add(ubicacion);
list.add(telefono);
String json = new Gson().toJson(list);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}But it does not bring me anything from the execution. I also try passing the values as JavaScript parameters but it does not work either:
Button code: out.println("<button onclick='showModalEdit("+ clave + ","+ nombre + ","+ ubicacion + ","+ telefono + ")' class='btn btn-success'>Editar</button>");
JavaScript Function:
function showModalEdit(clave, nombre, ubicacion, telefono){
document.getElementById("claveEdit").value = clave;
document.getElementById("nombreEdit").value = nombre;
document.getElementById("ubicacionEdit").value = ubicacion;
document.getElementById("telefonoEdit").value = telefono;
document.getElementById("tituloEdit").innerHTML = "Editar "+clave;
$('#modalEdit').modal('show');
}Modal code:
<!-- Modal editar-->
<div class="modal fade" id="modalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="tituloEdit"></h4>
</div>
<form id="formEditar" method="POST" action="edit">
<div class="modal-body">
<div class="form-group">
<label for="clave">Clave</label> <input type="text"
class="form-control" id="claveEdit" name="clave"
readonly>
</div>
<div class="form-group">
<label for="nombre">Nombre:</label> <input type="text"
class="form-control" id="nombreEdit" name="nombre"
>
</div>
<div class="form-group">
<label for="ubicacion">Ubicación:</label> <input type="text"
class="form-control" id="ubicacionEdit" name="ubicacion"
>
</div>
<div class="form-group">
<label for="telefono">Telefono:</label> <input type="text"
class="form-control" id="telefonoEdit" name="telefono"
>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Editar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>