Question

I’m using a Bootstrap modal. Right now the table listed in the modal gets loaded when the whole html page loads. I would like the data for the table loaded when the modal launches.

How can I load the data in the modal when the modal is launched?

This is the first part of my modal – it contains several Bootstrap tabs.

                  <div class="modal-body">
                  <div class="tabbable">
                    <ul class="nav-tabs">
                      <li class="active"><a href="#tab1_<%= workorder.id %>" data-toggle="tab">Details</a></li>
                      <li><a href="#tab2_<%= workorder.id %>" data-toggle="tab">Materials</a></li>
                      <li><a href="#tab3_<%= workorder.id %>" data-toggle="tab">Labor</a></li>
                      <li><a href="#tab4_<%= workorder.id %>" data-toggle="tab">Tasks</a></li>
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane active" id="tab1_<%= workorder.id %>">
                        <table border="1" cellpadding="5">
                          <tr>
                            <th>Description</th>
                            <td><%= workorder.description %></td>
                          </tr>
                          <tr>
                            <th>Client</th>
                            <td><%= workorder.client.client_name %></td>
                          </tr>
                          <tr>
                            <th>Type</th>
                            <td><%= workorder.type.typecode %></td>
                          </tr>
                          <tr>
                            <th>Priority</th>
                            <td><%= workorder.wopriority.prioritycode %></td>
                          </tr>
                          <tr>
                            <th>Scheduled Finish</th>
                            <% if workorder.scheduled_finish != nil %>
                                <td>Scheduled Finish = <%= workorder.scheduled_finish %></td>
                                <% else %>
                                 <td></td>
                            <% end %>
                          </tr>
                        </table>
                      </div>
...

Thanks for the help!

Answer 1

Use Ajax (set your links to link_to with remote => true) and render a partial. Then set the innerHTML of tab-pane to the partial content returned via Ajax. Of course you’ll need to add logic in your controller to parse out only the data for each tab.

Might help to read up on:
http://guides.rubyonrails.org/ajax_on_rails.html