Get date-ref of different buttons

Question

Get date-ref of different buttons

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I've created a system where it displays data from a mysql table via the datable plugin. One of the data is a modal. The javascript code takes data-ref , which contains id . This id will be used in future% queries.

Doubt : When more than one row is generated, ajax always returns the id of the first row, not the id of the row you click. I want to know how to return mysql (which is in a id attribute) of the specified line.

This is javascript code that gets "id" and fires ajax:

        $('#verpedido').on('show.bs.modal', function (e) {
        let id_pedido = $("#detalha").attr('data-ref');
        $.ajax({
        url: 'http://notasfiscais-ipc.stackstaging.com/edita.php',
        data: {id: id_pedido},
        type: 'POST',

        success: function(response){

        $('#teste').empty();
        $('#teste').html(response);
        }
        });
        });

This is the HTML of the table:

            <td class="sorting_1">34592</td><td>005_17</td><td>CLIENTE 01</td><td>2017-04-12</td><td></td><td></td><td></td><td><a href="#ver_pedido" data-toggle="modal" data-target="#verpedido" data-ref="34592" id="detalha" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></a> </td></tr>
            <tr role="row" class="even"><td class="sorting_1">35194</td><td>2689</td><td>CLIENTE 02</td><td>2017-05-16</td><td></td><td></td><td></td><td><a href="#ver_pedido" data-toggle="modal" data-target="#verpedido" data-ref="35194" id="detalha" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></a> </td></tr>
        </tbody>'

mysql html jquery

asked by anonymous 31.08.2017 / 22:59

2 answers

Build Spring Boot takes too long to compile? String problem in oracle

score 0 · Answer 1

We need to parse that #detal is a unique id. What we can do is as follows:

$('#verpedido').on('show.bs.modal', function (e) {
    let id_pedido = $(".detalha").attr('data-ref');
        $.ajax({
            url: 'http://notasfiscais-ipc.stackstaging.com/edita.php',
            data: {id: id_pedido},
            type: 'POST',
            success: function(response){
                $('#teste').empty();
                $('#teste').html(response);
            }
        });
});




<a href="javascript:void(0)" data-toggle="modal" data-target="#verpedido" data-ref="34592" class="btn btn-primary detalha"><i class="fa fa-plus" aria-hidden="true"></i></a> 
<a href="javascript:void(0)" data-toggle="modal" data-target="#verpedido" data-ref="34593" class="btn btn-primary detalha"><i class="fa fa-plus" aria-hidden="true"></i></a>

So, by applying the class, you'll get the expected result. Note that I removed the id="detailed" and applied the detail as class.

score 0 · Answer 2

You can not (at least should not) have elements with the same id.

2º You have to manipulate the button or link that was clicked and then call the modal. One way to do this would be:

$('.btn').on('click', function (e) {
    let id_pedido = $(this).attr('data-ref');

    // chamar o modal dentro do click

    alert(id_pedido);

    $.ajax({
       url: 'http://notasfiscais-ipc.stackstaging.com/edita.php',
       data: {id: id_pedido},
       type: 'POST',

       success: function(response){
          $('#teste').empty();
          $('#teste').html(response);
       }
    });
 });