bstreeview
bstreeview copied to clipboard
Bootstrap 5
Just a quick note on bootstrap 5 usage. All that needs to be done is change data-toggle to data-bs-toggle in the js and this plugin works for bs5. Great plugin, wish I would have found it sooner!
Not only - also data-target to data-bs-target
Thanks for the workaround for bootstrap v5! I can confirm these 2 changes have fixed it.
data-toggle -> data-bs-toggle
data-target -> data-bs-target
Any ETA on a new release ?
Not really. You need to remove Jquery to be satisfactory
Please check my pull request. @m-peterman, the issue is not in jQuery. As @ScotsScripts and @k3kc suggested, it is because Bootstrap 5 uses data-bs-*
instead of data-*
. So, this pull request simply checks for the Bootstrap version and then uses the right attribute names based on the version. It works fine for me on both Bootstrap 4 and Bootstrap 5.
Till the pull request is merged, you can do these steps to provide support for Bootstrap 4 and Bootstrap 5:
- add
/**
* Define Bootstrap 4 attributes
*/
let dataToggleAttr = 'data-toggle';
let dataTargetAttr = 'data-target';
/**
* get Bootstrap version
*/
let bootstrapVersion = (bootstrap.Tooltip.VERSION).charAt(0);
/**
* If Bootstrap 5, redefine attributes
*/
if (bootstrapVersion === '5') {
dataToggleAttr = 'data-bs-toggle';
dataTargetAttr = 'data-bs-target';
}
before the var templates
line.
- replace the line
treeviewItem: '<div role="treeitem" class="list-group-item" data-toggle="collapse"></div>',
with
treeviewItem: '<div role="treeitem" class="list-group-item" ' + dataToggleAttr + '="collapse"></div>',
- replace the line
.attr('data-target', "#" + _this.itemIdPrefix + node.nodeId)
with
.attr(dataTargetAttr, "#" + _this.itemIdPrefix + node.nodeId)
Done! Enjoy.