Rails layouts dynamic rendering

Question

I have a Ruby on Rails application that, at it's most basic level consists of two panels, the left and the right side panel. What I want is to use this as a layout, and in the controllers to be able to render like render <view_name>, <right or left panel>, so that, in combination with turbolinks, only the left or right side panels are being created dynamically.

I searched the internet but didn't find any examples like mine. I'm sure this is doable but how?
EDIT:it should be able to run in chrome for Android. One solution would be to render all the views on the first request, and when I click a link panels are hidden and shown, but I don't think this is Ok. Any opinions?

Answer 1

Well after some research I reached the following conclusion:

With I was trying to do is not possible unless you set some limitations.

Only one of the two panels can render "actions" that are stored in the browsing history. If both panels render actions that are stored in the browsing history it's highly probable that navigation won't work as expected.

With this in mind I realized that what I actually need is to render the navigation aware actions in the left panel, and in the right panel render the other stuff(I call them utilities). For example one thing that I render in such a panel is a Chat-Panel.This is how facebook works with it's chat.

So basically I can user standard turbolinks to handle the requests which store browsing history and something like pjax for the "Utils" panel. The only problem is the Turbolinks completely renders the whole page, even if you send a small piece of html as a response.

To solve this I ended up using wiselinks, which is the perfect combination of turbolinks and pjax. Also, unlike pjax, wiselinks can even handle forms.

Answer 2

Thats unfortunately not possible with turbolinks, neither with pjax itself (to have multiple so called pjax-containers).

Turbolinks always replaces the content of the whole body element. Pjax always replaces the content of the element with pjax-container data attribute.

There are ways to do it of course. Ditching client side javascript frameworks you can perform an ajax request and return a js response.

From top of my head you can have view that goes something like this:

index.html.erb

<%= link_to 'Show', show_path, remote: true %>

controller

def show
  # Do the work, fetch data from database etc.

  # Keeping both formats ensures that when you hit the url directly 
  # the whole page gets rendered as usual (show.html.erb), 
  # when the request is an ajax request using the view snipper above just
  # the javascript for replacing the content of a single panel is rendered (show.js.erb)
  #
  # Rails is smart enough so it should not be required to include the respond_to block
  # in the controller, Rails automagically chooses an appropriate response format
  # based on the request, you only need to have the views in place,
  # but I keep it here so you get a picture.
  respond_to do |format|
    format.html
    format.js
  end

show.js.erb

$('.right-panel').html('<%= j render partial: "something" %>')

Answer 3

I have no idea if it's a best practice but I needed something similar and here is what I did:

I have this layout

1st panel | 2nd panel  | 3rd panel
Site Menu | Posts List | Article Show

To always render posts list, I needed to add to my application controller:

class ApplicationController < ActionController::Base
  before_action :set_posts

  def set_posts
    @posts = Post.all
  end
end

Then in my layout, here is what I did:

%body
    #site-wrapper
      #site-canvas
        #reading-list
          #reading-nav-block 
          = render 'posts/list'

        #article-show
          #article-nav-block
          #article-content-block
            = yield
        #site-menu
          #logo-block
          .menu

Basically I extracted posts#index into the posts#_list partial and set the variable, rendered post/_list in all layouts. Here is the result: