1

tengo una duda, tengo un boton que llama a una funcion en un controlador que retorna ciertos datos de un producto:

<a id="boton_prueba"  class="btn btn-primary" product-id="{{$product->id}}">Ver detalles</a>

esta es la funcion que recibe los datos:

function get_product(){
    $.ajax({
        method: 'GET',
        url: window.location.href+"/"+$(this).attr("product-id"),
        data: {},
        success: function( response ){
            console.log( response );
        },
        error: function( e ) {
            console.log(e);
        }
    });
}

El resultado de esto es un json asi:

[
    {
        "id": 1,
        "name": "Atque ut eum.",
        "description": "Sed maxime aliquid aut voluptatem tempore voluptates sit et aut unde minima quae dolorem ex vel officiis ullam dolores sed magni ab quaerat dolores occaecati.",
        "stock": 13,
        "price": 10355,
        "status": "disponible",
        "created_at": "2021-09-07T17:03:52.000000Z",
        "updated_at": "2021-09-07T19:27:26.000000Z"
    }
]

Lo que busco hacer es que luego de recibir estos datos, se active un modal, mostrandolos en algunos inputs. Como debo hacerlo? Muchas gracias

1 respuesta 1

1

Puedes hacerlo de varias formas, aqui te dejo algunas de ellas:

  1. (recomendada) La que te recomiendo es con boostrap, es muy sencilla de implementar y no tardaras mucho con esta, te dejo la documentacion de boostrap para que lo veas (recuerda que para que los modales funcionen en boostrap tienes que importar tanto los estilos css de boostrap como los js) https://getbootstrap.com/docs/5.0/components/modal/ (con algo tan sencillo como el siguiente codigo ya tendrias un modal):
<div class="modal" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div>
</div>
</div>
  1. Lo puedes hacer con css y js totalmente puro si es lo que deseas, aqui te dejo una guia de w3 schools donde te indican como hacerlo: (https://www.w3schools.com/howto/howto_css_modals.asp)

  2. o puedes usar alguna libreria de javascript para hacerlo (te recomiendo esta es muy sencilla de utilizar): https://micromodal.vercel.app/

2
  • Te dejo tambien una guia donde hay un ejemplo claro de implementacion: Abrir enlace
    – DavidsDvm
    Commented el 7 sept. 2021 a las 21:08
  • Muchas gracias, hay alguna forma de que el response del ajax sea un objeto con los datos y que el modal pueda leerlos? enves de imprimir los tag html con la informacion de la bd directamente?
    – Mrnew
    Commented el 7 sept. 2021 a las 22:12

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.