CODEWITHSUNDEEP
ajaxruby-on-rails-3twitter-bootstrap
pitosalas
pitosalas

Reputation: 10882

Rails3 Twitter Bootstrap: async loading of a div

I have a set of nav-pills vertically stacked along the left. Each time I click on a pill I would like the div "report-html-content" to be loaded with the contents of html produced by the controller action corresponding to: program_reports_path(@program).

Seems very simple (sure, sure.) Here's the view:

<div class="container">
  <div class="row">
    <div class="span2">
      <ul class="nav nav-pills nav-stacked">
        <li>
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
           <%= link_to "Summary of all questions", program_reports_path(@program), 
                :remote => true, id: "reports-navlist", data: {toggle: "tab"} %>
        </li> 
        <li class="active">
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
          <a href="#" data-toggle="pill">Details on all questions</a>
        </li>
      </ul>
    </div>
    <div class="span10" id="report-html-content">
    </div>
  </div>
</div>

Here's the controller action:

  def report1
    @program = Program.find(params[:program_id])
    render :partial => "report1", layout: false
  end

It ALMOST works. Except that asking a nav-pill set to do a remote: true to a different URL for some reason makes the activation and deactivation of the tabs not work anymore.

I have two questions:

1) Can you see my bug?

2) What's the best practice way for me to achieve this with Rails 3 and Twitter Bootstrap, noting that I definitely want the content of the clicked tab to be fetched with ajax because those reports can be costly to compute.

Thank you!

Upvotes: 0

Views: 983

Answers (1)

tomaszbak
tomaszbak

Reputation: 8287

Overwrite show event like this:

<div class="container">
  <div class="row">
    <div class="span2">
      <ul id="tabs" class="nav nav-pills nav-stacked">
        <li>
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
          <a href="#" data-toggle="pill" id="reports-navlist">Summary of all questions</a>
        </li>
        <li class="active">
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
          <a href="#" data-toggle="pill">Details on all questions</a>
        </li>
      </ul>
    </div>
    <div class="span10" id="report-html-content">
    </div>
  </div>
</div>

<script>
  $(function() {
    $('#tabs').bind('show', function(e) {
      if ($(e.target).attr('id') == 'reports-navlist')
        $.ajax({
          url: '<%= program_reports_path(@program) -%>',
          data: { toggle: "tab" }
        })
    });
  });
</script>

You can read more about tabs events at http://twitter.github.com/bootstrap/javascript.html#tabs

Upvotes: 1

Related Questions