In my RJS template, I have a process that includes:
1. Fading out a submitted form 2. Showing a response popup div 3. Bringing up a new form using a partial
My goal is to delay the display of the second form until the user clicks the "x" button on the popup.
The current RJS code looks like this:
unless @actor.health <= 0 || @actor.finished
page.visual_effect(:fade, "act_form", :duration => 0.5)
if @actor.acts.last.decision.consequence && @actor.acts.last.decision.consequence != ""
page.insert_html :after, 'act_form_wrapper', :partial => 'consequence'
page.assign 'popup', true
end
page.delay(1) do
page.replace_html("act_form", :partial => 'act_form')
if @prompt.decisions.count > 1
page.assign 'decEmpty', true
else
page.assign 'decEmpty', false
end
if @actor.play.comment_req
page << 'document.getElementById("act_comment").value = ""'
end
page.visual_effect(:appear, "act_form", :duration => 0.5)
end
page.replace_html("scores", :partial => 'scores')
else
flash[:notice] = 'This game is finished. How did you do?'
page.redirect_to(@actor)
Additionally, the popup div structure is defined as:
<span class="close_consequence"><%= link_to_function image_tag('close.png', :alt => 'close'), "$('.consequence_popup').remove(); popup=false;" %></span>
I'm considering using the "popup" Javascript variable in conjunction with a while loop or observer to control the timing of displaying the second form based on its value. I'm not sure if this approach is feasible or if there's a better way to achieve this. The RJS functionality still remains somewhat mysterious to me.