1

tengo un tabla con diferentes productos, y esta lista la obtengo con ajax, datos en formato json y lo muestro en un datatable. Tengo un botón de modificar para cada producto el cual me abre un modal con los campos q se pueden modificar, lo que quiero es que al dar en ese botón de modificar se abra el modal con los datos del producto ya como valor en los input pero no obtengo el resultado que quiero.

Código ajax con el que obtengo una consulta de la DB. Si observan me dirijo a un servlet (EditarInv) el cual hace la conexión y hace un select a la tabla con un id especifico

$(document).on('click', '.modalEditar', function () {
        idLibro = $(this).attr("id");
        idLibro = idLibro.replace(/[']/g, "");
        $.ajax({
            method: "POST",
            url: "../EditarInv",
            dataType: "json",
            data: 'id=' + idLibro,
            success: function (data) {                    
                $('#nombreEdit').html(data);
                console.log(data);
            }
        });
    });

resultado de ejemplo de lo que me trae el console.log(data).

{
    "datos": [{
        "id": "1",
        "nombre": "El hobbit",
        "descripcion": "Smaug parecía profundamente dormido cuando Bilbo espió una vez más desde la entrada. ¡Pero fingía",
        "categoria": "1",
        "cantidad": "91",
        "precio": "150.00"
    }]
}

mi modal en una jsp

<div class="modal fade" id="myModalEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Modificar libro</h4>
                        </div>
                        <form accept-charset="utf-8" method="POST" id="crearLibro" enctype="multipart/form-data">
                            <div class="modal-body">

                                Nombre:
                                <input type="text" id="nombreEdit" name="txtNom" class="form-control" value=""/><br>

                                Descripcion:
                                <textarea name="txtDesc" id="descripcion" class="form-control" value=""></textarea><br>       

                                categoria:
                                <select name="txtCate" id="categoria" class="form-control">
                                    <option value="">Seleccione una opcion</option>
                                    <option value="0">Fantasia</option>
                                    <option value="1">Terror</option>
                                    <option value="2">Aventura</option>
                                    <option value="3">Drama</option>
                                </select><br>

                                Cantidad:
                                <input type="text" id="cantidad" name="txtCant" class="form-control" value=""/><br>                        

                                Precio:
                                <input type="text" id="precio" name="txtPre" class="form-control" value=""/><br>

                                Imagen:
                                <input type="file" id="imagen" name="txtImg" class="" value=""/><br>

                            </div>
                            <div class="modal-footer">
                                <a type="button" class="btn btn-default" data-dismiss="modal">Cerrar</a>
                                <button type="submit" class="btn btn-primary" id="guardar">Agregar Libro</button>
                            </div>
                        </form>

                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

obtengo los datos que quiero en formato json pero no he logrado poder tomar esos datos y pasarlos a los input del modal ya que me marca [objet objet]. No se si lo este haciendo de la manera correcta o si tienen alguna idea de como hacer que los datos me aparezcan en el form del modal, pensé que tal ves pudiera haber una forma de obtener los datos directamente del datatable y no hacer una consulta con ajax pero no he encontrado una solución.

2
  • Alejandro, por favor, muéstranos como intentas setear los valores (el código)
    – osiris85
    Commented el 12 nov. 2018 a las 7:59
  • En el success del ajax, selecciona el input a editar y le haces por ejemplo $('#tituloPelicula').val(data.tituloPelicula); Obviamente me he inventado los nombres, eso debes saberlo tú
    – Juanant
    Commented el 12 nov. 2018 a las 10:49

1 respuesta 1

0

Necesitas recorrer los objetos y los arrays. Cuando lo que necesitas es un objeto usas el .objeto para obtener ese datos y cuando es un array, como es habitual, buscas por su posición.

var id = data.datos[0].id;
var nombre = data.datos[0].nombre;
var descripcion = data.datos[0].descripcion;
var categoria = data.datos[0].categoria;
var cantidad= data.datos[0].cantidad;
var precio = data.datos[0].precio;

Depués sólo queda añadir los valores a los input.

$('#nombreEdit').val(nombre);
$('#descripcion').val(descripcion);
$('#categoria').val(categoria);
1
  • Exelente me funcionó, había intentado algo similar pero me faltó recorrer como mencionas. Muchas gracias y gracias a todos los que respondieron. Commented el 12 nov. 2018 a las 13:01

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.