Merge pull request #4 from seanhuber/reload_tabs

Added markForReload function
seanhuber · Aug 24, 2016 · fa75e56 · fa75e56
2 parents 4dc5abc + c12030b
commit fa75e56
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -99,6 +99,10 @@ $('#tab_modal_anchor').tabModal({
 
 // show() displays the tabbed modal. It often makes sense to put this in a click handler.
 $('#tab_modal_anchor').tabModal('show');
+
+// markForReload(tab_id) - Marks a tab to be reloaded. This means the next time the tab is selected, it will load
+//                         content even if the tab has been previously loaded. 
+$('#tab_modal_anchor').tabModal('markForReload', 'fourth');
 </script>
 ```
 

diff --git a/bootstrap-tab-modal.js b/bootstrap-tab-modal.js
@@ -81,6 +81,10 @@
       $( "a[data-target='#"+tab_id+"']" ).addClass('hidden');
     },
 
+    markForReload: function(tab_id) {
+      $('#' + tab_id).addClass('load-content');
+    },
+
     setDefaultTab: function( tab_id ) {
       $.each( this.options.tabs, function(k, v) { delete v.active; });
       this.options.tabs[tab_id].active = true;
@@ -104,17 +108,19 @@
       var $modal = this._buildModal();
 
       $initial_tabpanel = $modal.find('.tab-pane.active');
-      if ( $initial_tabpanel.text() == 'use-throbber' ) {
+      if ($initial_tabpanel.hasClass('load-content')) {
         this._addThrobber( $initial_tabpanel );
         this.options.tabs[$initial_tabpanel.prop('id')].showTab();
+        $initial_tabpanel.removeClass('load-content');
       }
 
       $modal.find("a[data-toggle='tab']").on('show.bs.tab', function (e) {
         that.hideAlert();
         var $tabpanel = $($(e.target).data('target'));
-        if ( $tabpanel.text() == 'use-throbber' ) {
+        if ($tabpanel.hasClass('load-content')) {
           that._addThrobber( $tabpanel );
           that.options.tabs[$tabpanel.prop('id')].showTab();
+          $tabpanel.removeClass('load-content');
         }
       });
 
@@ -201,7 +207,7 @@
 
         t_html.t_links += "<li role='presentation' class='"+tab_class+"'><a data-target='#"+k+"' aria-controls='"+k+"' role='tab' data-toggle='tab'>"+v.label+"</a></li>";
         var tab_content = v.hasOwnProperty( 'content' ) ? v.content : that.options.default_tab_content;
-        t_html.t_panels += "<div role='tabpanel' class='tab-pane "+tab_class+"' id='"+k+"'>"+tab_content+"</div>";
+        t_html.t_panels += "<div role='tabpanel' class='load-content tab-pane "+tab_class+"' id='"+k+"'>"+tab_content+"</div>";
       });
       return t_html;
     },

diff --git a/demo/demo.html b/demo/demo.html
@@ -88,7 +88,9 @@ <h4>Click the button to display the tabbed modal:</h4>
             label: 'Fourth Tab',
             showTab: function() {
               setTimeout( function() {
-                $('#demo').tabModal('setTabContent', 'fourth', '<h3>Fourth!</h3>');
+                $demo = $('#demo');
+                $demo.tabModal('setTabContent', 'fourth', '<h3>Fourth!</h3>');
+                $demo.tabModal('markForReload', 'fourth');
               }, 500); // just a delay for demonstrating the built-in throbber
             }
           },

diff --git a/qunit/qunit.js b/qunit/qunit.js
@@ -93,3 +93,18 @@ QUnit.test( "add tabs", function( assert ) {
   });
   $anchor.tabModal('show');
 });
+
+QUnit.test("reload tab", function(assert) {
+  expect(1);
+  var done = assert.async();
+  var $anchor = $("<div id='test5'></div>");
+  $anchor.appendTo('body');
+  $anchor.tabModal(_modal_opts).on( 'sh.tabModal.shown', function() {
+    tabLink($anchor, 'fourth').trigger('click');
+    $anchor.tabModal('markForReload', 'fourth');
+    assert.ok($('#fourth').hasClass('load-content'));
+    $anchor.tabModal('close');
+    done();
+  });
+  $anchor.tabModal('show');
+});