Question

So I have a rails application that has two different navigation headers. One that is used for the majority of pages and another navigation header that is used for only a few pages. Additionally since the navigation is loaded in the application.html.erb page (shared between all the pages of the application) the navigation html is never refreshed from the server unless the user refreshes the page. And since each page is loaded through ajax (using pjax) it means that when I move between two pages that need different navigation headers the navigation header is not updated.

I have a few solutions that are possible but I don’t like them since I don’t want to have to add code to every view that I have. The main solution being move the navigation header into the views (instead of the global application.html.erb), or add javascript to every page that checks that the navigation is the correct one and if not replace it. But for replacing it I’m not sure how to load the html which is a partial and contains data from the models.

Note: directly visiting each url works fine.

I feel like I’m missing some easy approach since this feels like it should be a fairly common problem but I am unable to find anything while searching.

Edit: and I am using jquery

Answer 1

Since you have only two navs, generate them both in your layout and hide them.

<div id="nav">
  <div id="nav1" class="nav" style="display: none"><a href="#">Nav1</a></div>
  <div id="nav2" class="nav" style="display: none"><a href="#">Nav2</a></div>
</div>

In your page’s JS, create a function that will show the one you want. When you update the page via pjax, you’ll want to pass in some JS to execute, calling chooseNav with the one you want.

<script type="text/javascript">
  function chooseNav(sel) {
    $('#nav .nav').hide();
    $('#nav' + sel).show();
  }

  $(function() {
    chooseNav(1);  // Default nav to load when page loads
  });
</script>