CODEWITHSUNDEEP
javascriptjqueryhtmlajax
humbleiam
humbleiam

Reputation: 1009

Dynamic content data id not working in jquery

Have a dynamic html div

<a data-id="17" onclick="getcustomer();">
    <div class="note note-success">
        <h4 class="block">A</h4>
        <p>Email : [email protected]</p>
        <p>Mobile : 8</p>
        <p>DOB : 0000-00-00</p>
    </div>
</a>

On the above anchor's on click.it calls this function

function getcustomer(){
    var id = $(this).data('id');
    alert (id);      
    $.post(base_url+'who/customer', {
        customer_id: id
    }, function(data, status){
        console.log(data);
    });
}

But alert receiving is undefined.

How will I take data-id value?

This is dynamic field. This a's are added after dom load.

Upvotes: 0

Views: 1965

Answers (6)

Asish Hira
Asish Hira

Reputation: 132

Use this script 

function getcustomer(){

    var id = $(this).attr('data-id');
    alert (id);

    $.post(base_url+'who/customer',
    {
        customer_id: id
    },
    function(data, status){
        console.log(data);
    });
}

Upvotes: 0

Rayon
Rayon

Reputation: 36609

this does not refer to the element but to window

Pass this as argument for getcustomer function

function getcustomer(elem) {
  var id = $(elem).data('id');
  alert(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a data-id="17" onclick="getcustomer(this);">
  <div class="note note-success">
    <h4 class="block">A</h4>
    <p>Email : [email protected]</p>
    <p>Mobile : 8</p>
    <p>DOB : 0000-00-00</p>
  </div>
</a>

Or better use jQuery event binding using .on method

$('.eventBinding').on('click', function() {
  var id = $(this).data('id');
  alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a data-id="17" class='eventBinding'>
  <div class="note note-success">
    <h4 class="block">A</h4>
    <p>Email : [email protected]</p>
    <p>Mobile : 8</p>
    <p>DOB : 0000-00-00</p>
  </div>
</a>

Upvotes: 4

Samir
Samir

Reputation: 1368

Try this as well, if it works. Its just simple one line of code.

$('a').on('click', function(){
    var id = $(this).attr("data-id");

    alert(id);
});

Or you can try this as well, according to your code,

function getcustomer(){

var id = $(this).attr('data-id');
alert (id);

$.post(base_url+'who/customer',
{
    customer_id: id
},
  function(data, status){
      console.log(data);
  });
}

Upvotes: 0

Jones Joseph
Jones Joseph

Reputation: 4938

What if you use $(this).attr('data-id');

Upvotes: 0

Krunal
Krunal

Reputation: 327

Try this:

<a data-id="17" onclick="getcustomer(this);">

function getcustomer(curr_obj){
    var id = $(curr_obj).data('id');
    alert (id);

   $.post(base_url+'who/customer',
   {
       customer_id: id
   },
   function(data, status){
       console.log(data);
   });
}

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

Pass the object to the method,

<a data-id="17" onclick="getcustomer(this);">

Then the code will be,

function getcustomer(obj) {
  var id = $(obj).data('id');
  alert(id);
  $.post(base_url + 'who/customer', {
      customer_id: id
    },
    function(data, status) {
      console.log(data);
    });
}

Upvotes: 1

Related Questions