Create a partials path in rails

Question

Im using the mailboxer gem to allow message sending on my app.

I would like the page showing inbox,sent, trash to show on my single page rather than uses having to go to another page to see this.

In order to do this I have set up a partial as follows:

index.html

<%= render :partial => 'conversations/index', :locals => {:box => @box } %>

That works fine and I see the inbox,send and trash links.

However when I click on inbox it takes me to another page with inbox, send and trash. This is the original conversations/index.html.erb (as opposed to _index). The reason is because the _index code is as follows:

<div class="row">
  <div class="col-sm-3">
    <ul class="nav nav-pills nav-stacked">
      <%= mailbox_section 'inbox', @box %>
      <%= mailbox_section 'sent', @box %>
      <%= mailbox_section 'trash', @box %>
    </ul>
  </div>
  <div class="col-sm-9">
    <ul class="list-group">
      <%= render partial: 'conversations/conversation', collection: @conversations %>
    </ul>
  </div>
</div>

the mailbox_section is a method defined in a helper called conversations_helper.rb which is as follows:

module ConversationsHelper
  def mailbox_section(title, current_box, opts = {})
    opts[:class] = opts.fetch(:class, '')
    opts[:class] += ' active' if title.downcase == current_box
    content_tag :li, link_to(title.capitalize, conversations_path(box: title.downcase)), opts
  end
end

it is the conversations_path that is taking me back to the conversations/index.html rather than letting me stay in the partial.

So the question is, how do I change the conversations_path so that I stay within the partial (removing the path doesn't help)

Answer 1

There is a way of doing what (I think) you want by asynchronously loading the rendered partials of your boxes (you'll need jQuery).

In your HTML,

<div class="row">
  <div class="col-sm-3">
    <ul id="section-selector" class="nav nav-pills nav-stacked">
      <%= mailbox_section 'inbox', @box %>
      <%= mailbox_section 'sent', @box %>
      <%= mailbox_section 'trash', @box %>
    </ul>
  </div>
  <div class="col-sm-9">
    <ul id="conversations" class="list-group">
      <%= render partial: 'conversations/conversation', collection: @conversations %>
    </ul>
  </div>
</div>

<script type="text/javascript">
  // detect click on your mailbox links
  ('#section-selector li').click(function() {
    // extract the box type
    var box = $(this).data('box');

    // ask the server for the rendered partial of this box
    $.ajax({
      url: "/conversations/" + box,
      cache: false,
      success: function(html){
        // change the content of the conversations ul with the new rendered
        // partial
        $("#conversations").html(html);
      }
    });
  });
</script>

In your Controller:

def show
  @conversations = Conversation.where(box: params[:box]) # or whatever your do
  render partial: 'conversations/conversation', collection: @conversations
end

In your Helper:

module ConversationsHelper
  def mailbox_section(title, current_box, opts = {})
    opts[:class] = opts.fetch(:class, '')
    opts[:class] += ' active' if title.downcase == current_box
    opts[:data] = {box: title.downcase} # add the box type to your link
    content_tag :li, link_to(title.capitalize, '#'), opts
  end
end

Does this seem right to you ?