Issue with hidden event callback not functioning properly in Bootstrap 3 popover

Question

Issue with hidden event callback not functioning properly in Bootstrap 3 popover

After studying this example, I attempted to incorporate a hidden callback function. While the show callback is functioning perfectly, the hidden callback seems to be ineffective. Can someone shed light on why this issue is occurring?

To showcase the problem, I have prepared this fiddle.

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hidden;
  $.fn.popover.Constructor.prototype.hidden = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

UPDATE

I've developed a new jsFiddle to demonstrate Christos's second code snippet applied to Bootstrap's jQBTK plugin. This plugin utilizes Bootstrap's Popovers to create a virtual keyboard. Issue: Events are linked to the dynamically formed object leading them to trigger multiple times. What strategies can be employed to optimize this scenario?

javascript twitter-bootstrap-3 callback bootstrap-popover

Answer 1

Answer №1

When using hiddenCb, the prototype function is labeled as hide and not hidden as seen in your code. Therefore, instead of

$.fn.popover.Constructor.prototype.hidden

, it should be

$.fn.popover.Constructor.prototype.hide

.

It's important to clarify that these prototype functions are considered as the methods of the popover rather than the events. While there exists a method .popover('hide'), there is no equivalent for hidden. Your current code works due to popover calling upon the methods show and hide, rather than triggering the events themselves.

The code snippet you've discovered is essentially a hack that modifies the default show and hide methods to execute your functions alongside the standard popover functionality. However, this approach may prove less than ideal when managing these particular events.

To adjust your code accordingly, replace the hidden method with hide:

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hide;
  $.fn.popover.Constructor.prototype.hide = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

However, if your intention is to adeptly manage show.bs.popover, shown.bs.popover, hide.bs.popover, and hidden.bs.popover events, the following simplistic code utilizing on will suffice:

$(document).ready(function() {
  $("[data-toggle=popover]")
    .popover()
    .on('shown.bs.popover', function() {
      alert('showCb!');
    })
    .on('hidden.bs.popover', function () {
      alert('hiddenCb!');
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

UPDATE

With regards to jQBTK, simply utilize click followed by trigger in order to employ the inherent events. This methodology ensures each shown/hidden event is triggered just once:

$('input').keyboard({
  trigger: 'click',
})
.on('shown.bs.popover', function() {
  console.log('shownCb!');
})
.on('hidden.bs.popover', function () {
  console.log('hiddenCb!');
});

Feel free to confirm the functionality through this live jsFiffle.

Answer 2

When using hiddenCb, the prototype function is labeled as hide and not hidden as seen in your code. Therefore, instead of

$.fn.popover.Constructor.prototype.hidden

, it should be

$.fn.popover.Constructor.prototype.hide

.

It's important to clarify that these prototype functions are considered as the methods of the popover rather than the events. While there exists a method .popover('hide'), there is no equivalent for hidden. Your current code works due to popover calling upon the methods show and hide, rather than triggering the events themselves.

The code snippet you've discovered is essentially a hack that modifies the default show and hide methods to execute your functions alongside the standard popover functionality. However, this approach may prove less than ideal when managing these particular events.

To adjust your code accordingly, replace the hidden method with hide:

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hide;
  $.fn.popover.Constructor.prototype.hide = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

However, if your intention is to adeptly manage show.bs.popover, shown.bs.popover, hide.bs.popover, and hidden.bs.popover events, the following simplistic code utilizing on will suffice:

$(document).ready(function() {
  $("[data-toggle=popover]")
    .popover()
    .on('shown.bs.popover', function() {
      alert('showCb!');
    })
    .on('hidden.bs.popover', function () {
      alert('hiddenCb!');
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

UPDATE

With regards to jQBTK, simply utilize click followed by trigger in order to employ the inherent events. This methodology ensures each shown/hidden event is triggered just once:

$('input').keyboard({
  trigger: 'click',
})
.on('shown.bs.popover', function() {
  console.log('shownCb!');
})
.on('hidden.bs.popover', function () {
  console.log('hiddenCb!');
});

Feel free to confirm the functionality through this live jsFiffle.

Issue with hidden event callback not functioning properly in Bootstrap 3 popover

Answer №1

Similar questions

What is the best way to format a date input field so that when a user enters a year (yyyy), a hyphen (-

The Angular material autocomplete feature fails to close automatically when the document loses focus

Mastering the A-Frame Game Loop: Tips for Separating Logic and Rendering

Exploring the DOM in JavaScript: Searching for the final ancestor containing a specific attribute

I have been working on creating a hangman game, and although I have figured out the logic behind it, I am experiencing an issue where it is not functioning properly. After inspect

Tips for storing a JavaScript string on a server using PHP and retrieving it at a later time

HTML - Using Tables to Add and Edit Rows

Steps for redirecting from a URL containing location.hash to a different page

Creating a file solely for route definitions and then employing them within index.js

Generating unique identifiers for ng-model in AngularJS

Guide on automatically attaching a file to an input file type field from a database

Displaying the scope in HTML from a custom Angular directive: A step-by-step guide

Tips for including a hashtag in an AJAX request

Angular is having trouble with binding

Encountering an error message: [$parse:syntax] when trying to implement ng-class

ajax memory leakage

What is the proper way to invoke a function that is part of a child component as a property in a React application?

Instructions for populating a DataTable with JSON data while allowing for editing of rows

Using JSON object as an argument in React functional component

Ten instances of $digest() being triggered upon the implementation of custom filters