CODEWITHSUNDEEP
javascriptjquery
Nick LaMarca
Nick LaMarca

Reputation: 8188

Setting Html On Ajax Success

I have html that looks like this with several items

<div class="item">
    <p class="price">$388.00</p>
         <p class="part_number">VM2327T23A00T</p>
         <p class="real_price"></p>
      </div>
      <div class="item">
    <p class="price">$88.00</p>
         <p class="part_number">AA327T23A00T</p>
         <p class="real_price"></p>
      </div>
      <div class="item">
      <p class="price">$38.00</p>
         <p class="part_number">AA327T23A00T</p>
         <p class="real_price"></p>
      </div>

etc..

I am trying to iterate through each item and set its "real_price" to a value here is my code:

  jQuery('.part_number').each(function () {
                    parts.push(SearchSpring.jQuery(this).text());

                    SearchSpring.jQuery.ajax(
            {
                type: "POST",
                url: "RealTimePricing.aspx/TestInteraction",
                data: "{param1:'brit', param2: 'nick'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function (msg) {                 
                   jQuery("#real_price").html(msg.d);

                }
            }
        );
      });

                }

I am getting the correct "msg" on success (I can see this in firebug) but it never sets the html, also it only iterates through the each 1 time..

I am not sure why this isnt setting the html

  jQuery("#real_price").html(msg.d);

And why is my code not looping through all the ".part_number" tags in the html?

Upvotes: 0

Views: 77

Answers (3)

Luceos
Luceos

Reputation: 6730

You are trying to update #real_price, which does not exists in your html. You can use the following:

jQuery(this).parent(".item").find(".real_price").html( msg.d ); which updates the other child .real_price of the .item

Upvotes: 0

pixelbobby
pixelbobby

Reputation: 4440

Use a . symbol instead of #, which is reserved for querying by id. Also, you should do this in a way that accesses individual prices instead otherwise it will update all elements as stated below.

Upvotes: 0

pimvdb
pimvdb

Reputation: 154838

class="real_price" implies .real_price, but you have to make sure you're updating the correct element as well (there are several elements with that class). I suggest using .next as the element to update is next to each .part_number element:

jQuery(".part_number").each(function() {
   var $elem = jQuery(this).next(".real_price");

and then:

$elem.html(msg.d);

Upvotes: 1

Related Questions