Why is jQuery returning undefined when I try to access an element's data?

Question

I'm trying to access the data attribute of a checkbox to pass through to a PHP script to update my database.

The HTML looks like this:

<input type="checkbox" data-entid="1"onchange="updateOrDeleteEntitlements()" 
checked>

The jQuery function is:

 function updateOrDeleteEntitlements() {
    var role = $('#selectedRole').val();
    var ent = $(this).data('entid');
    var binMe = '';

     $.ajax({
      url: 'ajax/update_delete_entitlements.php',
      type: 'post',
      data: {'role': $role, 'ent': ent, 'delete': $binMe},
      success: function(data) {
        console.log(data);
      }
    }); 
 }

The line var ent = $(this).data('entid'); should be storing the data held in the checkbox so I can pass it through in my AJAX but is returning undefined.

Spent around an hour trying some slightly different things but nothing seems to work. I've also used this same exact thing elsewhere in my code (but pulling data from a tr rather than input) so I'm completely beffudled.

Any help is much appreciated

script rather can't realize what is `$(this)` – Banzay Feb 04 '17 at 12:27 — Banzay, Feb 04 '17 at 12:27

Satpal · Accepted Answer · 2017-02-04T12:32:36.810

this doesn't referes to the checkbox element it refers to window object. You need to pass the current element i.e. this in the inline-change event handler and in the method accept it and later use it to retrieve the data.

HTML

<input type="checkbox" data-entid="1"onchange="updateOrDeleteEntitlements(this)" checked>

Script

function updateOrDeleteEntitlements(elem) { 
    var ent = $(elem).data('entid');    
}

I would recommend you to use unobtrusive event handling technique. Use .on() method attach the event handler. Using it, this will refer to the checkbox hence you code will work.

HTML

<input class="myCheckbox" type="checkbox" data-entid="1" checked>

Script

$('.myCheckbox').on('change', updateOrDeleteEntitlements)

$('.myCheckbox').on('change', updateOrDeleteEntitlements);

function updateOrDeleteEntitlements() {
  var ent = $(this).data('entid');
  console.log(ent)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="myCheckbox" type="checkbox" data-entid="1" checked>

score 4 · Answer 2 · edited Feb 04 '17 at 12:36

You call the function without context, and so this is not the element you think it should be.

You can set the context as follows:

<input type="checkbox" data-entid="1" onchange="updateOrDeleteEntitlements.call(this)">

However, it is usually considered better to attach event handlers in code, without the onchange attribute. You would then add this line in your main script:

$('input[type=checkbox]').change(updateOrDeleteEntitlements);

Adapt the selector passed to $() as needed.

score 1 · Answer 3 · answered Feb 04 '17 at 12:38

In this line

var ent = $(this).data('entid');

you intended to get the data-entid property of your checkbox, but this is not your checkbox. Untested suggestion:

<input type="checkbox" data-entid="1"onchange="updateOrDeleteEntitlements(this)" 
checked>

and

 function updateOrDeleteEntitlements(context) {
    var role = $('#selectedRole').val();
    var ent = $(context).data('entid');
    var binMe = '';

     $.ajax({
      url: 'ajax/update_delete_entitlements.php',
      type: 'post',
      data: {'role': $role, 'ent': ent, 'delete': $binMe},
      success: function(data) {
        console.log(data);
      }
    }); 
 }

Why is jQuery returning undefined when I try to access an element's data?

3 Answers3