Using rjs after a redirect

Let's say I have an app where a user creates something, e.g. maybe they
create a new recipe, and the app redirects to the :show action of the
recipes controller after a successful post to the :create action. How
would I have a flash[:notice] = "Recipe successfully created." shown
using rjs effects on the :show action? Essentially, I'm trying to find a
way to way to insert the following behavior after I've redirected to the
:show action;

page.insert_html :after, "all", "<div
id='notifier'>#{flash[:notice]}</div>"
page.delay(2) do
  page.visual_effect :fade, "notifier"
end
flash.discard

It's easy to do the above when we don't need to redirect - we just use
the some_action.js.rjs (or whatever the template name corresponding to
the controller action), but I just can't work out how to do this with a
redirect in between the user making a request and the rjs doing its
thing. Is this possible?

Hi Neil,

Neil Cauldwell wrote:

Essentially, I'm trying to find a way to way to insert
the following behavior after I've redirected to the
:show action;

I'm not sure I understand the scenario completely. You can do a redirect on
an XHR with RJS using page.redirect. That doesn't work for you?

Best regards,
Bill

You could embed the rjs inline in the layout, or use a simple included
js file.

Bill Walton wrote:

Hi Neil,

Neil Cauldwell wrote:

Essentially, I'm trying to find a way to way to insert
the following behavior after I've redirected to the
:show action;

I'm not sure I understand the scenario completely. You can do a
redirect on
an XHR with RJS using page.redirect. That doesn't work for you?

Best regards,
Bill

Hi Bill,

The scenario is that a user has just created something (I'll stick with
the recipe example), and they are redirected to the show action for the
recipe they just created. The flash[:notice] needs to be inserted via js
and then faded out after a few seconds. I imagine it would read
something like this, if I knew how to do it inline;

# GET /recipes/1
# GET /recipes/1.xml
def show
  @recipe = Recipe.find(params[:id])

  respond_to do |format|
    format.html { do |page|
        page.insert_html :after, "all", "<div
id='notifier'>#{flash[:notice]}</div>"
        page.delay(2) do
        page.visual_effect :fade, "notifier"
        end
        flash.discard
     }
    format.xml { render :xml => @recipe }
  end
end

I didn't know about the page.redirect method. Does that mean I could do
something like this (in the create.js.rjs) ;

page.redirect recipe_path(@recipe)
page.insert_html :after, "all", "<div
id='notifier'>#{flash[:notice]}</div>"
etc...

Thanks Stefan, are you suggesting I could always have the rjs for the
#notifier div set in the application.html.erb, rather than setting it
every time in the different rjs templates? I do want this behaviour to
be the default for the flash[:notice], so that would make sense.

Neil Cauldwell wrote:

Thanks Stefan, are you suggesting I could always have the rjs for the
#notifier div set in the application.html.erb, rather than setting it
every time in the different rjs templates? I do want this behaviour to
be the default for the flash[:notice], so that would make sense.

Yeah. Or put it directly in your application.js, that would be less
obstrusive and keeps traffic low since the js is locally cached. Check
in application.js if there is a div#flash element in the page, and if
yes, do the effect.

Neil Cauldwell wrote:

page.redirect recipe_path(@recipe)
page.insert_html :after, "all", "<div
id='notifier'>#{flash[:notice]}</div>"
etc...

No, the js will not continue after a redirect

Stefan Buhr wrote:

Neil Cauldwell wrote:

page.redirect recipe_path(@recipe)
page.insert_html :after, "all", "<div
id='notifier'>#{flash[:notice]}</div>"
etc...

No, the js will not continue after a redirect

Thanks again, I got it working. I've always had a conditional div for
the flash notice in the application.html.erb (sat in a sidebar area
originally), but I just made a move to a style which uses z-index to
always sit on the bottom right of the browser chrome (a bit like the way
facebook do their IM chat). I've moved the flash conditional to the
bottom of the application.html.erb (which is where it has to go to get
the right effect, and I've cobbled together something in application.js
which seems to do the trick on the visual effects;

Event.observe(window, 'load',
var notifier = $('notifier')
if(notifier) {
new Effect.Highlight('notifier', { startcolor: '#ffff99', endcolor:
'#fffffff' }); return false;
}

}
);

If anyone is interested, this is the tutorial I've used for the
position:fixed on the notifier div;

http://divinentd.com/experiments/emulating-position-fixed.html

I've yet to load it up on Parallels (do CSS on Mac + FF and then fix for
the rest), but I'm sure it'll work without too much fuss.