Develop Reference

Problem setting attribute in JS with popover data-toggle

I am trying to display content when hovering over an icon.
When I hardcode it in my HTML it works fine.
But when I try to render the same thing through javascript, nothing happens on hover.
So this works when written in HTML directly:
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
data-content="hello"i>
This does not work
<!--html-->
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
i>
<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");
When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.
Thanks for any help!

If you use bootstrap, you might want to call popover event manually after manipulating element by JS.
$('[data-toggle="popover"]').popover()
I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.

Bootstrap Button Group to dynamically Change Text, HREF and Icon - JQuery

I have a Bootstrap Button group that used a split button dropdown. What I want to do is when you select an option from the dropdown, the text, href and icon will change on the button. I can get the text to change just fine, but I'm getting stuck with changing the HREF attribute and the icon.
HTML
<div class="btn-group">
<span class="standard">Search</span><span class="mobile"><i class="fa fa-search"></i></span>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Search</li>
<li>Song Search</li>
<li>Advanced Search</li>
</ul>
</div>
JAVASCRIPT
$(".dropdown-menu li a").click(function(){
$(this).parents(".btn-group").find('a.btn').html($(this).text());
$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
$(this).parents(".btn-group").find('a.btn i').removeClass();
$(this).parents(".btn-group").find('a.btn i').addClass($(this).data('icon'));
});
I'm want to use the data-values, because in the long run, this dropdown will be dynamic, the list will depend on which page it appears on.

ok... apparently everything is correct EXCEPT the href portion.
instead of
$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
use
$(this).parents(".btn-group").find('a.btn').attr('href', $(this).data('value'));
I have a couple console.logs displaying the results of the change, and it's all working perfectly.

HREF
Your href doesn't change because
.attr('href') = $(this).data('value');
Is not the way to change an attribute. It should be:
.attr('href', $(this).data('value'));
ICON
The icon change doesn't work because
$(this).parents(".btn-group").find('a.btn').html($(this).text());
Removes the entire content from the a.btn, which includes the <span> which contains the <i> that contains the icon. Basically, this line also removes the <span class="mobile"><i class="fa fa-search"></i></span>, so there is nothing left to removeClass or appendClass to :-D!
Here is your working code: https://jsfiddle.net/DTcHh/16689/
Happy coding!

Try this code.
$(".dropdown-menu li a").on("click",function(){
var icon = $(this).attr('data-icon');
var html = $(this).html();
$(this).parents(".btn-group").find('a.btn').html('<i class="'+icon+'"></i>'+html);
$(this).parents(".btn-group").find('a.btn').attr('href', $(this).attr('data-value'));
});

You can do something like:
document.getElementById('elementid').className = 'classname'
or a string replace:
document.getElementById('elementid').className
= document.getElementById('elementid').className.replace(your replace code)

Event difference bootstrap collapse

at the moment i've code out like
$('.collapse').on('show.bs.collapse',function(){
$('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-menu-up');
});
$('.collapse').on('hide.bs.collapse',function(){
$('.glyphicon-menu-up').removeClass('glyphicon-menu-up').addClass('glyphicon-plus');
});
and my HTML Code look like (for example)
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#a" aria-expanded="false" aria-controls="a"></span>
<div class="collapse" id="a"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#b" aria-expanded="false" aria-controls="b"></span>
<div class="collapse" id="b"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#c" aria-expanded="false" aria-controls="c"></span>
<div class="collapse" id="c"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#d" aria-expanded="false" aria-controls="d"></span>
<div class="collapse" id="d"></div>
The things that happening now is
when i click to call function or expand div all the span class change into "glyphicon-menu-up" (triggered by expending)
Things that i want to do is
When i click one of them to call function or expand div i need only one span class i've click to change the class
Optional
when i click another span (or to expand other div) the span/div i click before back to normal (not click) states while i'm using
$('.collapse').click(function(e){
e.stopPropagation();
});
Change JS Only would be grateful
Because i don't want to change HTML code (in this case it's only example but in my whole project it's hard to change so i try to select that span by using collapse event of bootstrap)
Thanks

