Fix #34 add "rootSelector" option for jQuery > 3

mistic100 · Aug 18, 2016 · f70b109 · f70b109
1 parent 7faa816
commit f70b109
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/bootstrap-confirmation.js b/bootstrap-confirmation.js
@@ -72,17 +72,21 @@
   Confirmation.prototype.init = function(element, options) {
     $.fn.popover.Constructor.prototype.init.call(this, 'confirmation', element, options);
 
+    if ((this.options.popout || this.options.singleton) && !options.rootSelector) {
+      throw new Error('The rootSelector option is required to use popout and singleton features since jQuery 3.');
+    }
+
     // keep trace of selectors
     this.options._isDelegate = false;
     if (options.selector) { // container of buttons
-      this.options._selector = this._options._selector = options._root_selector + ' ' + options.selector;
+      this.options._selector = this._options._selector = options.rootSelector + ' ' + options.selector;
     }
     else if (options._selector) { // children of container
       this.options._selector = options._selector;
       this.options._isDelegate = true;
     }
     else { // standalone
-      this.options._selector = options._root_selector;
+      this.options._selector = options.rootSelector;
     }
 
     var self = this;
@@ -286,7 +290,7 @@
 
   $.fn.confirmation = function(option) {
     var options = (typeof option == 'object' && option) || {};
-    options._root_selector = this.selector;
+    options.rootSelector = this.selector || options.rootSelector; // this.selector removed in jQuery > 3
 
     return this.each(function() {
       var $this = $(this);

diff --git a/example/index.html b/example/index.html
@@ -62,16 +62,16 @@ <h1>Bootstrap Confirmation</h1>
     <div class="panel panel-default">
       <div class="panel-heading">Singleton</div>
       <div class="panel-body">
-        <button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 1</button>
-        <button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 2</button>
+        <button class="btn btn-default" data-toggle="confirmation-singleton" data-singleton="true">Confirmation 1</button>
+        <button class="btn btn-default" data-toggle="confirmation-singleton" data-singleton="true">Confirmation 2</button>
       </div>
     </div>
 
     <div class="panel panel-default">
       <div class="panel-heading">Popout</div>
       <div class="panel-body">
-        <button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 1</button>
-        <button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 2</button>
+        <button class="btn btn-default" data-toggle="confirmation-popout" data-popout="true">Confirmation 1</button>
+        <button class="btn btn-default" data-toggle="confirmation-popout" data-popout="true">Confirmation 2</button>
       </div>
     </div>
 
@@ -93,6 +93,12 @@ <h1>Bootstrap Confirmation</h1>
   console.log('Bootstrap Confirmation ' + $.fn.confirmation.Constructor.VERSION);
 
   $('[data-toggle=confirmation]').confirmation();
+  $('[data-toggle=confirmation-singleton]').confirmation({
+    rootSelector: '[data-toggle=confirmation-singleton]'
+  });
+  $('[data-toggle=confirmation-popout]').confirmation({
+    rootSelector: '[data-toggle=confirmation-popout]'
+  });
 
   var currency = '';
   $('#custom-confirmation').confirmation({