jQuery is failing to properly render dynamic content data identifiers

Question

jQuery is failing to properly render dynamic content data identifiers

Need help with a dynamic HTML div

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

When the above anchor is clicked, it triggers 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);
    });
}

However, the alert shows undefined.

How can I retrieve the value of data-id?

This field is dynamic and the 'a' elements are added after the DOM is loaded.

javascript jquery html ajax

Answer 1

Answer №1

this is not referencing the element, but instead it refers to window

Pass this as an argument for the 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 : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="325372555f535b5e1c515d5f">[email protected]</a></p>
    <p>Mobile : 8</p>
    <p>DOB : 0000-00-00</p>
  </div>
</a>

Alternatively, utilize 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 : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5534153238343c397b363a38">[email protected]</a></p>
    <p>Mobile : 8</p>
    <p>DOB : 0000-00-00</p>
  </div>
</a>

Answer 2

this is not referencing the element, but instead it refers to window

Pass this as an argument for the 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 : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="325372555f535b5e1c515d5f">[email protected]</a></p>
    <p>Mobile : 8</p>
    <p>DOB : 0000-00-00</p>
  </div>
</a>

Alternatively, utilize 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 : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5534153238343c397b363a38">[email protected]</a></p>
    <p>Mobile : 8</p>
    <p>DOB : 0000-00-00</p>
  </div>
</a>

Answer 3

Answer №2

Hand over the object to the method,

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

After that, the code will look like this:

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

Answer 4

Hand over the object to the method,

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

After that, the code will look like this:

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

Answer 5

Answer №3

Give this a shot:

<div data-id="17" onclick="fetchCustomer(this);">

function fetchCustomer(current_element){
    var id = $(current_element).data('id');
    alert(id);

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

Answer 6

Give this a shot:

<div data-id="17" onclick="fetchCustomer(this);">

function fetchCustomer(current_element){
    var id = $(current_element).data('id');
    alert(id);

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

Answer 7

Answer №4

Have you considered utilizing $(this).attr('data-id');

Answer 8

Have you considered utilizing $(this).attr('data-id');

Answer 9

Answer №5

Give this a shot too, see if it does the trick. It's a simple one-liner.

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

    alert(id);
});

Alternatively, you could experiment with this based on your existing code:

function retrieveCustomer(){

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

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

Answer 10

Give this a shot too, see if it does the trick. It's a simple one-liner.

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

    alert(id);
});

Alternatively, you could experiment with this based on your existing code:

function retrieveCustomer(){

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

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

Answer 11

Answer №6

Here is an example script to retrieve customer information:

function findCustomer(){

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

    $.post(base_url+'find/customer',
    {
        id: customerId
    },
    function(response, result){
        console.log(response);
    });
}

Answer 12

Here is an example script to retrieve customer information:

function findCustomer(){

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

    $.post(base_url+'find/customer',
    {
        id: customerId
    },
    function(response, result){
        console.log(response);
    });
}

jQuery is failing to properly render dynamic content data identifiers

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Could there be a more efficient method to enable support for all video formats?

The accumulation of input using setInterval is not effective

create a division in the organization of the identification numbers

Obtaining a date and time in PHP from a JavaScript array

Integrating Python Script with User Input and Output within a JavaScript Web Application

Is it possible to execute in a specific context using npm?

The WebRTC video feature is functioning on the local network but is encountering difficulties

The specified type does not meet the constraint as it lacks the required index signature

Utilize jQuery setInterval to dynamically add and remove classes on elements

Verify if the item already exists in the Vue.js array

Having difficulty retrieving an item from a knockout observable array

What is the correct way to upload an image using the Express static middleware?

Any tips for filtering an array within an array of objects using the filter method?

What steps can be taken to safeguard data while navigating within the Angular framework?

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

easy method for creating a hyperlink that triggers a "download" pop-up box

When attempting to trigger a function by clicking a button in Angular 8 using HTTP POST, nothing is happening as

Manually assigning a value to a model in Angular for data-binding

A guide to organizing elements in Javascript to calculate the Cartesian product in Javascript