JQuery $(this).attr('id') not working

[BluMess]

Hi,

I'm having trouble using the $(this) identifier in JQuery. I'm using the qtip plugin, and I want to send an ajax request, which can be done with the plugin. I'm trying to pass the id of the element to the script but it's not seeming to work - the script doesn't pick up any value (I know it works because I passed a fixed integer and it worked)

Here's my script:

<script>
$(document).ready(function(){
 $('div.portal_entry.smalldetails').qtip({
  content: {
    url: '/Scripts/ajax/portal_qtip.php',
    data:  { id: $(this).attr('id') },
    method: 'get'
  }		   
 });
});
</script>

And the HTML:

<div class="portal_entry smalldetails" id="b63">
  <a href="/portal/63"><img src="http://www.nocturnalhaunt.com/Thumbnails/1257165890.png" class="image" width="50" height="50"/></a>
<div class="details">
  <a href="/portal/63" class="portal_title">The Green Knight</a>
  <small style="display: block; padding-left: 10px;">~Paradox</small>
</div>

Thanks, hopefully its just a simple mistake
~Chris

[Troy III]

I don't think that "this" kewyword is legal syntax in:

$(this).attr('id')

but since the syntax:

this.att('id')

will not work either.
You are left with one solution only, - the right way to do things, a pure javascript syntax:

this.id

Regards.

[kartiksehgal]

Neither this.id or $(this).attr("id") will work if the element does not have an explicitly defined id. Why don't you also check what element you are getting by using alert(this.tagName).

[Troy III]

Neither this.id or $(this).attr("id") will work if the element does not have an explicitly defined id. Why don't you also check what element you are getting by using alert(this.tagName).

Can you please explain to me, why $(this).attr("id") would not work?
Can you point to the exact reason and argument of why wouldn't that syntax work, exactly?

I asure you it doesn't have no relation at all with defined undefined id of the element. Because that syntax will not work either way. You tell us why than?

[shedokan]

The problem is that you are trying to get the variable "this" of the function $(document).ready(function(){ and not $('div.portal_entry.smalldetails').

A more correct version is:

<script>
$(document).ready(function(){
 var el = $('div.portal_entry.smalldetails');
 el.qtip({
  content: {
    url: '/Scripts/ajax/portal_qtip.php',
    data:  { id: el.attr('id') },
    method: 'get'
  }		   
 });
});
</script>

[JohnPoiscaille]

Hmmm, but then you wouldn't get the current attr('') if they were more than one div with that class.

Let's say you have this in your html

<a href="javascript:;" sid="2321" class="details">test1</a>
<a href="javascript:;" sid="5643" class="details">test2</a>
<a href="javascript:;" sid="1251" class="details">test3</a>
<a href="javascript:;" sid="9742" class="details">test4</a>

How can I retrieve each single "sid" individualy by using something like this:

<script>
$(document).ready(function(){
 $('a.details').qtip({
  content: {
    url: 'view.php',
    data:  { id: $(this).attr('sid') },
    method: 'get'
  }		   
 });
});
</script>

[pritaeas]

Using each() would get you there I think.

<script>
$(document).ready(function(){
 $('a.details').each(function(index){
  $(this).qtip({
   content: {
    url: 'view.php',
    data:  { id: $(this).attr('sid') },
    method: 'get'
   }		   
  });
 });
});
</script>

[Iván]

You can use "this.id" as a JavaScript code... is the same and you can also use that value into a JQUERY function... I hope it could help you to do what you want :)

[Moshe_2]

hello, today i have showen that to my students and my solution:

// JQuery

  $('.press').on("click", function(event) {

        event.preventDefault()

        let fd = new FormData()
        let phoneID = $(this).attr('phoneid')

        fd.append('phoneID', phoneID)

        $.ajax({
            url: "./phones.php",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            complete: (response) => {
                $('#phone' + phoneID).val(response.responseText)
            }
        })
    })

});