CODEWITHSUNDEEP
javascriptjquery
Bivo Kasaju
Bivo Kasaju

Reputation: 1243

Set td value based on another td name from ajax

I have the following table structre: 

<tr>
  <td class="name">
    Stock1
  </td>
  <td class="price">

  </td>
</tr>
<tr>
  <td class="name">
      Stock2
  </td>
  <td class="price">

  </td>
</tr>

Based on the names Stock1 and Stock2, I need to set the corresponding price in the next td. I am web scraping the price thru ajax and trying to set the value as follows:

For Stock1:

$(document).ready(function() {
     $.ajax({
          *everything else working fine*
          success: function(data) {
               if($('.name').html().indexOf("Stock1") != -1) {
                    $(this).closest('tr').find('.price').html(data);
               }
          }
     });
});

In this scenario, this is not working, which I'm expecting to be the td tag with class name where value is Stock1. If I replace this with ".name", the code works only if there's one name td. When I have two td tags with the class name, it doesn't work.

I need to get this done as soon as the document loads, and not on some event like mouse click or hover.

Upvotes: 0

Views: 703

Answers (4)

Satpal
Satpal

Reputation: 133433

this doesn't refers to td.name element nor table.

The :contains() Selector selects all elements that contain the specified text to target the td and then use can use DOM relationship to target immediate following sibling td using .next(). 

$('td.name:contains("Stock1")').next('.price').html(data);

or

$('td.name:contains("Stock1")').closest('tr').find('.price').html(data);

You can also use .filter()

var var1 = 'Stock1';
$('td.name').filter(function(){
    return this.textContent.indexOf(var1) != -1;
}).closest('tr').find('.price').html(data);

As per comment, now you are returning an array. So need to iterate the data object and target the desired element.

var data = [{
    name: "Stock1",
    price: "$12"
}, {
    name: "Stock2",
    price: "$15"
}]
$.each(data, function(_, d){
    $('td.name').filter(function() {
        return this.textContent.indexOf(d.name) != -1;
    }).closest('tr').find('.price').html(d.price);
})

DEMO

Upvotes: 3

SASIKUMAR SENTHILNATHAN
SASIKUMAR SENTHILNATHAN

Reputation: 483

Use the below code in success method, assuming the data would be in the format mentioned below.

success:function(data)
      // Assigning dummy values for assumption
      var data = [{
        stockName: "Stock1",
        price: "$12"
      }, {
        stockName: "Stock2",
        price: "$15"
      }]
     // Iterating throw all td which has name [class] elements
      $(".name").each(function(i, obj) {
        // Dummy Validation as per the mock data to repalce the data as per the stockName
        if ($(this).closest('tr').find('.name').text().trim() === data[i].stockName){
          $(this).closest('tr').find('.price').html(data[i].price);
        }
      })
});

FIDDLE

Upvotes: 1

vijayP
vijayP

Reputation: 11512

The current implementation may not work correctly if you have multiple Stocks are present on your page. So i will suggest you to modify your server side code a bit to return back node name (like Stock1) as well as its price. So that your ajax success data will have 2 components; like data.name and data.price. first one will get used to target DOM td and later one will be used to set the price text as follows:

For Stock1:

$(document).ready(function(){

    $.ajax({
        url: "someBaseURL?name=Stock1"
        success: function(data) {
            var name = data.name; //grab the stock name
            var price = data.price; //grab the stock price
            //iterate over all the names and target the one associated
            $('.name').each(function(){
                if($.trim($(this).text()).indexOf(name) != -1)
                    $(this).closest('tr').find('.price').html(price);
            });
        }
    });
});

Upvotes: 0

Haowei Sun
Haowei Sun

Reputation: 1

success: function(data) {
  $('.name').each(function(index, element) {
    if ($(element).html().indexOf("Stock1") != -1) {
      $(element).closest('tr').find('.price').html(data);
    }
  }
}

Upvotes: 0

Related Questions