CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Beginner
Beginner

Reputation: 29573

How to change value in previous TD via Javascript

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?

Upvotes: 0

Views: 4301

Answers (5)

AdityaParab
AdityaParab

Reputation: 7100

Work around

add an ID to the TR element

<tr id="tr1" class=".odd">

AND

<div class="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="javascript:paid(4,"tr1");return false" href="#" "="" role="button" aria-disabled="false">

and modify your paid function as 

paid(id, rowId);

TD as 

<td class="yn">No</td>

and success handler

success: function (id) {
$("#"+rowId+" .yn").html("Yes");
}

============================================== OLD : Simple way is give your yes/no TD a class say yn

so your TD looks like

<td class="yn">No</td>

and implement your success handler as

success: function (id) {
$(".odd .yn").html("Yes");
},

Upvotes: 0

techfoobar
techfoobar

Reputation: 66693

A good way would be using the context property of $.ajax(..) to save a reference to the previous TD which you want modified.

For example:

$.ajax({
        ...
        context: prevTD, // specify the previous TD as context
        ...
        success: function (data) {
            // 'this' refers to the passed in context
            // so you can do 
            this.text('Yes');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {               
        }
    });

For getting the previous TD from where you are calling, you can use:

yourPaidButton.parents('TD').first().prev()

Upvotes: 0

Alex W
Alex W

Reputation: 38253

HTML:

<td class="" id="paid">No</td>

Javascript:

document.getElementById("paid").innerHTML = "Yes";

Upvotes: 0

musefan
musefan

Reputation: 48425

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");

Upvotes: 1

Mitya
Mitya

Reputation: 34596

The key here is preserving a reference to the outer this (the clicked button). Once you enter the success callback, the context is lost, because it's nan asynchronous operation.

We can capture the outer this, though, with an immediately-executed function, passing it in as an argument reference.

    success: (function(button) { return function (id) {
        $(button).closest('td').prev('td').text('yes');
    }; })(this)

Upvotes: 1

Related Questions