Question

What is the best practise for creating a view page in Rails with different view-options, such as a basic view with mostly text and an advanced view with graphical features? More specifically, I would like to have a view page where the the user can toggle between a basic/advanced show view. Clicking the toggle button renders one set of divs corresponding to selected view. Should this be done though a form_for/if-else statement in html markup or is it better do to do it in javascript? I guess turning the <div id="id"> on/off could be done in javascript through:

$("#id").show()
$("#id").hide()

I have a problem understanding how a rails implementation is done, where do I put the if-else statement (i.e. if user basic view is toggled render <div id="basic">, else <div id="advanced">)?

<%= form_for ??? do |f| %>
  ...
  <%= f.submit ??? %>           
<% end %>

Edit 2:

<div class="row">
  <div class="span6">
    <div class="btn-group" id="basic-advanced" data-toggle="buttons-radio">
        <a class="btn btn-small" href="#" id="basicbutton">Basic</a>
        <a class="btn btn-small" href="#" id="advancedbutton">Advanced</a>
    </div>
 </div>
</div>

<div class="container" id="basic">
  This is the basic view
</div>

<div class="container" id="advanced">
  This is the advanced view
</div>

Now in javascript I have the following:

$("#basic").toggle();
$("#basic-advanced").click(function (){
  $("#basic").toggle();
  $("#advanced").toggle();
});

I have added the above code, but how do I keep track of which viewing mode that the page is in? From the answers it seems like one could set an instance variable, @viewing_mode, to a value corresponding to the mode, but how should this be done? Through a form?

Update: I managed to achieve a toggle using a session variable, and an if/else statement, the procedure is described here: Session variable not persisting after switch.

Answer 1

If you are using jQuery.show() and jQuery.hide() that means you need both the basic and advanced div tags rendered. Rails needs to render them both. You can just have toggle display:hidden css, here I did that with variable @use_advanced.

<div id="advanced" <%= (@use_advanced) ? '' : ' style="display:hidden"' %>>...

<div id="basic" <%= (@use_advanced) ? ' style="display:hidden"' : '' %>>...

To toggle between the two you could have a button: <button>toggle</button>

$('button').click(function () {
  $('#advanced').toggle();
  $('#basic').toggle();
});