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. :slight_smile: 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, 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:

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,

tabbed_conntent.zip (5.75 KB)

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