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>

Answer 1

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 "

Answer 2

If you want this inside the callback to refer to the a element (ie 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