# Ajax and partials

**URL:** <https://www.ruby-forum.com/t/ajax-and-partials/194173>\
**Category:** Rails\
**Created:** [August 31, 2010, 4:37pm UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173 "2010-08-31T16:37:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pezdude](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/a87d85/32.png) [@pezdude](https://www.ruby-forum.com/u/pezdude)\
**Post date:** [August 31, 2010, 4:37pm UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173/1 "2010-08-31T16:37:27Z")

</div>

Hello all,

I am still very new to programming and wonder if I could get some help.  
I have tried to figure this out myself but still having trouble with  
some of the concepts. I’ll do my best to explain the problem and  
include the code. I may be completely off track, so ANY direction  
offered would be deeply appreciated.

I have a question model / object which consists of a question, answers,  
and responses to the answers. In the model have the following method  
to shuffle the answer –annotation(response) pairs so they don’t look the  
same every time they are viewed.

Question.rb model

def set\_format\_for\_presentation  
# Create array and shuffle incorrects.  
answer\_list = [  
[incorrect\_ans\_1, incorrect\_anno\_1],  
[incorrect\_ans\_2, incorrect\_anno\_2],  
[incorrect\_ans\_3, incorrect\_anno\_3],  
[incorrect\_ans\_4, incorrect\_anno\_4],  
[incorrect\_ans\_5, incorrect\_anno\_5],  
[incorrect\_ans\_6, incorrect\_anno\_6]  
].shuffle

```
   # Randomly insert the correct answer and response into the

```

shuffled array.  
random\_insert = rand(4)  
answer\_list.insert(random\_insert,["#{correct\_ans\_1} \*",  
self.correct\_anno, self.question\_pict])

```
   formatted = {
     :anno_1 => answer_list[0][1],
     :anno_2 => answer_list[1][1],
     :anno_3 => answer_list[2][1],
     :anno_4 => answer_list[3][1],
     :anno_5 => answer_list[4][1],
     :question => self.question,
     :answer_a => answer_list[0][0],
     :answer_b => answer_list[1][0],
     :answer_c => answer_list[2][0],
     :answer_d => answer_list[3][0],
     :answer_e => answer_list[4][0]
     }
     formatted

```

end

In the controller:  
@question = Question.find(params[:id])  
@formatted\_question = @question.set\_format\_for\_presentation

In the view:

\<% form\_for(@formatted\_question, :url =\> “controller =\> question”,  
:action =\> “show”) do |f| %\>

\<%= image\_tag @question.question\_pict, :alt =\> "eye.jpg", :size =\> "470x470", :style=\> "border: 3px inset #d7b9c9;" %\>

\<%= @formatted\_question[:question] %\>

\<%= "A. #{@formatted\_question[:answer\_a]}" %\>

\<%= "B. #{@formatted\_question[:answer\_b]}" %\>

\<%= "C. #{@formatted\_question[:answer\_c]}" %\>

\<%= "D. #{@formatted\_question[:answer\_d]}" %\>

\<%= "E. #{@formatted\_question[:answer\_e]}" %\>

\<%= render :partial =\> @anno %\>

 \<%= link\_to\_remote( "A", :url =\>"/questions/#{@formatted\_question[:id]}/\_anno\_1", :method =\> "get", :update =\> "ajax\_area") %\>

\<%= link\_to\_remote(  
“B”,  
:url =\>"/questions/#{@ formatted.id}/\_anno\_2",  
:method =\> “get”,  
:update =\> “ajax\_area”) %\>

\<%= link\_to\_remote(  
“C”,  
:url =\>"/questions/#{@ formatted.id}/\_anno\_3",  
:method =\> “get”,  
:update =\> “ajax\_area”) %\>

\<%= link\_to\_remote(  
“D”,  
:url =\>"/questions/#{@ formatted.id}/\_anno\_4",  
:method =\> “get”,  
:update =\> “ajax\_area”) %\>

\<%= link\_to\_remote(  
“E”,  
:url =\>"/questions/#{@ formatted.id}/\_anno\_5",  
:method =\> “get”,  
:update =\> “ajax\_area”) %\>

\<% end %\>

Partial partial\_anno\_1.html.erb

\<%= "#{@formatted\_question[:anno\_1]}" %\>

My goal is to use ajax to display the partial associated with the button  
clicked eg click the “A” button and display “\_anno\_1”. Cant figure out  
how to get the information in the variables to the partial. I cant use  
set\_format\_for\_presentation again as it will reshuffle tha attributes  
and responses will no longer match the order the displayed answers are  
in.

Thanks,

Dave C.

---

<div class="post-metadata">

**Author:** ![pezdude](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/a87d85/32.png) [@pezdude](https://www.ruby-forum.com/u/pezdude)\
**Post date:** [September 1, 2010, 9:24am UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173/2 "2010-09-01T09:24:57Z")

</div>

Dave,

My goal is to use ajax to display the partial associated with the button

> clicked eg click the “A” button and display “\_anno\_1”. Cant figure out  
> how to get the information in the variables to the partial. I cant use  
> set\_format\_for\_presentation again as it will reshuffle tha attributes  
> and responses will no longer match the order the displayed answers are  
> in.

I should admit that I was lazy to follow all your code. 🙂 but I got  
your  
idea. In order to display the partial associated with the button  
clicked,  
use CSS and Javascript.

- Add CSS display attribute (something like _#activeContent{display:  
block;}_).
- Add an _onclick_ action to each button that “_activates_” a partial  
associated with the button so clicked and “_deactivate_” the other  
buttons
- To deactivate the other partials, set _#activeContent_’s  
_style.display  
= ‘none’;_.

This will surely help you.

* * *

Edmond  
Software Developer | Baobab Health Trust ([http://www.baobabhealth.org/](http://www.baobabhealth.org/))  
|  
Malawi

Cell: +265 999 465 137 | +265 881 234 717

_“Many people doubt open source software and probably don’t realize that  
there is an alternative… which is just as good…” – Kevin Scannell_

2010/8/31 Dave C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![pezdude](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/a87d85/32.png) [@pezdude](https://www.ruby-forum.com/u/pezdude)\
**Post date:** [September 2, 2010, 3:17am UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173/3 "2010-09-02T03:17:01Z")

</div>

Edmond, Thanks for the response. It helped set me in the right  
direction!

I put this in the show.html.erb:

A  
B  
C

and this in the .css:

#response\_a {display: none}  
#response\_b {display: none}  
#response\_c {display: none}

Only problem is it only toggles if I change ‘display: none’ to ‘display:  
“”’. And then it doesn’t hide the responses when the page initially  
renders, which I need it to do. Any ideas??

Thanks again,  
Dave

---

<div class="post-metadata">

**Author:** ![pezdude](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/a87d85/32.png) [@pezdude](https://www.ruby-forum.com/u/pezdude)\
**Post date:** [September 2, 2010, 3:48am UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173/4 "2010-09-02T03:48:52Z")

</div>

Edmond, Thanks for the response. It helped set me in the right  
direction! Left some code out in the previous post, so this is what i  
did…

I put this in the show.html.erb:

* * *

 \<%= "#{@formatted\_question[:response\_a]}" %\>

 \<%= "#{@formatted\_question[:response\_b]}" %\>

## A B

and this in the .css:

* * *

## #response\_a {display: none} #response\_b {display: none}#response\_c {display: none}

Only problem is it only toggles if I change ‘display: none’ to ‘display:  
“”’. And then it doesn’t hide the responses when the page initially  
renders, which I need it to do. Any ideas??

Thanks again,  
Dave

---

<div class="post-metadata">

**Author:** ![pezdude](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/a87d85/32.png) [@pezdude](https://www.ruby-forum.com/u/pezdude)\
**Post date:** [September 3, 2010, 4:25pm UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173/5 "2010-09-03T16:25:03Z")

</div>

Edmond K. wrote:

> Dave,
> 
> I’m sorry, I had to do it the “long” way. I have zipped some sample  
> code: a  
> template and an example. _Pastie_ could not handle it. I am sending over  
> to  
> you.

Thank you for taking the time to answer my questions. You sample code  
was a huge help!

Greatly appreciate it.

Dave

---

<div class="post-metadata">

**Author:** ![pezdude](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/a87d85/32.png) [@pezdude](https://www.ruby-forum.com/u/pezdude)\
**Post date:** [September 2, 2010, 1:25pm UTC](https://www.ruby-forum.com/t/ajax-and-partials/194173/6 "2010-09-02T13:25:18Z")

</div>

Dave,

I’m sorry, I had to do it the “long” way. I have zipped some sample  
code: a  
template and an example. _Pastie_ could not handle it. I am sending over  
to  
you.

Regards,

* * *

Edmond  
Software Developer | Baobab Health Trust ([http://www.baobabhealth.org/](http://www.baobabhealth.org/))  
|  
Malawi

Cell: +265 999 465 137 | +265 881 234 717

_“Many people doubt open source software and probably don’t realize that  
there is an alternative… which is just as good…” – Kevin Scannell_

Le 2 septembre 2010 03:48:52 UTC+2, Dave C.  
[removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) a  
écrit :