Develop Reference

How do I destroy all instances of Bootstrap Popover?

I have a single page app using Backbone, and whenever I over over something and then click the "back" button, the popover forever stays.
I want to destroy all instances of popover when a new instance is loaded.

Finding the popovers that are created through the data API is not difficult and has been covered in other answers like those of David Mulder and Amir Popovich. You just do:
$("[data-toggle='popover']").popover('hide');
Or you can use destroy if you need to or prefer to.
The challenge is to handle those popovers that are created dynamically.
Marking the Elements with Popovers
I would implement something like this. I'd override the default popover method and I'd try to perform this override as early as possible so that everything that needs a popover uses my override. What it does is just mark elements that use a popover with a class. Bootstrap does not mark them itself:
// Override popover so as to mark everything that uses a popover.
var old_popover = $.fn.popover;
function my_popover() {
this.addClass('marked-as-having-a-popover');
return old_popover.apply(this, arguments);
}
$.fn.popover = my_popover;
Then to clear everything before the unloading, I'd put in the code that detects the unloading the following:
$(".marked-as-having-a-popover").popover('hide');
Or it could use destroy rather than hide if testing shows that it works better for your use-case.
Now, the method above will work if the override happens early enough and you do not have a page where multiple jQueries are loaded. (Yep, this is possible.) I use something similar to deal with tooltips in one of my applications so I know the principle is sound. It so happens that in my app, all tooltips are created by my code so there is no risk of missing something.
Finding All Elements with Popovers, Even Unmarked
If you are in a situation where a popover can be created without being marked (I call this an "escapee"), then you need to query the whole DOM and find which elements have popovers. There is no shortcut here. You cannot rely on attributes like data-content because popovers can be created wholly dynamically (i.e. without any of the data- attributes). Also, all kinds of elements can get popovers, so you cannot reliably assume that only button elements will have a popover. The only surefire way to find everything that needs handling is to look at each element in the DOM and check whether it has a popover:
// Obviously this is quite expensive but in a situation where there *can* be escapees
// then you have to check all elements to see if they have a popover.
$("*").each(function () {
// Bootstrap sets a data field with key `bs.popover` on elements that have a popover.
// Note that there is no corresponding **HTML attribute** on the elements so we cannot
// perform a search by attribute.
var popover = $.data(this, "bs.popover");
if (popover)
$(this).popover('hide');
});
Again, destroy could be used rather than hide.
Proof of Concept
Here is a fiddle that illustrates the entire thing:
"Add a Dynamic Popover" simulates code that would add a popover when the override is in effect.
"Add an Escapee" simulates code that would add a popover and somehow manage to use the original Bootstrap code.
"Clear Marked" clears only the marked popovers.
"Clear All" clears every single popover marked or not.

try with this:
$('YOUR_ELEMENT_SELECTOR').popover('dispose');
reference url: https://getbootstrap.com/docs/4.1/components/popovers/

Its very simple, just you have to call one function popover() with argument "destroy" to destroy the popover. It will destroy all popovers which is created by $("[data-toggle=popover]").popover();
you can check documentation for more options and arguments of popover().
I suggest you to destroy popovers with having specific class name instead of using following code.
$("[data-toggle='popover']").popover('destroy');
The above code will destroy all popovers in the page. So instead of this, use class selector.
$(".YourClassName").popover('destroy');

If you have problems and need to remove all for sure:
$('.popover').remove();
will help (Popover automatic add this class, even for dynamicly created objects). It destroys all the popover DOM-Object incl. callbacks, etc.
But thats the rough way. Typically I displose all by popover class (clean way) and to be sure I do a hard clean up after. Works for me fine!
$('.popover').popover('dispose');
$('.popover').remove();
If you like to remove all execpt one, use a filter() with :not-Selector
$('.popover').filter(':not(#yourID)').popover('dispose');
$('.popover').filter(':not(#yourID)').remove();
popover adds also a id with a random number
#popoverxxxxx where xxxxx is a five digit number.
this helps sometimes to compare popovers. Of cause this could also be used to identify the popovers.

