How to use AJAX loading with Bootstrap tabs?

Question

I used bootstrap-tabs.js and it has worked perfectly.

But I didn\'t find information about how to load content through AJAX request.

So, how to use AJAX load

Answer 1

I use this function and it's really nice because she prevent's you from load ajax again when going back to that tab.

Tip: on tab href, just put the destination. Add this to footer:

$("#templates_tabs").tabs({
    beforeLoad: function( event, ui ) {
      if (ui.tab.data("loaded")) {
          event.preventDefault();

          return;
      }


      ui.ajaxSettings.cache = false,
      ui.jqXHR.success(function() {

          ui.tab.data( "loaded", true );
      }),
      ui.jqXHR.error(function () {


          ui.panel.html(
          "Not possible to load. Are you connected?");
      });
    }
  });