Forum: Ruby on Rails ajax and partials

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| %>


<div id="questionpict">
  <p>
    <%= image_tag @question.question_pict, :alt => "eye.jpg", :size =>
"470x470", :style=> "border: 3px inset #d7b9c9;" %>
  </p>
</div>


<div id="show_formatted_question">
<p>
    <br /><%= @formatted_question[:question] %>
</p>
<p>
    <br /><%= "A.   #{@formatted_question[:answer_a]}" %>
</p>
<p>
    <br /><%= "B.   #{@formatted_question[:answer_b]}" %>
</p>
<p>
    <br /><%= "C.   #{@formatted_question[:answer_c]}" %>
</p>
<p>
    <br /><%= "D.   #{@formatted_question[:answer_d]}" %>
</p>
<p>
    <br /><%= "E.   #{@formatted_question[:answer_e]}" %>
</p>
</div>


<div id="ajax_area">
  <p>
      <%= render :partial => @anno %>
  </p>
</div>


<div id = "buttons">
  <%= 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") %>
</div>


<% end %>

Partial partial_anno_1.html.erb

<p>
    <br /><%= "#{@formatted_question[:anno_1]}" %>
</p>

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 Castellano

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/) 
|
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 Castellano <lists@ruby-forum.com>

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


I put this in the show.html.erb:

<a href="#" onclick="Element.toggle('response_a')">A</a>
<a href="#" onclick="Element.toggle('response_b')">B</a>
<a href="#" onclick="Element.toggle('response_c')">C</a>



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

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:

---------------------------------
<div id="response_a">
  <%= "#{@formatted_question[:response_a]}" %>
</div>

<div id="response_b">
  <%= "#{@formatted_question[:response_b]}" %>
</div>


<a href="#" onclick="Element.toggle('response_a')">A</a>
<a href="#" onclick="Element.toggle('response_b')">B</a>
---------------------------------


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

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/) 
|
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 Castellano 
<lists@ruby-forum.com> a
écrit :

Edmond Kachale 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