Question

I have a button when clicked on runs a function and I want the value in the previous TD to change to yes from no.

HTML:

<tr class="odd">
  <td class="">13.00</td>
  <td class="">DDR</td>
  <td class="">No</td>
  <td class="">
    <div class="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="javascript:paid(4);return false" href="#" "="" role="button" aria-disabled="false">
       <span class="ui-button-text">Paid</span>
    </div>
  </td>
</tr>

So when the user clicks on “Paid” this is called.. Javascript:

function paid(iD) {       
    $.ajax({
        contentType: "application/json; charset=utf-8",
        type: "POST",
        url: "Paid",
        dataType: "json",
        data: "{ id:" + iD +"}",
        success: function (id) {
            //Here change value of previous TD to yes;

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {               
        }
    });
};

Is there a way I can access the html of the previous td and change the value of it?

O and also make the button disappear?

Answer 1

This is one way that will work. But with these kind of things you need to be careful about changing your html after:

$("span.ui-button-text").click(function(){
    var td = $(this).closest("td").prev();
    //do ajax here
});

this will allow you to store the correct td cell and then you can reference that inside your success callback. For example:

td.html("Yes");