Rendering a Rails partial within a single-page app after button-click

Question

How can I render a rails partial within a single-page app after a button-click (assuming there are at least two controllers at play)?

It is unclear to me, regardless of how much material I read:

How many controllers I need
How many views I need
How many actions I need
To which action do I assign resources to?

This is precisely what I am trying to do:

I would like for a user to visit the index page of my application. At that page, they should be able to click a button to "get party event results." The results returned to them should come from the database. This button-click request should be AJAX.

From what I understand, that means

I need two controllers: 1) StaticPagesController and 2) PartyEventsController. It means that I should have a partial for party events app/views/layouts/_part_events_results.html.erb.
I should have an app/views/static_pages/index.html.erb view.
It means that I will need a js.erb file somewhere outside of the assets/javascript path.

Currently I have:

app/controllers/static_pages_controller.rb

def index
end

app/controllers/party_events_controller.erb

def food_event
end

app/views/static_pages/index.html.erb

<%= button_to "get events", 'layouts/party_events/', remote: true %>

I have 'remote: true' set because this should indicate that the link will be submitted via AJAX.

app/views/static_pages/_party_events.html.erb

  <% food_events.each do |event| %>
    <li><%= event.text %></li>
    <li><%= event.location %></li>
    ---------------------
  <% end %>

Other info, if helpful:

Rails 4.0.0
There will eventually be many types of events, e.g. "food", "music". Do I need view partials for each one?
Open to any design solution as long as it's a single-page application. I know how to achieve this in PHP/JS, but am struggling to understand how with MVC.

Community · Accepted Answer · 2017-05-23 12:03:40Z

1

In your static page, you should have a DOM element available for the ajax to replace or modify.

In your button_to, you should specify the controller and action you would like to hit

In your party_event_controller#action, you can respond with a js and have it render a template, #action.js.erb which will perform the DOM manipulation to replace or update the page.

Similar question asked: Rails - updating div w/ Ajax and :remote => true

An tutorial showing ajax crud with unobstructive javascript: http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Feb 19, 2014 at 2:19

jamesy829

4284 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tandy Over a year ago

I'm trying to work this out. Where do I stick the action.js.erb file? Are action names pretty trivial? I notice a lot of people use the same ones: Create, Show, Delete

jamesy829 Over a year ago

You would put the action.js.erb depending in the view, based on which controller. Typically, action names in rails are CRUD, Create, Show, Delete are some of the CRUD, it also has New, Edit, Update, Index.

tandy Over a year ago

Ah, but can I name my action anything? Essentially the name of the action will have to be mirrored in a corresponding view, I thought. (Do you really only want new.html.erb, edit.html.erb, update.html.erb, and index.html.erb views?)

jamesy829 Over a year ago

Most of the time, CRUD actions are necessary. Extra controller actions are useful to handle other non-crud actions. In those extra actions, you can do a redirect or render to do what you want. Looking at your app, you would most probably only need CRUD pages for now.

Collectives™ on Stack Overflow

Rendering a Rails partial within a single-page app after button-click

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related