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;

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.