#20 Not RJS and Turbolinks
11-9-2015

Summary

Using Javascript responses, we can make our Rails application have a quick and responsive Single Page Application feel to it.
5
rails javascript performance 8:55

Summary

index.html.erb

    <h4>Listing Users</h4>     <table class="table table-condensed table-hover">       <thead>         <tr>           <th></th>           <th>First name</th>           <th>Last name</th>           <th>Email address</th>           <th>Updated</th>         </tr>       </thead>       <tbody id='users'>         <%= render @users %>       </tbody>     </table>     <br>

    <%= link_to 'New User', '#new_user', data: { toggle: 'modal' }, class: 'btn btn-primary' %>     <div class="modal fade" id="new_user">       <%= simple_form_for User.new, remote: true do |f| %>       <div class="modal-dialog">         <div class="modal-content">           <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>             <h4 class="modal-title">New User</h4>           </div>           <div class="modal-body">             <div class="form-inputs">               <%= f.input :first_name %>               <%= f.input :last_name %>               <%= f.input :email_address %>             </div>           </div>           <div class="modal-footer">             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>             <%= f.button :submit, class: 'btn btn-primary' %>           </div>         </div>       </div>       <% end %>     </div>

_user.html.erb

    <tr id="<%= user.id %>">       <td>         <%= link_to icon('pencil'), edit_user_path(user) %>         <%= link_to icon('trash'), user, method: :delete, remote: true, data: { confirm: 'Are you sure?' } %>       </td>       <td><%= user.first_name %></td>       <td><%= user.last_name %></td>       <td><%= user.email_address %></td>       <td><%= user.updated_at %></td>     </tr>

users_controller.rb    def create
      @user = User.new(user_params)
      @user.save
      # redirect_to @user, notice: 'User was successfully created.'
    end

    def destroy
      @user_id = @user.id
      @user.destroy
      # redirect_to users_url, notice: 'User was successfully destroyed.'
    end
create.js.erb    $('#users').prepend('<%= j render @user %>');
    $('#new_user').modal('hide');
destroy.js.erb    $('#<%= @user_id %>').slideUp();


abitdodgy said about 2 years ago:

Great video. A couple of things: You don't have to store the id of the user before destroying it. The user gets destroyed, but its instance variable is still available to use in the template. Also, in the templates, you have access to the dom_id helper. You can do `id="#<%= dom_id @user %>"`. As for the user partial, I believe ids can't start with a number. It would have been really nice to see how you would handle validation failures with the modal.

kobaltz PRO said about 2 years ago:

Really cool about

dom_id

I wasn't aware of it!

I do plan on doing an episode on client side validations so the forms can be checked prior to submitting. Ideally, something that would look at the model's validations and generate the necessary javascript.

pstovel said 5 months ago:

Thank you for this episode and #21 = they were super helpful!
Good info also from previous comments (thank you!)
Sometime if you could do a version contrasting Bootstrap modal vs Foundation 6 reveal that would be cool.

I'm working on a rails application that uses Foundation 6 reveals vs bootstrap modal.

I have it working, however the page by page (index, new, show, etc) error message handling that used to work (for example** ActiveRecord::RecordNotUnique**).

The second comment touches on the validation/error handling which is kind of what brought me here...

After investigation, we don't necessarily want the popped-up reveal to close but ideally have some JS reload the reveal popup with the errors. At the moment this is beyond my skill and experience - I will have to leave that for later. The workaround below makes me feel like I'm ignoring the error handling that is already there.

What I did manage, trying to stick to DRY, was in the application_controller.rb I put rescue_from logic. Here ( just as an example - i realize this is a very crude and simplistic way of handling these errors.) For now its better than having nothing happen (from the user point of view)

rescue_from ActiveRecord::RecordNotUnique, with: :record_not_unique

private
    def record_not_unique(exception)
        @errormessage = "Record not unique - attempt to create a duplicate."
        render 'layouts/activerecord_alert'
end

Here are the simple layouts/activerecord_alert.js.erb contents:

    alert('<%= @errormessage %>');

At first I passed the entire message (exception.message) but there were colon characters to escape and too much info for the end users. Of course, other exceptions will have to be covered off but now i have at least a crude way to handle them.

Login to Comment