Manipulating row data with Javascript

Question

I have a specific question, I have a link in a table in the third column of each row, when the user clicks that link he loads some ajax and updates the page, what I want to also happen is that in the 2nd column of the row where the link is, change the td's class from false to true, and the value from No to Yes.

Thanks!

Update! Code Example:

The 2nd column still doesn't get updated on click, perhaps this is because the div where the table is located gets hidden onclick? Anyways here's what I've tried:

<tr>
  <td>00839</td>
  <td class="false"  style="text-align:left;">No</td>
  <td>      
    <a href="#" 
       onclick="Element.hide('ajax-instruction-view');; 
       new Ajax.Updater('ajax-instruction-view', '/tasks/show_ajax/839', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Appear(&quot;ajax-instruction-view&quot;,{});window.scrollTo(0,0);
       link = $(link);
       var row = link.up('tr');
       var cell = row.down('td').next('td');
       cell.update('Yes');},
       parameters: 'authenticity_token='encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=')}); return false;"
    >
      Instructions-Notice Board
    </a>
  </td>
  <td>19/04/10</td>
  <td class="false">21/04/10</td>
  <td class="false"  style="text-align:left;">None.</td>
</tr>

Answer 1

I dont recall how to write it in Scriptaculous but in jQuery it would be:

$(element).click(function(){
  // invoke your ajax routine

  // change class
  $($(this).parent('tr').children().get(1)).attr('class', 'my-classname');
});

Maybe someone can translate :-)

Answer 2

It sounds as though at some point, you have a reference to the link the user clicked (either because you have a click handler on it or because you're using event delegation and finding it after a click on the table). Starting with a reference to that link, you can use Prototype's DOM traversal stuff to find the second table cell:

Edit Based on your response to rahul, I would change your link onclick to:

onclick="handleLinkClick(this); return false;"

...and this would be handleLinkClick:

function handleLinkClick(link) {

    // Original code (mostly unchanged)
    Element.hide('currentdiv');
    new Ajax.Updater('someajax', 'ajax.html', {
        asynchronous:true,
        evalScripts:true,
        onComplete: function(request) {
            new Effect.Appear("newdiv",{});
            window.scrollTo(0,0);

            // New code starts here

            // Extend the link element
            link = $(link);

            // Find the row
            var row = link.up('tr');

            // Find the second column
            var cell = row.down('td').next('td');

            // Change the cell's "class" and "value" -- I've had to guess a bit at
            // what you want to do here
            if (cell.hasClassName("true")) {
                cell.removeClassName("true").addClassName("false");
                cell.update("No");
            }
            else {
                cell.removeClassName("false").addClassName("true");
                cell.update("Yes");
            }

            // End of new code
        },
        parameters:'authenticity_token=' + encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=')
    });

}

That uses Element#up, Element#next, Element#hasClassName, Element#addClassName, Element#removeClassName, and Element#update; docs for them here.

Optional things to consider:

• The above is fragile in that if you change the location of that cell (make it the third column rather than the second), it fails. You might use a marker class to find it.
• Rather than an onclick attribute, you could use Element#observe.
• You can use event delegation to have just one handler on the table, rather than a handler on each link.

But the above should work.