CODEWITHSUNDEEP
javascriptjquery
Rio
Rio

Reputation: 14882

How to get selector attribute in jquery qTips?

I'm trying to get the "id" attribute of a tag that also calls jQuery qTips. The setup is as follows:

$('.selector').qtip({
   content: {
      text: 'Loading...', // The text to use whilst the AJAX request is loading
      ajax: {
         url: 'getInfo.php', // URL to the local file
         type: 'GET', // POST or GET
         async: false,
         data: { id: $(this).attr('id')}, // !! PROBLEM HERE
         success: function(data, status) {

            // Set the content manually (required!)
            this.set('content.text', data);
         }
      }
   }

});

The caller is as such:

<a href='http://www.google.com' class='selector' id='Jerome'>Jerome</a>

but for some reason $(this).attr("id") is undefined. The qTip shows up but is blank, and the GET call shows up as not passing any data in Firebug. What am I missing?

Thanks!

Edit: also, this.attr returns "this.attr is not a function"

Upvotes: 3

Views: 748

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this it will solve your problem.

$('.selector').each(function(index, item){
  $(item).qtip({
   content: {
      text: 'Loading...', // The text to use whilst the AJAX request is loading
      ajax: {
         url: 'getInfo.php', // URL to the local file
         type: 'GET', // POST or GET
         async: false,
         data: { id: $(item).attr('id')}, // !! PROBLEM HERE
         success: function(data, status) {

            // Set the content manually (required!)
            this.set('content.text', data);
         }
      }
   }

});

});

Upvotes: 3

IUnknown
IUnknown

Reputation: 22448

What about this:

$('.selector').each(function () {
        var thisId = $(this).attr("id");
        $(this).qtip({
            content: {
                text: 'Loading...', // The text to use whilst the AJAX request is loading
                ajax: {
                    url: 'getInfo.php', // URL to the local file
                    type: 'GET', // POST or GET
                    async: false,
                    data: { id: thisId }, // !! PROBLEM HERE
                    success: function (data, status) {

                        // Set the content manually (required!)
                        this.set('content.text', data);
                    }
                }
            }
        });
    });

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

this is not pointing to the current element because it is still constructing the json object to be passed to qtip plugin. You hav to use the same selector to get the jquery object.

$('.selector').qtip({
   content: {
      text: 'Loading...', // The text to use whilst the AJAX request is loading
      ajax: {
         url: 'getInfo.php', // URL to the local file
         type: 'GET', // POST or GET
         async: false,
         data: { id: $('.selector').attr('id')}, // !! PROBLEM HERE
         success: function(data, status) {

            // Set the content manually (required!)
            this.set('content.text', data);
         }
      }
   }

});

Upvotes: 0

Related Questions