How do I update a list of partials rendered with a

2019-08-31 11:17发布

问题:

This is a portion of my groups view. I have a list of partials that I render with a collection of objects:

<div id="container">
  <ul>
    <li id="form"></li>
    <li id="partials">
      <%= render :partial => 'groups/partial-list-row', :collection => @allpartials, :as => :f %>
    </li>
  </ul>
</div>

In the list item with id "form" there is a ruby on rails form that is a form_for @newpartial which is defined in the Partial controller as @newpartial = Partial.new(). I have successfully used jquery to toggle the show and hide of the two list items on a "New Partial" button click, and upon completing a finished form, a new partial object is definitely created. What I'm looking for here is the collection of partials that reappears after the form submission includes the newly created partial object. What is the best way to do this? My form which sits inside the list item with id "form" looks like this:

<%= form_for @newpartial, :html => {:multipart => true, :class => 'custom'}, remote: true do |f| %>
  <% if @newpartial.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@newpartial.errors.count, 'error') %> prohibited this partial from being saved:</h2>
      <ul>
        <% @newpartial.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <%= render :partial => 'partials/form-partial', :locals => { :f => f } %>
  <div class="actions">
    <%= f.submit 'Launch', :class => 'large success button radius new_browser_tab' %>
    <a class="cancel_campaign_new">Cancel</a>
  </div>
<% end %>

I also have successfully created a function that is bounded to the "ajax:success" event of this form after the DOM is fully loaded. I just don't know if this is a right approach, and if it is, I don't know what the body of this event handler should consist of. I have created other questions relating to this same issue (I haven't found a solution to this for quite some time now). Here are the questions if you want additional context:

  • SO question 1
  • SO question 2

回答1:

What I was failing to realize is that applying the remote: true on the form indicates that the controller's action method will respond with the models "action".js.erb file. After creating that file and performing the jquery I had always intended, I was able to fix a few kinks and got that part working.

The difference between putting the jquery to render the new partial in your client side javascript and your "action".js.erb file is that the "action".js.erb file is able to make the required request to the server, whereas your client side javascript is not.

Can someone read this and let me know if the above statements are accurate? I'd really like to provide an answer that is accurate as possible for anyone that comes across this...

There are some really good tutorials at CodeSchool.com which has some free courses to take that include video lectures, slides, and exercises that I used to finally give me enough guidance on this. Also worth mentioning that if you intend to learn this stuff quickly and plan on spending a lot of time developing your web development abilities, paying the 20 dollars a month for access to all the courses is well worth it (you can cancel at any time, so learn what you need to learn and move on!).