Get date-ref from different buttons

Asked

Viewed 85 times

0

I created a system where displays data from a table mysqlthrough the plugin datable. One of the output data is a modal. The javascript code takes the data-ref, that contain the id. This id will be used in querys mysql future.

The Doubt: when more than one line is generated, ajax always returns the id of the first line, not the id of the clicked line. I want to know how to return the id (that is in an attribute data-ref) of the specific line.

This is javascript code that obtains the "id" and fires the 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 table HTML:

            <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>`

jquery html mysql

  • You have to create a different id for each line. Your code already states this?

  • Format that code better there...

2 answers

0

1º Voce cannot (at least should not) have elements with the same id.

2º You have to manipulate the button or linkthat was clicked and then call the modal. A way to do it would be like this:

$('.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);
       }
    });
 });

0

We need to analyze that #detail 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>

Thus, applying the class, you will get the expected result. Note that I removed id="detail" and applied the detail as class.

Browser other questions tagged jquery html mysql

You are not signed in. Login or sign up in order to post.