CODEWITHSUNDEEP
javascriptjqueryhtml
Steven Walker
Steven Walker

Reputation: 412

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

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

Upvotes: 1

Views: 1105

Answers (3)

Lajos Arpad
Lajos Arpad

Reputation: 76464

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);
      }
    }); 
 }

Upvotes: 1

trincot
trincot

Reputation: 350242

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.

Upvotes: 4

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 4

Related Questions