Question

I have this Jquery line which finds the cell I would like to input data into, This works when I use it outside of my $.post function (below), but not inside my $.post

$(this).parent().parent().find(".total_item_price").html("new text");

But when I use the above line in the below example, It does not work. It doesn’t update the text in the required field.

$.post(url, { "params": value}, function(data) {

          // This is where I am having a problem
          // also tried .text and .val
          $(this).parent().parent().find(".total_item_price").html(data.total_price_item);

          alert(data.total_price_item); // This outputs my data
       }, "JSON"); 

I basically want to put my returned (data) into the cell of the table. I don’t think that my table structure is the issue, but I can post it if needed.

I should add, that I have to find the parents and field, because each post function will output into a different cell, so its relative to where the user clicked.

Whats going wrong in this code?

Answer 1

Because this inside your load callback is not equal to this outside of your load callback. They have different scopes.

Before you call the post, cache the this from the other scope into a variable:

var scope = this;

And then in your callback you can reference the other this as scope:

$(scope).parent().parent().find(".total_item_price").html(data.total_price_item);