Rails表单，加载新的记录页面，而不是重定向到该页面

Question

I'm creating my first app in rails. Basically, I have a new customer form, normally when you enter a new customer you are redirected to the record you created.

However as I am loading all my pages via ajax I want to load the new record in rather than re-direct to it.

I already have the form firing via ajax, I just need to know how I can access the new record URL to load it into my container.

Hope that makes sense. Thanks in advance!

Answer 1

You can add an option :remote => true to your form_for helper method, so that instead of page redirect the form gets posted via ajax. For Ex :

<%= form_for(@post, :remote => true) do |f| %>
  ...
<% end %>

Then create a new template named create.js.erb which will get rendered after create method has been executed.

In this template, you can display the details of the new record you created.

For Ex :

$('some_element').replaceWith('<%=@posts.name %>');

Answer 2

Edit: You mentioned using load in your javascript. I would generally avoid this as you're making two round trips to the server. 1) Create 2) Get html to load into a div. Additionally, if there is an error that happens, it will be more difficult to catch and do the "good thing", whatever that might be.

Once you've added the remote: true option to your form, you need to deal with what happens on the server side of things.

Assuming your using REST, you'll have a controller with a create action in it. Normally, this method is creating the item and then subsequently returning the HTML for the create page. Instead of this, we need to create a javascript view for the action. This will tell the calling page what to when this action is hit.

Let's assume your form has a div called "new_record_form" and that you have another div called "new_records". You'll want to blank out the form elements in the form, effectively resetting it. You'll also want to add the new record to the "new_records" div.

To add the record to the new records div, you might do something like this.

$("#new_records").append("#{@new_record.name}");

When you submit the form, you should see this added. One great way to debug issues is to use the inspector. If you're in chrome, right click anywhere, inspect element and select network. Do this prior to form submission. You'll be able to see the ajax call and the response. Your logs will also be helpful.

Don't forget to blank out the form as well.

Note: You mentioned all your pages are ajax, but I highly suggest you evaluate if this makes 100% sense due to the various issues that result. Not saying this is the best article on the subject but might be worth a read.