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