# Padawan seeks advice from jedi masters to create toggle box via ajax/rjs before slitting wrists wit

**URL:** <https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624>\
**Category:** Rails\
**Created:** [July 24, 2009, 8:04am UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624 "2009-07-24T08:04:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tim\_Rand](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/c6cbf5/32.png) [@Tim\_Rand](https://www.ruby-forum.com/u/Tim_Rand)\
**Post date:** [July 24, 2009, 8:04am UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624/1 "2009-07-24T08:04:47Z")

</div>

I AM TRYING TO MAKE A DAMN TOGGLE BOX, BUT USING MY OWN GRAPHIC AND  
HAVING  
THE MOUSECLICK TRIGGER BOTH SWITCHING THE GRAPHIC (via AJAX) AND SAVING  
THE  
STATE IN THE DATABASE.

I GOT IT ALL WORKING WITH NORMAL HTML GET CALLS TO THE SERVER, BUT I  
NEED IT  
TO BE AJAXIFIED SO THAT THE PAGE DOESN’T RELOAD.

AND TO COMPLICATE MATTERS, IT HAS TO WORK IN A TABLE WITH AN ARBITRARY  
NUMBER OF ENTRIES, AND MUST OF COURSE SPECIFICALLY UPDATE ITS OWN ROW  
ONLY.  
So far:  
I have an orders table. I want to have a graphic within \<div id=\<%= ‘"’  
+  
order.id + ‘"’ + ‘\>’ %\>IMAGE, which when clicked calls the  
link\_to\_remote method with an :action =\> “toggle”.

The toggle method then determines the current state of a BOOLEAN field  
in  
the database, switch that field, and then render with a call to the rjs  
file, which I want to update the image by replacing it with another  
image.

If this new image is clicked it would go through a similar process to  
get  
back to the original state.

But alas I cannot quite get there, because I can’t seem to figure out  
how to  
get rjs to take a variable so that it will update only the tag on the  
row  
where the graphic is found. I basically need to be able to pass in  
order.idas the name of the html id to rjs, which apparently can only  
take strings.

I wonder if a partial would solve this issue? Oh, will I ever be a  
jedi or must I always remain a padawan?  
Tim

---

<div class="post-metadata">

**Author:** ![Tim\_Rand](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/c6cbf5/32.png) [@Tim\_Rand](https://www.ruby-forum.com/u/Tim_Rand)\
**Post date:** [July 24, 2009, 8:17am UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624/2 "2009-07-24T08:17:03Z")

</div>

why don’t you generate the complete image tag by :toggle and then  
update the correpsonding div?  
div.innerHtml = updatedImageTagStr;

---

<div class="post-metadata">

**Author:** ![Tim\_Rand](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/c6cbf5/32.png) [@Tim\_Rand](https://www.ruby-forum.com/u/Tim_Rand)\
**Post date:** [July 24, 2009, 12:02pm UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624/3 "2009-07-24T12:02:00Z")

</div>

this can be done without having to pass the current toggle status

the view  
\<% orders.each do |order| %\>

\<%= order.whatever%\> \<%= link\_to\_remote image\_tag("path\_to\_image"), url\_to\_toggle\_method(:id =\> order.id) %\> \<% end %\>

the controller

def toggle  
@order = Order.find(params[:id])  
@order.toggle\_the\_boolean\_attribute\_based\_on\_its\_current\_value  
@order.save(false)  
render :update do |page|  
page.replace\_html “#{@order.id}”,  
the\_new\_image\_with\_link\_to\_remote  
end  
end

there are a few things missing and its untested but thats definitely  
one way to go. look into render :update.

---

<div class="post-metadata">

**Author:** ![Tim\_Rand](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/c6cbf5/32.png) [@Tim\_Rand](https://www.ruby-forum.com/u/Tim_Rand)\
**Post date:** [July 24, 2009, 1:00pm UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624/4 "2009-07-24T13:00:31Z")

</div>

As I haven’t used Ajax in rails so far (all customers wanted to stay  
js-less) I can’t/couldn’t deliver any code 😉

Regarding Rams suggestion:  
looks like “render :update” is not propagated  
 →   
[http://groups.google.com/group/rubyonrails-talk/browse\_thread/thread/d5e7fb7347e641be](http://groups.google.com/group/rubyonrails-talk/browse_thread/thread/d5e7fb7347e641be)

---

<div class="post-metadata">

**Author:** ![Tim\_Rand](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/c6cbf5/32.png) [@Tim\_Rand](https://www.ruby-forum.com/u/Tim_Rand)\
**Post date:** [July 24, 2009, 1:07pm UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624/5 "2009-07-24T13:07:33Z")

</div>

🙂 you could just as well do the same in an rjs template…

Thats a valid point though, that using render :update breaks MVC.  
Ive always wondered though whether breaking the pattern in such cases  
is really gonna harm the application or is it just breaking a  
principle.  
if its really gonna harm the application, render :update probably  
would not even exist right?

---

<div class="post-metadata">

**Author:** ![Tim\_Rand](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/c6cbf5/32.png) [@Tim\_Rand](https://www.ruby-forum.com/u/Tim_Rand)\
**Post date:** [July 24, 2009, 6:12pm UTC](https://www.ruby-forum.com/t/padawan-seeks-advice-from-jedi-masters-to-create-toggle-box-via-ajax-rjs-before-slitting-wrists-wit/172624/6 "2009-07-24T18:12:32Z")

</div>

Got it!!! Here are the key steps:

The view should decide which image to present based on the info in the  
order.placed\_date column and link it remotely to the toggle action.  
Don’t mind the span tags, they are there just to hide some text which  
can be used for sorting (can’t really sort off an image, right?).

View:

 colspan=1 align="center"\> \<% if order.placed\_date == nil then %\> nil
\<%= link\_to\_remote image\_tag("unselected.png"), :url =\> { :controller =\> "orders", :action =\> "toggle", :id =\> order } %\>
\<% else %\> sel
\<%= link\_to\_remote image\_tag("selected.png"), :url =\> { :controller =\> "orders", :action =\> "toggle", :id =\> order } %\>
\<% end %\>

The toggle method updates the database and toggles between rjs files  
Order:  
def toggle  
@order = Order.find(params[:id])  
if @order.placed\_date == nil  
@order.placed\_date = Date.today

```
    respond_to do |format|
      format.js {render :action => "selectedGraphicClicked.rjs"}
    end
  else
    @order.placed_date = nil
    respond_to do |format|
      format.js {render :action => "unselectedGraphicClicked.rjs"}
    end
  end
    @order.save
  end
end

```

The rjs file identifies the id to replace using the @order.id.to\_s and  
replaces the html with a new link\_to\_remote as shown below:  
rjs file 1:  
page[@order.id.to\_s].replace\_html link\_to\_remote(image\_tag  
(“selected.png”), :url =\> { :controller =\> “orders”, :action =\>  
“toggle”, :id =\> @order })

rjs file2:  
page[@order.id.to\_s].replace\_html link\_to\_remote(image\_tag  
(“unselected.png”), :url =\> { :controller =\> “orders”, :action =\>  
“toggle”, :id =\> @order })

This code can likely be cleaned up quite a bit but I am going to enjoy  
clicking the buttons and watching the server update the database, and  
the javascript executing seamlessly for a while before I change  
anything. Thanks for the responses.  
Tim