You need to refer with current element using this when you are collapsing as below:
$('.collapse').on('show.bs.collapse',function(){
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
//get the previous span of this element and toggle its above classes
}).on('hide.bs.collapse',function(){
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
//get the previous span of this element and toggle its above classes
});
DEMO
Regarding your optional case, I hope you are expecting the below functionality:
$('.collapse').on('show.bs.collapse',function(){
$('.collapse').not($(this)).removeClass('in');
//hide all divs except this which are open by removing its `in` class
$('.collapse').not($(this)).prev('span').addClass('glyphicon-plus').removeClass(' glyphicon-minus');
//change all classes except the previous spans of this element back to normal
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
}).on('hide.bs.collapse',function(){
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
});
UPDATED DEMO

jsTree 3: use a drag handle to restrict initiating dragging

Using jsTree 3.0.8 I want to allow nodes to be dragged and dropped within the tree, but it should only allow that action if it was initiated by a drag on a specific button or "drag handle", instead of the default behavior of allowing dragging anywhere on the row.
I populate my tree via Html and for each node I draw out a toolbar as part of that row's Html content. I assign delegated jQuery click handlers to the toolbar items. One of the toolbar items needs to have a move icon and only allow that tree item to be moved by dragging on that toolbar button.
jQuery UI has a similar drag handle concept documented here:
https://jqueryui.com/draggable/#handle
Here is one node of my tree. The "Reorder" button is where I want the user to be able to drag the row, and nowhere else.
<li data-jstree="{ 'type': 'page' }">
<i class="jstree-icon jstree-ocl" role="presentation"></i>
<a class="jstree-anchor" href="#" tabindex="-1" id="109_anchor">
<i class="jstree-icon jstree-themeicon fa fa-2x fa-file font-grey-cascade jstree-themeicon-custom" role="presentation"></i>
<div class="pull-left">
<div class="friendly-name">test</div>
<small>/okay/its/a/test</small>
</div>
<span class="nodeToolbar">
<a title="Edit" class="passthrough btn grey-cascade btn-xs" href="/Pages/Edit/109"><i class="fa fa-pencil"></i> Edit</a>
<a title="Preview" class="preview btn grey-cascade btn-xs" target="_pagePreview" href="/Pages/Preview/109"><i class="fa fa-eye"></i> Preview</a>
<button title="Reorder" class="reorder btn grey-cascade btn-xs" href="#">
<i class="fa fa-arrows"></i> Reorder
</button>
</span>
</a>
</li>
I already took a look at some other solutions that involve check_callback but that seems to only prevent the move operation at the end (during the drop) rather than what I need, which is to filter the operation at the beginning (when the drag is initiated).

You will probably need to work with is_draggable:
http://www.jstree.com/api/#/?q=is_dragg&f=$.jstree.defaults.dnd.is_draggable
For a quick and dirty solution - listen for mousedown touchstart events on anchor nodes and set a variable which you can then later use in the is_draggable check:
var allow_drag = false;
$('#tree').on('mousedown touchstart', '.jstree-anchor', function (e) {
allow_drag = e.target.className.indexOf('reorder') !== -1;
});
$('#tree').jstree({
dnd : {
is_draggable : function () { return allow_drag; },
...

How can I inject a popover inside an iframe?

I am using an iframe to display a page in the same domain and I would like to inject a bootstrap popover inside the iframe: is there a way of doing it?
I am currently trying:
Javascript:
var iframe = $('#editor-iframe');
iframe.load(function (){
var contents = iframe.contents();
var element = contents.find('a');
element.popover();
});
HTML (partial content from the iframe):
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content.
It's very engaging. Right?">Dismissible popover</a>
I try to click on the a element, but nothing happens and no error messages are given. It works fine outside of the iframe, but I don't know why it does not work on the iframe. Any help is appreciated.