Question 37349 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

don't get data-id value from seceond <td > to last <td> – Jquery

I am trying to get data-id value from all td. But I only get the data-id value from the first td. Why am I not getting data-id value from second td to last td ?

This is my blade template code:

@foreach ($types as $type)
                    <tr>
                       <td>{{$type->name}}</td>
                       <td><a href="javascript:void(0)"  
                            id="edit_type" data-id="{{ $type->id }}"> 
                            <i class="far fa-edit"></i></a> <a 
                            href=""><i class="fas fa-trash-alt"></i> 
                             </a> 
                         </td>
                             </tr>
                  @endforeach
This is my jquery code: 

      $('#edit_type').click(function(){
         var type_id = $(this).attr('data-id');
         console.log(type_id);

   });
Tags:

2

Answers


  1. 0

    That might be, because HTML defines IDs as a once-per-page name. So you can never have multiple elements on a single page with the same id="xxx" attribute.

    As a result you should never use a fixed ID if you iterate over anything (like your @foreach)! Use a className instead:

                      @foreach ($types as $type)
                    <tr>
                       <td>{{$type->name}}</td>
                       <td><a href="javascript:void(0)"  
                            class="edit_type" data-id="{{ $type->id }}"> 
                            <i class="far fa-edit"></i></a> <a 
                            href=""><i class="fas fa-trash-alt"></i> 
                             </a> 
                         </td>
                    </tr>
                  @endforeach

    with:

    $('.edit_type').click(function(){
    var type_id = $(this).attr('data-id');
    console.log(type_id);
});
    Login or Signup to reply.
  2. 0

    This is the code you have:

          $('#edit_type').click(function(){
         var type_id = $(this).attr('data-id');
         console.log(type_id);

      });

    The # is an id selector, so the code under the hood stops its search when the first match was found, because an id (which stands for unique identifier) is safe to be assumed to be unique. If that’s not the case in your situation, then you have invalid HTML, which is your main problem.

    Technically a selector of $([id=edit_type]) would work, because it would be an attribute selector, but you should do something like this instead:

    @foreach ($types as $type)
                    <tr>
                       <td>{{$type->name}}</td>
                       <td><a href="javascript:void(0)"  
                            class="edit_type" data-id="{{ $type->id }}"> 
                            <i class="far fa-edit"></i></a> <a 
                            href=""><i class="fas fa-trash-alt"></i> 
                             </a> 
                         </td>
                             </tr>
                  @endforeach

          $('.edit_type').click(function(){
         var type_id = $(this).attr('data-id');
         console.log(type_id);

   });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search