CODEWITHSUNDEEP
javascriptjquery
Peros
Peros

Reputation: 25

jQuery- Send different data-id attributes with ajax

I have tooltip links with different "data-id" attributes.

<a href="" class id="tooltip" data-id="125">Link</a>
<a href="" class id="tooltip" data-id="38">Link 2</a>

In these cases the "125" or "38" from the "data-id" attributes should get sent with ajax to my server-sided script depends over which link I hover.

The problem is that only the "data-id" attribute of the first link is picked up when I hover over the Link 1. I can´t get my script working that the data-id attribute of the second link is picked up when I hover over the Link 2. Also there is no error displayed in the console.

  jQuery(function($) {
    
var html_data = $("#tooltip").attr("data-id");
        
$( "#tooltip" ).tooltip({
    content: function( response ) {
        $.ajax({ 
        url: "/datenbank/itemscript.php",
        data: {
                'var': html_data
            },
        type: "GET"
        })
          .then(function( data ) {
             response( data );
          });
    },
    items: "*"
});
    
    
        });

Upvotes: 0

Views: 602

Answers (3)

Zang wei
Zang wei

Reputation: 318

First of all, you are using id selector using jQuery. jQuery id selector selects only one element, no more. so your tooltip is applied to only first link.

To be right, you should add new attribute such as tooltip-link and remove duplicated id="tooltip" in 2 links, that is wrong.

<a tooltip-link data-id="124">Link</a>
<a tooltip-link data-id="83">Link 2</a>

And in the Javascript

 jQuery(function($) {   
  $( "[tooltip-link]" ).each(function(i) {
    var id = $(this).attr("data-id");
    $(this).tooltip({
      content: function( response ) {
          $.ajax({ 
          url: "/datenbank/itemscript.php",
          data: {
                  'var': id
              },
          type: "GET"
          })
            .then(function( data ) {
               response( data );
            });
      },
      items: "*"
    });
  })
});

If you don't like to modify html, you can do as following

jQuery(function($) {   
      $( "[id='tooltip']" ).each(function(i) {
        var id = $(this).attr("data-id");
        $(this).tooltip({
          content: function( response ) {
              $.ajax({ 
              url: "/datenbank/itemscript.php",
              data: {
                      'var': id
                  },
              type: "GET"
              })
                .then(function( data ) {
                   response( data );
                });
          },
          items: "*"
        });
      })
    });

Upvotes: 1

JL Barcelona
JL Barcelona

Reputation: 228

The reason why it gets only the first data-id it's because you can't set the same id of an element. To get the data-id for each link. instead of ID use tooltip as class

Like this

<a href="" class="tooltip" data-id="125">Link</a>
<a href="" class="tooltip" data-id="38">Link 2</a>

JQuery

$( ".tooltip" ).tooltip({
       let html_data = $(this).attr("data-id");
        content: function( response ) {
            $.ajax({ 
            url: "/datenbank/itemscript.php",
            data: {
                    'var': html_data
                },
            type: "GET"
            })
              .then(function( data ) {
                 response( data );
              });
        },
        items: "*"
    });
        
 });

see the example here on how to get each data-id:

http://jsfiddle.net/kbyanr9q/

Upvotes: 0

Yaaruu
Yaaruu

Reputation: 26

I think you should take another approach to solve this kind of problem because if you take the id attribute of an element, it will take the first occurrence from the top.

Maybe you can try with .mouseenter() function and use class attribute instead of id.

HTML:

<a href="" class="tooltip" data-id="125">Link</a>
<a href="" class="tooltip" data-id="38">Link 2</a>

jQuery:

$(document).on("mouseenter", ".tooltip", function(e){
    var html_data = $(this).data('id');
    $.ajax(...)
});

Upvotes: 0

Related Questions