1

estoy usando lo siguiente:

  1. Spring 4.3.5
  2. Apache Tomcat 8
  3. Hibernate 4.3.1

Y tengo implementado lo siguiente:

Mi vista caja.xhtml

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"  %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>        
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <title>Gestión de cajas</title>
    <style type="text/css">
        .tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
        .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
        .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;}
        .tg .tg-4eph{background-color:#f9f9f9}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script >
        $(function () {
            $("#tagsName").autocomplete({
                source: function (request, response) {
                    $.getJSON("${pageContext.request.contextPath}/getAnexo.web", {
                        term: request.term
                    }, response);
                }
            });
        });
    </script>

</head>
<body>
    <h1>Agregar una Caja</h1>

    <c:url var="addAction" value="/caja/add" ></c:url>

    <form:form action="${addAction}" commandName="caja" id="registro">
        <table>
            <c:if test="${!empty caja.descripcion}">
                <tr>
                    <td>
                        <form:label path="idcaja">
                            <spring:message text="ID"/>
                        </form:label>
                    </td>
                    <td>
                        <form:input path="idcaja" readonly="true" size="8"  disabled="true" />
                        <form:hidden path="idcaja" />
                    </td> 
                </tr>
            </c:if>                    
            <tr>               
                <td>
                    <form:label path="descripcion">
                        <spring:message text="Descripcion"/>
                    </form:label>
                </td>
                <td>
                    <form:input path="descripcion" />
                </td> 
            </tr>
            <tr>
                <td>
                    <form:label path="encargado">
                        <spring:message text="Busque Encargado"/>
                    </form:label>
                </td>
                <td>                        
                    <form:input path="encargado" id="tagsName" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <c:if test="${!empty caja.descripcion}">
                        <input type="submit"
                               value="<spring:message text="Editar Caja"/>" />
                    </c:if>
                    <c:if test="${empty caja.descripcion}">
                        <input type="submit"
                               value="<spring:message text="Agregar Caja"/>" />
                    </c:if>
                </td>
            </tr>

        </table>    
    </form:form>

    <h3>Lista de Perfiles</h3>
    <c:if test="${!empty list}">
        <table class="tg"> 
            <tr> 
                <th width="80">Id</th>                    
                <th width="200">Descripción</th>
                <th width="220">Encargado</th>
                <th width="120">Editar</th>
                <th width="120">Eliminar</th>
                    <c:forEach items="${list}" var="caja"> 
                <tr> 
                    <td>${caja.idcaja}</td>                         
                    <td>${caja.descripcion}</td>                         
                    <td>${caja.encargado.nombre}</td>
                    <td><a href="<c:url value='/editc/${caja.idcaja}' />" >Editar</a></td>
                    <td><a href="<c:url value='/removec/${caja.idcaja}' />" >Eliminar</a></td>
                </tr> 
            </c:forEach> 
        </table>
    </c:if>


</body>

Mi controlador cajaController.java

@Controller("cajaController")
public class CajaController {

@Autowired
private CajaService cajaserv;

@RequestMapping(value = "/vercajas", method = RequestMethod.GET)
public String listPersons(Model model) {
    List<Caja> list = cajaserv.getAllCaja();
    model.addAttribute("caja", new Caja());
    model.addAttribute("list", list);
    return "caja";
}

@RequestMapping(value = "/caja/add", method = RequestMethod.POST)
public String addPerson(@ModelAttribute("caja") Caja p) {
    cajaserv.crearModificar(p);
    return "redirect:/vercajas";
}

@RequestMapping("/editc/{idcaja}")
public String editPerson(@PathVariable("idcaja") int id, Model model) {
    model.addAttribute("caja", cajaserv.getById(id));
    model.addAttribute("list", cajaserv.getAllCaja());
    return "caja";
}

@RequestMapping("/removec/{idcaja}")
public String removePerson(@PathVariable("idcaja") int id) {
    Caja p = new Caja();
    p = cajaserv.getById(id);
    cajaserv.eliminar(p);
    return "redirect:/vercajas";
}
}

Donde que autocompleto el encargado en la vista mediante este llamado, desde AnexoController.java

@RequestMapping(value = "/getAnexo.web", method = RequestMethod.GET)
public @ResponseBody
List<String> getMachedNames(@RequestParam("term") String name) {
    System.out.println("mostrar: "+name);
    List<Anexo> lista = anexoserv.getNames(name);        
    List<String> matchName = new ArrayList<String>();
    for (int i = 0; i < lista.size(); i++) {
        String get = lista.get(i).getNombre()+" "+lista.get(i).getApepat()+" "+lista.get(i).getApemat();
        matchName.add(get);
    }        
    return matchName;
}

El detalle donde necesito ayuda, es que la lista que muestro lo siguiente, efectivamente muestra el nombre del encargado, pero al momento de querer guardar no lo hace, ya que solo muestro como lista de String, debería mostrar una lista de objetos tipo Anexo, pero no sé como implementarlo.introducir la descripción de la imagen aquí

1 respuesta 1

0

Buenas John Lopez,

Si he entendido bien lo que le gustaría es enviar desde el front al método del back "guardar" , el objeto al que pertenece la propiedad que aparece en el autocompletar. De esta forma tras buscarlo , encontrarlo y hacer clic en el botón guardar , incluirlo en tu tabla html de abajo.

Veo varios puntos que tratar:

1- Enviar el id o el objeto como json al autocomplete

Tu problema está en que cuando muestras los items en el autocomplete solo devuelves el string.

List<String> getMachedNames(@RequestParam("term") String name)

Devuelves una lista de string , ninguna información más.(tal y como dices arriba) , puedes devolver una lista de objetos en JSON, ya sea el objeto entero o un nuevo modelo con el nombre y el id del encargado.

2- Darle al autocompletar una lista de objetos con la informacion que queremos

Si hacemos esto

 source: function( request, response ) {
    $.ajax({
        dataType: "json",
        type : 'Get',
        url: 'yourURL',
        success: function(data) {
            //data es nuestra list<anexoModel>  
            response( $.map( data, function(item) {
                return {id: item.id , value: item.nombre   }
                //por cada elemento en la lista , es decir data 
                //mapeamos sus propiedades a un objeto plano
                //Atención este objeto nuevo debe tener dos 
                //o tres propiedades necesarias para que el 
                //plugin funcione , pero puedes añadir más propiedades
                //a cada objeto que luego utilizaremos en el guardado
            }));
        } 
    });
} ....

Estaremos guardando en la lista de items del plugin más propiedades por cada item. Luego hay un metodo para que cuando se seleccione un elemento se haga algo específico . Lo que haremos será por ejemplo rellenar un campo oculto con el id del empleado (si queremos enviar solo el id y luego hacer un insert en BD) o el objeto entero en una variable que luego enviaremos como json ...

Vamos a guardar el id por ejemplo . Para ello agregamos como propiedad del autocomplete , select

 source: function( request, response ) {
    $.ajax({
        dataType: "json",
        type : 'Get',
        url: 'yourURL',
        success: function(data) {
            //data es nuestra list<anexoModel>  
            response( $.map( data, function(item) {
                return {id: item.id , value: item.nombre   }
                //por cada elemento en la lista , es decir data 
                //mapeamos sus propiedades a un objeto plano
                //Atención este objeto nuevo debe tener dos 
                //o tres propiedades necesarias para que el 
                //plugin funcione , pero puedes añadir más propiedades
                //a cada objeto que luego utilizaremos en el guardado
            }));
        } 
    });
},
select: function(event, ui) {
   //accedemos al item seleccionado
   $('#miCampoIdOcultoQueEnviare').val(ui.item.id);
}

De esta forma cada vez que seleccionamos un encargado obtenemos su id y lo guardamos.

3- Recibir el objeto o el id del mismo para darlo de alta en las cajas

Luego solo tienes que añadir el id como parámetro , asi podras usarlo para hacer un insert nuevo con la referencia del id que ya estamos pasando.

Puedes enviar por ajax , por formulario tradicional , recibir multiples parametros , usar un objeto en formulario tradicional de esta forma

<input name="caja.descripcion"   /> 
<input name="caja.empleado.nombre"  />
<input name="caja.empleado.id" /> 

Luego tal y como haces tras el envio POST haces una reedirección a la misma página para que se vean los cambios

 return "redirect:/vercajas";

Espere que te oriente un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.