Using selectors and $(this) in Jquery Ajax

Question

I have event mouseenter link with get ajax request, I want to get selector $(this) of link and get attribute. I'm use context of setting ajax for AJAX callback.

jQuery(document).ready(function($) {
  var request;
  $('a[rel="bookmark"]').mouseenter(function() { 
  // other stuff
  request = $.ajax({
      dataType: "JSON",
      url: '<?php echo admin_url("admin-ajax.php"); ?>',
      data: {"action": "our_ajax_function", "id": dataId},
      context: $(this).parent().get(0),
      success: function(data){
          // other stuff
          var gettitle = $(this).attr('data-title').replace('Permanent Link to ','');
      }
  })
});

But I get this error

Uncaught TypeError: Cannot read property 'replace' of undefined

I have event mouseenter link with get ajax request, I want to get selector $(this) of link and get attribute. I'm use context of setting ajax for AJAX callback.

jQuery(document).ready(function($) {
  var request;
  $('a[rel="bookmark"]').mouseenter(function() { 
  // other stuff
  request = $.ajax({
      dataType: "JSON",
      url: '<?php echo admin_url("admin-ajax.php"); ?>',
      data: {"action": "our_ajax_function", "id": dataId},
      context: $(this).parent().get(0),
      success: function(data){
          // other stuff
          var gettitle = $(this).attr('data-title').replace('Permanent Link to ','');
      }
  })
});

But I get this error

Uncaught TypeError: Cannot read property 'replace' of undefined

HTML

<ul>
   <li>
    <a href="http://localhost/area-no-kishi/" rel="bookmark" data-title="Permanent Link To Area no Kishi" data-id="4126" target="_blank">Area no Kishi </a>
   </li>
   <li>
    <a href="http://localhost/aria-the-scarlet-ammo-hidan-no-arai/" rel="bookmark" data-title="Permanent Link To Permanent Link to Aria the Scarlet Ammo ( Hidan No Aria )" data-id="1081" target="_blank">Aria the Scarlet Ammo ( Hidan No Aria ) </a>
   </li>
</ul>

Please post your HTML. Provide a complete example. You get this error because whatever element `$(this).parent().get(0)` refers to, it doesn't have a `data-title` attribute. — Felix Kling, Jul 21 '14 at 18:29
Side note, the good way to access a data attribute is to use `.data('title');`. It will not solve your problem though.. — Karl-André Gagnon, Jul 21 '14 at 18:33
Yes, but `$(this).parent().get(0)` doesn't refer to the link. And you are setting `this` to `$(this).parent().get(0)`. — Felix Kling, Jul 21 '14 at 18:44

Amin Jafari · Answer 1 · 2014-07-21T18:56:45.957

2

try assigning "this" to a variable:

jQuery(document).ready(function($) {
  var request;
  $('a[rel="bookmark"]').mouseenter(function() { 
  var that=this;
  // other stuff
  request = $.ajax({
      dataType: "JSON",
      url: '<?php echo admin_url("admin-ajax.php"); ?>',
      data: {"action": "our_ajax_function", "id": dataId},
      success: function(data){
          // other stuff
          var gettitle = $(that).data('title','Permanent Link to ');
      }
  })
});

also while using the HTML5 Data Attribute you can get or modify the data in jQuery with the data() function:

$(that).data('title','Permanent Link to '); //sets the "data-title" of the selected element as "Permanent Link to "

edited Jul 21 '14 at 18:56

answered Jul 21 '14 at 18:26

Amin Jafari

7,157
2
18
43

The OP wants to refer to `$(that).parent().get(0)` not the `a` element. Don't see a reason why the OP should "try to assign this to a variable", but maybe you can elaborate on that. – Felix Kling Jul 21 '14 at 18:32
If you read the problem, OP has access to `this` as an HTML element but the attribute `data-title` is missing. – Karl-André Gagnon Jul 21 '14 at 18:32
@FelixKling "I want to get selector `$(this)` of link" link means the `a` element, so the OP can pass the element in `that` variable to the ajax call. – Amin Jafari Jul 21 '14 at 18:36
Wouldn't then the better suggestion be to change `context: $(this).parent().get(0),` to `context: this` ? IMO there is not enough information to provide a definitive answer. – Felix Kling Jul 21 '14 at 18:37
@Karl-AndréGagnon how can the OP access `this` as an HTML element inside another function? and please specify where exactly the OP has mentioned that they can access `this` but not `data-title`? – Amin Jafari Jul 21 '14 at 18:39
@FelixKling I'm not saying this is the best way, but this code will definitely work, that's all I'm saying – Amin Jafari Jul 21 '14 at 18:40
Regarding your other comment, you can see that the OP sets `context: $(this).parent().get(0)`. I.e. `this` inside the callback refers to the element `$(this).parent().get(0)`. If that element doesn't have a `data-title` attribute, `attr` will return `undefined`. Your solution is based on the assumption that `this` should refer to the `a` element. This may or may not be the case. The fact that `context: $(this).parent().get(0)` exists in the first place seems to suggest differently. – Felix Kling Jul 21 '14 at 18:43
@FelixKling you're right, you'll not need context if you wanna do it my way! – Amin Jafari Jul 21 '14 at 18:50
well, thank you all for your time and explanation, amin's solution did resolve my problem, felix's solution too. But as say's felix, If `$(this).parent().get(0)` element doesn't have a `data-title` it will return `undefined`, I think it will help for the future. +1 for both, but sorry amin I accepted felix's answer. [oot]. I don't know the different with [this solution](http://stackoverflow.com/a/6456811/1297435). – user3612645 Jul 21 '14 at 19:07
@user3612645 it's okay, we're all just here to help, glad you've found your solution ;) – Amin Jafari Jul 21 '14 at 19:14

score 1 · Accepted Answer · edited May 23 '17 at 10:25

If you want this inside the callback to refer to the a element (i.e. the element the handler was bound to), use

context: this

instead of

context: $(this).parent().get(0)

$(this).parent().get(0) selects the parent of the a element, which is a li element, which doesn't seem to have a data-title attribute.

From the documentation:

context
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so:
$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

See also $(this) inside of AJAX success not working

Using selectors and $(this) in Jquery Ajax

2 Answers2

Linked

Related