get dynamically added element value using jquery

Question

I have created a script while making an ajax call i have a div in which there is a table within that table tr there is a list of data I want to get that newly added tr value but when I try to do that it gives me an error of undefined as when I see that row is just added is it possible to get new added row value by class name within same call made ? Please refer my code below I am not good in explaining my question but your comments are appreciated I can answer them.

$.ajax({
  type: "POST",
  data: {
    symbol: symbol,
    val1: val1,
    val2: val2,
    val3: val3,
    val4: val4,
    val5: val5,
    val6: val6,
    val7: val7,
    line_val: line_val
  },
  dataType: "text",
  url: "getCompanyData.php",
  success: function(data) {
    $('.content_panel').append(data);
    $('.load_analyzer').hide();
  }
});

if ($('.radiobox').hasClass('activeradio')) {
  var active_line = $('.activeradio .line_check').val();
  var new_added = $('.line2').attr('data-line2');
}
console.log('New Added Value : ' + new_added); // This is showing as undefined as this row is just being added with above call how do I get this value

Put the if statement inside the success callback. As your code stands you're attempting to access an element that doesn't yet exist in the DOM. — Rory McCrossan
– Rory McCrossan, Commented May 22, 2018 at 8:00
wow that's awesome please post an answer and also a bit explanation that why this does not happen i mean i placed after ajax call as of request was executed — Mark Alan
– Mark Alan, Commented May 22, 2018 at 8:05
I added an answer for you. The issue is due to asynchronous code. I'd suggest researching that if you're unsure about how exactly it works. — Rory McCrossan
– Rory McCrossan, Commented May 22, 2018 at 8:10
An AJAX call is like asking your friend to go to the shop and get some milk, but as soon as they leave you make a coffee and try to add milk. You have to wait until your friend comes back with the milk before you can add it to your coffee. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented May 22, 2018 at 8:15

Rory McCrossan · Accepted Answer · 2018-05-22 08:09:36Z

1

For this to work you need to place the if statement inside the success handler:

$.ajax({
  type: "POST",
  data: {
    symbol: symbol,
    val1: val1,
    val2: val2,
    val3: val3,
    val4: val4,
    val5: val5,
    val6: val6,
    val7: val7,
    line_val: line_val
  },
  dataType: "text",
  url: "getCompanyData.php",
  success: function(data) {
    $('.content_panel').append(data);
    $('.load_analyzer').hide();

    if ($('.radiobox').hasClass('activeradio')) {
      var active_line = $('.activeradio .line_check').val();
      var new_added = $('.line2').attr('data-line2');
    }
    console.log('New Added Value : ' + new_added)    
  }
});

This is because the AJAX request is asynchronous - this is what the first 'A' stands for. It means that logic execution continues on passed the request while it's in progress. It's only once a response is received then that the success handler is executed. This may be miliseconds later, or minutes later. Either way, in your original code you will have already tried to read the DOM before you've updated it. Hence the issue.

answered May 22, 2018 at 8:09

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Alan Over a year ago

thank you sooo much for your help you solved my problem

Rory McCrossan Over a year ago

No problem, glad to help.

Collectives™ on Stack Overflow

get dynamically added element value using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related