How to make facebox popup remain open and the content inside the facebox changes after the submit

Question

Hi, I'm a jQuery total n00b. In my rails app this what happen:

I'm on the homepage, I click this link:

<a href='/betas/new' rel='facebox'>Sign up</a>

A beautiful facebox popup shows up and render this views and the containing form:

# /app/views/invites/new

<% form_tag({ :controller => 'registration_code', :action => 'create' }, :id => 'codeForm') do %>

    <%= text_field_tag :code %>
    <br />
    <%= submit_tag 'Confirm' %>
<% end %>

I clink on submit and if the code is valid the user is taken on another page in another controller:

def create
  # some stuff
  redirect_to :controller => 'users', :action => 'type'
end

Now I would like to render that page INSIDE the SAME popup contains the form, after the submit button is pressed but I have NO IDEA how to do it. I've tried FaceboxRender but this happens:

Original version:

# /controllers/users_controller
def type
end

If I change it like that nothing happens:

# /controllers/users_controller
def type
  respond_to do |format|
  format.html
  format.js { render_to_facebox }
 end
end

If I change it like that (I know is wrong but I'm a n00b so it's ok :-):

# /controllers/users_controller
def type
  respond_to do |format|
  format.html { render_to_facebox }
  format.js
 end
end

I got this rendered:

try {
jQuery.facebox("my raw HTML from users/type.html.erb substituted here")'); throw e }

Any solutions?

THANK YOU SO MUCH!!

Answer 1

Hi!

You can continue using facebox_render or one of it's forks, it will make everything a bit easier :)

About your problem, what you need is the form inside the facebox to make an AJAX request so you can use format.js to repond to this call. So, in this case, you need form_remote_tag to post your data using AJAX.

In the controller you will receive an AJAX request, you'll handle it with respond_to.js and then you can make a render_to_facebox again. Now you will see what you want inside of the facebox.

In the view:

# /app/views/invites/new
<% form_remote_tag({ :controller => 'registration_code', :action => 'create' }, :id => 'codeForm') do %>

    <%= text_field_tag :code %>
    <br />
    <%= submit_tag 'Confirm' %>
<% end %>

And in the controller:

# /controllers/users_controller
def type
  respond_to do |format|
    format.html
    format.js { render_to_facebox }
  end
end

I hope it helps a bit, ciao!

Answer 2

Thank you Francisco, the problem now is in the:

<a href='/betas/new' rel='facebox'>Sign up</a>

I tried to change it in:

<%= facebox_link_to "Sign up", :url => '/betas/new' %>

The facebox popup shows up but don't load the form. What's wrong?

Answer 3

Now I get an "Ajax not defined" error from the firebug console. What does it means?