RJS and Observer for Showing/Hiding a DIV

Question

I have an RJS template that I use to essentially do the following:

Fade out a submitted form Show a response popup div Bring up a new form using a partial

What I want to do is have the RJS hold off on bringing up that second form until the user has clicked the "x" button on the popup.

The RJS code so far is as follows:

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)
end

And the popup div looks like:

<span class="close_consequence"><%= link_to_function image_tag('close.png', :alt => 'close'), "$('.consequence_popup').remove(); popup=false;"  %></span>

What I had in mind was for the "popup" Javascript variable to be used by some kind of while loop or an observer that would hold off if it was true, and then run when it was false. not sure if this is even feasible or if I should be doing this entirely differently. The RJS stuff is still quite a mystery to me.

Answer 1

I'd make that new form hidden via inline CSS, then have have the popup dismiss also show() the new form.

<div id="new-form" style="display:none;">
  ...
</div>

<div id="popup">
  <div>A Popup!</div>
  <a href="#" onclick="$(this).hide(); $('new-form').show();">Dismiss me</a>
</div>