0

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>
4
  • 2
    Are you using a framework or only raw javascript? Commented Apr 26, 2010 at 5:08
  • "change the td's class from false to true, and the value from No to Yes". Can you explain more on this? Commented Apr 26, 2010 at 5:10
  • Using Rails with the default javascript libraries, Prototype/Scriptaculous My links are created with link_to_remote, but I can use raw javascript as well as I have mixed it in with the visual_effect helpers Commented Apr 26, 2010 at 5:10
  • @rahul <tr> <td>001</td> <td class="false">No</td> <td><a onclick="Element.hide('currentdiv');; new Ajax.Updater('someajax', 'ajax.html', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Appear("newdiv",{});window.scrollTo(0,0);}, parameters:'authenticity_token=' + encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=')}); return false;">THE LINK</a> </tr> Commented Apr 26, 2010 at 5:15

2 Answers 2

3

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for your extremely well written answer!
I need a little more assistance if possible, I don't think the code your gave me can is working correctly, I included a more detailed sample of my HTML to see if that helps.
@fivetwentysix: See my answer above, you want to move all of that code out of the onclick attribute and into a script section. Your code now quoted in your answer is missing a crucial bit where we pass this into the handleLinkClick function; this is how we know which link was clicked. You can do it with inline code (put var link = this; at the very beginning of the code in the attribute), but separating things out into a script section will make it a lot easier to read, maintain, and debug.
0

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 :-)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.