UNDEFINED when trying to get value of an attribute

Question

I am trying to get the value of the attribute 'data-tablename'.

$.ajax({ 
  type: 'post', 
  url: "<?= base_url(); ?>table/moveTable/",
  data: "table_name=" + $(this).attr("data-tablename"), 
  success: function(r) {
      $.notify($(this).attr("data-tablename") + " was successfully added", "success");
  }
});

When I try this code, I get the message "undefined was successfully added"

How can I get the value of it?

Well, `this` in that context is the ajax function, and why would the ajax function have a data attribute ? — adeneo, Apr 03 '15 at 21:02

score 2 · Accepted Answer · answered Apr 03 '15 at 20:59

2

Add var tableName = $(this).attr("data-tablename"); before ajax invocation and then replace $(this).attr("data-tablename") with tableName variable

answered Apr 03 '15 at 20:59

Oleks

1,633
1
18
22

score 1 · Answer 2 · answered Apr 03 '15 at 21:01

You should assign $(this) to a variable before the ajax action, and then use that variable in the anonymous functions:

var $this = $(this);

$.ajax({ 
  type: 'post', 
  url: "<?= base_url(); ?>table/moveTable/",
  data: { "table_name": $(this).attr("data-tablename") },
  success: function(r) {
      $.notify($this.attr("data-tablename") + " was successfully added", "success");
  }
});

score 1 · Answer 3 · answered Apr 03 '15 at 21:06

Whenever you have a function defined in another function, this in the inner function will not be the same as the outer function unless there is something to specifically set it to be so. In this case you can use jQuery.ajax's context configuration, this sets the value of this in all the callbacks to whatever you want.

$.ajax({ 
  type: 'post', 
  url: "<?= base_url(); ?>table/moveTable/",
  data: "table_name=" + $(this).attr("data-tablename"), 
  context: this,
  success: function(r) {
      $.notify($(this).attr("data-tablename") + " was successfully added", "success");
  }
});

UNDEFINED when trying to get value of an attribute

3 Answers3