Thursday, January 26, 2012

Using Twitter Bootstrap to Render Partials with Tabs

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.

8 comments:

  1. There are really 2 ways I could see you going about this:
    The 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)

    ReplyDelete
    Replies
    1. 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.

      Delete
  2. Oh, some sample code regarding the first one:

    $('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()
    })

    ReplyDelete
  3. The poignant guide: http://mislav.uniqpath.com/poignant-guide/

    I also have an old PDF somewhere, if you want that.

    ReplyDelete
  4. Just remember, any Sinatra app that makes it into production has likely managed to hack in half of Rails functionality. ;-)

    If you like Twitter Bootstrap, you might also like Skeleton: http://www.getskeleton.com/ ... and/or Foundation: http://foundation.zurb.com/

    ReplyDelete
  5. I'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...)

    [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

    ReplyDelete
  6. here is another tut to create vertical tabs with twitter Bootstrap.

    http://kvcodes.com/2014/04/create-bootstrap-tabs-in-wordpress-admin/

    ReplyDelete