Something generic like this (assuming you're using data-bindings) should do the trick:
$('[data-toggle="popover"]').popover('hide')
or the more extreme call
$('[data-toggle="popover"]').popover('destroy')
though I doubt that would make sense often. Still to address the specific bug you're encountering you should create a minimal test case so that that bug itself can be addressed.
Oh and if you specifically want to check for open popovers you can use .data("bs.popover").$tip.parent().length (which is a bit of an hack), for example:
$('[data-toggle="popover"]:eq(0)').data("bs.popover").$tip.parent().length == 1

You can hide all popovers by using this:
$("[data-toggle='popover']").popover('hide');
You can destroy all popovers by using this:
$("[data-toggle='popover']").popover('destroy');
The difference between hide and destory is that when you hide a popover you do not need to reactive it, but when you destroy it you do.
Check out my JSFIDDLE and then:
Click on all popovers and then click hide. After clicking hide you can click on the popovers again.
Click on all popovers and then click destroy. After clicking destroy try clicking on the popovers again and see that nothing will happen since they are destroyed. In order to make them functional again, you will need to click on reactive and then try.

Popovers must be initialized manually, so you know exactly what you have to destroy because you did initialize it.
You should just call the destroy function with the same selector.
Or maybe I am missing something ?

Disable Selectize Input Shiny

I have another problem with my shiny app. The goal is to disable some inputs in my app when the user presses an actionButton. I found this solution, which works fine for the textinputs and the numeric inputs, but oddly not for selectinput or selectizeinput. I know the solution contains somehow using javascript, but I don't know how.
Thanks in advance for the help!
Edit:
Perhaps I haven't made it clear enough. Sorry guys! I'll add the necessary code chunks.
This is the disablefunction from the link. It works fine with actionButtons and numeric Inputs, but not with select or selectize Input.
disableActionButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('disabled',true)"
,sep="")))
disableselectButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('select',false)"
,sep="")))
disableselectButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('hide',false)"
,sep="")))
This is an example of the Inputs which don't get disabled. As I said the solution lies, probably, in javascript, but I don't even know the fundamentals to be honest. I've tried different probs like hide=true oder select=false, which didn't work (you can see the functions that did not work above as well).
selectInput("algorithmicMethod1",
label=h5("Berechnungsalgorithmus erster Wahl"),
c("RoT","Pickands"),
selected="RoT"),
conditionalPanel(condition="input.algorithmicMethod1 =='RoT'",
selectInput("algorithmicMethod2",
label=h5("Berechnungsalgorithmus zweiter Wahl"),
"Pickands",
selected="Pickands")),
conditionalPanel(condition="input.algorithmicMethod1 =='Pickands'",
selectInput("algorithmicMethod2",
label=h5("Berechnungsalgorithmus zweiter Wahl"),
"RoT",
selected="RoT"))
So, is there any other way to disable the select/selectize-Inputs?
Thanks again.:)

Solution: you can use my package shinyjs for that - you just call shinyjs::disable(id) and it will work.
Explanation why it's not super simple: the problem is that when you use selectize, it creates another select box that is just pretty HTML but it's not a real HTML input element, so it doesn't respond to the disabled property like real HTML tags do. Disabling a selectize can be done using JS if you look at the selectize.js documentation, but it's not very convenient with shiny. :(
If you don't use selectize (selectInput(selectize = FALSE)), disabling will work just fine.

Failure to select item to change background remains after switching off the current page

I have a website on which I insert an select with option for the user to choose and each of the options picked will result in a change in the page background's color.
Also I have a navigator to move between 2 pages (for example, page with title "Tittle A" and another with the same DOM structure but its title "Title B")
The option includes "iA, iB, iC" items.
The problem is like this,
in page A, if I choose one option, e.g iB to change the background color, then I pick the navigator to select page B, I will still see the selected iB although the background is refreshed into page B.
Anyone any idea please. I believe this is a cached issue but I have no idea how to resolve this with maybe a piece of javascript [jquery] code or means to flush the cache each time the page is refreshed. Thank you

I think that it's a cache effect. To solve this problem try to select needle option by js. Something like this:
$(function(){
$('#your_option_id_for_example_iA').click();
})

It's due to a "feature" in modern browsers that remember you selection/input in input fields. It's called autocomplete. To prevent the browser to remember you choice, you need to turn it off. It can be done with HTML or JavaScript/jQuery.
HTML:
// For just a specific element
<input type="text" autocomplete="off" />
// For an entire form
<form autocomplete="off">
jQuery:
$('input, select').attr('autocomplete', 'off');
You can read more about it here:
https://developer.mozilla.org/en/docs/How_to_Turn_Off_Form_Autocompletion

How to hide a field in SharePoint Display Form based on the field name (jQuery)?

I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.

Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});

I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();

Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});

It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.

If its just the Default Display Form, How about just creating a view and making it default?

The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.

Getting an event from a combobox when selecting the same item

I have a few HTML pages. The header contains a combo which allows a navigation by selecting different pages : A, B, C, D.
For the moment, I use:
combo.change(function(){
window.location=path;
});
But I would like to select A even if A is already selected, which make a kind of reset of the page. I tried the events blur or click, but it's not working the way I would like.
I know it's not a great web design, but it's a request by my client.

combo.children('option').click(function(){
window.location=path;
});
fiddle : http://jsfiddle.net/z4H5R/1/

Even though the requirement is very simple, there is no direct solution for this. Could have fixed this if all browsers had supported click and key events for option tag.
So one solution I have to suggest is using dropkick - a jQuery drop down plugin.
http://jamielottering.github.com/DropKick/
This plugin actually hides the select element and adds a proxy drop down element, in which actually options are li elements with a tag. The plugin is coded in such a way that it triggers change event even if the newly selected option is the current one. You can see it in the first example. It also supports key navigation.

I found a nice solution with Jquery :
The real code with my combo with id='route' is :
$("select#routes option").click(function(){
console.log("Click on "+$("#routes").val());
window.location= $("#routes").val();
});
The $("select#routes option").click() means that I click on the DOM tag into the tag.
And it Works !