Reload only the bootstrap tab when clicked

Question

I have the following tab panel :

<div class="panel with-nav-tabs panel-default">
      <div class="panel-heading">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#map" data-toggle="tab" id="myTab">Map-location</a></li>
          <li><a href="#comments" data-toggle="tab">Comments</a></li>
          <% if shopper_signed_in? %>
          <li><a href="#addComments" data-toggle="tab">Add Comment</a></li>
           <% end %>
        </ul>
      </div>

and I would like to reload the first tab (when I click on it) in order for the map to appear.

This is what I get form the browser inspector:

 <a href="#map" data-toggle="tab" id="myTab">Map-location</a>

Currently I'm trying this:

<script> jQuery("#myTab").click(function() {  location.reload(true); });</script>

but it's not exactly what I'm after. The current setup is reloading the whole page, I would prefer if only the tab reloads when I click on it.

Answer 1

What is the Server-side part behind this? Usually, the practice is to provide a server side action to provide the comments section only.

Assuming this is maybe PHP, provide comments.php which will return comments only, and reload the Comments tab like this:

$("#commentsDiv").load("comments.php?id=" + id)

UPDATE As it turns out that Ruby is in use, which I don't know, please adapt the solution to Ruby yourself. You just need a separate action/route for delivering comments only.

What you can also do, but it's not recommend, is to get the full content, but grab the specific part of the page only:

$("#commentsDiv").load(window.location.href + " #commentsDiv");

should be like this. This actually is the "magical method to reload just part of the page" :) See Documentation , Section Loading Page Fragments (as you can read there, this method has some drawbacks, so it's not really recommended, eg JavaScript is not executed)