How to send the id to a modal

Navigation
0
   <table id="example" class="display" style="width:100%">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Producto</th>
                            <th>Precio</th>
                            <th>Marca</th>
                            <th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($productos as $producto)

                            <tr>
                                <td>{{$producto->id}}</td>
                                <td>{{$producto->producto}}</td>
                                <td>{{$producto->precio}}</td>
                                <td>{{$producto->marca}}</td>
                                <td>


                                    <a  class="btn btn-primary btn-group-sm col-lg-offset-2 active"
                                       data-toggle="modal" href="#modal-eliminar{{$producto->id}}"
                                       > <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                        @endforeach
                        </tbody>

                    </table>

This is my modal where I receive the parameter the problem that I have is that if I detect the id that I select but then I will not have the modal if I remove {{$ product-> g}} from the href and the modal that receives it there if it opens 

<div class="modal fade" id="modal-eliminar{{$producto->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Productos Eliminar</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-6">
    
asked by user9472850 13.12.2018 в 04:28
source

2 answers

0

I think that in order to pass data to the modal one you should use data-target="# modal-delete" inside the tag instead of using href and pass the data through data-data, in the following way: 

<a href="#" data-toggle="modal" data-target="#modal-eliminar" data-datos="datosapasar" data-datos2="pasarotrosdatos"> Mi link</a>

We can then process this past data with jquery and assign them to any modal field: 

$('#modal-eliminar').on('show.bs.modal', function (event) {
        var etiqueta = $(event.relatedTarget)
        var recipient = etiqueta.data('datos')
        var recipient2 = etiqueta.data('datos2')

        var modal = $(this)
        //Guardamos el resultado en un input dentro del modal de nombre mnombre
        modal.find('.modal-body #mnombre').val(recipient)
   })

Greetings

    
answered by 13.12.2018 в 09:31
0

There is only one modal, so its id must be id="modal-eliminar" , regardless of the item that is to be deleted.

What you would miss is to indicate (by javascript) at the time of pressing, what is the id that has been pressed.

It could be something like:

In the button, we add a class product_del , to add the event click and a custom attribute data-product_id with the value of id of the product associated with the button. 

<a  class="btn btn-primary btn-group-sm col-lg-offset-2 active product_del"
    data-toggle="modal" href="#modal-eliminar" data-product_id="{{$producto->id}}"
    > <i class="fa fa-trash"></i>
</a>

in javascript we add the 'click' event: 

$('.product_del').click(function (event) {
    var id = $(event.target).data('product_id');
    // faltaría asignar el id a algún elemento del modal
    // actualmente el modal esta vacío y no hace nada 
});
    
answered by 13.12.2018 в 09:46
How do I calculate the values of an LST source? Problem when collecting an input with JavaScript of data collected with ajax