Bootstrap Navbar, with options updating a yield in the same view?
34 views
Skip to first unread message
fayre...@gmail.com
Mar 25, 2014, 8:00:14 AM3/25/14
to rubyonra...@googlegroups.com
So after a couple of days of trawling various forums, tutorials etc - I'm still no closer to doing what is seemingly something straightforward - namely, have links on a Navbar populate a named yield with the contents of a partial. I'm probably missing something fundamental, but hey! I've asked this before, but I don't think I worded the question too well, so hopefully this time I'll do better!
My view as it stands is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Software Dev Tools Web UI</title>
</head>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
</button>
<a class="navbar-brand" href="#">MARS Web UI</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<<SNIP>>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
</div>
<body>
<div class="container">
<%= yield :mainbody %>
</div>
</body>
<script>
$(".nav li").on("click", function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
});
</script>
</html>
In the <<SNIP>> above, I have tried a couple of ideas. Firstly:
<li><a href="<%= content_for :mainbody do; render 'authentication/perforce'; end %>">P4</a></li>
<li><a href="<%= content_for :mainbody do; render 'authentication/p4_output'; end %>">P4 Output</a></li>
This simply rendered both "perforce" and "p4_output" partials one below the other, and clicking the navbar options had no effect.
So then I figured maybe something more like this was required:
<li class="active"><%= link_to "Perforce", {:action => 'renderp4'}, :remote => true %></li>
<li class="active"><%= link_to "Perforce", {:action => 'renderp4_output'}, :remote => true %></li>
But at this point I came to a grinding halt, not knowing how what would be needed in my "renderp4" and "renderp4_output" actions so as to return HTML to my mainbody yield - if it is even possible?!?
Hopefully what I am trying to achieve is obvious - while I appreciate and acknowledge I am probably rather wide of the mark with my solution currently, any guidance would be appreciated. As I say, I've hunted around, but just hit a brick wall!
Thanks :)
mike2r
Mar 25, 2014, 10:54:52 AM3/25/14
to rubyonra...@googlegroups.com
Yes, it's possible. First, I'm not sure exactly what you're rendering. If it's static, I would load it like you did in your first example and use CSS to hide it and display it only when the link is active (much like a drop down menu).
If it's not static and it's pulling content then you're on the right track, except I don't see that you're passing any parameters so I'm tending to think it's static. At any rate, if it's dynamic, you will need controller actions as in your second example. In the controller, you define response to specific formats (html, js, etc.). The following edge guide should give you an overview on how to do this:
Message has been deleted
fayre...@gmail.com
Mar 26, 2014, 7:08:06 AM3/26/14
to rubyonra...@googlegroups.com
Thanks Mike....It is dynamic - in the case of "perforce" there is a form with 2 listboxes that get their options from function calls - p4output will (eventually!) be the contents of a file on the server (This may sound risky, but it's for an internal system at work only, so not to panic!)...I'll have a go at the AJAX stuff, and see where I get! Thanks for now :)
Reply all
Reply to author
Forward
0 new messages