It's been a good week for coding. I've done some pair programming, interviewed at iGoDigital, and dug into Twitter Bootstrap.
Which is actually the topic of this post! WEIRD!
Anyone ever tried using those sexy little tabs to render partials? Basically I'm working on Chorenivore again, and I want a tabbed view of the days of the week, with each tab containing items that are supposed to be done that day. I'm currently thinking of a separate partial for each day, though this could probably be reduced to one partial that simply renders each chore that's been tagged with the day of the week, but I thought I'd make it stupid before I made it clean.
Here's the specific code I'm talking about:
Twitter Bootstrap Tabs
I understand how to switch through actual links just fine using these tabs, but how would you do the same thing with partials? I found this question on StackOverflow that seems to address this, but I couldn't get his example to work.
Here's a link to Chorenivore on Git:
Chorenivore on GitHub
A couple other things. First off, I haven't really used Rails in the last four or five months and it feels so BULKY compared to Sinatra. I'm all "WTF, how do I link to a new view and actually make it do right?"
And does anyone know where I'd find Why's Poignant Guide to Ruby? I feel a book report coming on.
There are really 2 ways I could see you going about this:
ReplyDeleteThe first is you load all chores as normally, but they are all hidden except the ones on the selected tab; and changing tabs, hides the rest and reveals the right ones.
The second is you AJAX in a partial, or JSON to build the ones for the selected tab.
The first way, you render them as normally, then when looping over them in the view, give them a class name that matches the day. In your tab-switching javascript, just hide or show the ones with a matching day.
The second way, you add a custom controller action and route for say:
resources :chores do
collection :for_day
end
def for_day
@chores = @chores.where(:day => params[:day])
render :layout => false
end
And have javascript events that pull in the rendered partial something like this:
$.get('/chores/for_day?day='+$('ul.tabs li.active').text(), function(data) {
$('#chores').html(data);
});
Of course, this need to be wired up with a container element to target to shove the data in (I used #chores for example)
Awesome, thanks for the help! I was assuming I'd need some Ajax to make this happen, and this is good advice. I'll give this a shot later today.
DeleteOh, some sample code regarding the first one:
ReplyDelete$('ul.tabs li a').click(function(){
// make the 'active' tab plain
$('ul.tabs li.active').removeClass('active')
// make the clicked tab's li 'active'
$(this).parent('li').addClass('active')
var dayname = $(this).text().toLowerCase()
// hide all chores
$('.chore').hide()
// unhide the ones with the same day
$('.chore .'+dayname).show()
})
The poignant guide: http://mislav.uniqpath.com/poignant-guide/
ReplyDeleteI also have an old PDF somewhere, if you want that.
Just remember, any Sinatra app that makes it into production has likely managed to hack in half of Rails functionality. ;-)
ReplyDeleteIf you like Twitter Bootstrap, you might also like Skeleton: http://www.getskeleton.com/ ... and/or Foundation: http://foundation.zurb.com/
ruby on rails experts are invited to resolve this query :D
ReplyDeleteI'm not exactly sure what effect you are going for, but why use partials? Why not yield and provide? E.g. for detecting "active" tabs in bootstrap you can, In your primary layout (replace brackets appropriately...)
ReplyDelete[li class=<%= yield(:tabname_nav).empty? ? '' : yield(:tabname_nav) %>><%= link_to ...
And for the corresponding tab:
<% provide(:tabname_nav, 'active') %>
See
http://stackoverflow.com/questions/2907245/yield-and-default-case-do-not-output-default-case
here is another tut to create vertical tabs with twitter Bootstrap.
ReplyDeletehttp://kvcodes.com/2014/04/create-bootstrap-tabs-in-wordpress-admin/