Collegues, i have а bootstrap button on my html page:
.....
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<div class="accept-btn">
<button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>
and i have JavaScript function which should activate (enable) it:
function activateAcceptButton() {
const accBtn = document.getElementsByClassName('accept-btn');
//accBtn[0].disabled = false;
//accBtn[0].classList.add('accept-btn-vis');
//accBtn[0].setProperty("disabled", false);
//accBtn[0].style.setProperty("enable", true);
accBtn[0].removeClass('disabled');
}
When the function is called nothing changes. Could you please help me with button activation? How do i need to change js function?
Thank you.
You are using incorrect selector. document.getElementsByClassName('accept-btn') will select the div. Instead, you can directly refer to the button using the descendant selector (>). Your could use: document.querySelector('.accept-btn > button').
Also, instead of .removeClass(), you could use .classList.remove() on the button.
function activateAcceptButton() {
const accBtn = document.querySelector('.accept-btn > button');
accBtn.classList.remove('disabled');
}
function acceptPmt() {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...
<div class="accept-btn">
<button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>
<button onclick="activateAcceptButton()">Activate</button>
Alternatively, you can keep the selector as it is, and select the first child of the div. The commented statements in that function will also require being modified accordingly:
function activateAcceptButton() {
const accBtn = document.getElementsByClassName('accept-btn');
accBtn[0].children[0].classList.remove('disabled');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...
<div class="accept-btn">
<button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>
<button onclick="activateAcceptButton()">Activate</button>
Using querySelector for bootstrap DOM in javascript
function activateAcceptButton() {
/* selector class accept-btn of class btn,btn-warning,disable */
// const accBtn = document.querySelector(".accept-btn [id=accept][type=button].btn.btn-warning.disabled");
/* short */
const accBtn = document.querySelector(".accept-btn [id=accept]");
if (accBtn.classList) {
accBtn.classList.remove("disabled");
} else {
accBtn.className = accBtn.className.replace(/\bmydisabled\b/g, ""); // For IE9 and earlier
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="accept-btn">
<button id="accept" type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>
<button onclick="activateAcceptButton()">Active</button>
CSS Selector for using querySelector
Related
I created the following button, and want to change the inner text "test" to other word.
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>
I tried below method it can change the word but also deleted the icon.
$('button#bkmarktest').on('click', function(e){
e.preventDefault();
$(this).text("other");
});
Is there any way that can only change the word, but keeping the icon, thanks!
like #Kunal Tanwar said, wrapping the text in a span solves it and using Jquery this is my approach.. assuming the button has an id of test
using the .find() method to find the span child
<button type="button" id="test">
<i class="fa-2x fa-regular fa-floppy-disk"></i>
<span>test<span>
</button>
$('#test').on('click', function(e){
e.preventDefault();
$(this).find('span').text("other");
});
and another option would be to use the decendant selector since the span is a direct child of the button
$('#test').on('click', function(e){
$('#test > span').text('other');
});
I haven't use jQuery since very long so here's an example in vanilla javascript.
const btn = document.querySelector('#test');
btn.addEventListener('click', (e) => {
e.preventDefault();
// selecting span tag -> you can also give it a specific id or class if you want
btn.children[1].innerText = 'other';
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<button type="button" id="test">
<i class="fa-2x fa-regular fa-floppy-disk"></i>
<span>test</span>
</button>
What .text() method does is that it overwrites not only text but HTML as well. The easiest thing to do is move your text inside the <i> so it doesn't get overwitten only what's inside of it. Review the example below and notice that the icon remains -- it's because it's actually a CSS pseudo-element and is always ignored by methods and functions dealing with the DOM.
$('.test').on('click', function() {
$(this).find('i').text(' IT WORKS!')
});
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<button class='test' type='button'>
<i class="fa fa-star-o"> TEST</i>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can also replace this using Regex without adding span or any other element in that button. Here is solution:
$('#test').on('click', function(e){
e.preventDefault();
const regex = /([^>]+)$/;
$(this).html($(this).html().replace(regex,'other'));
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>
Another solution is to change text inside of <i> element:
$('#test').on('click', function(e){
$(this).find('i').text("Other");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk">test</i></button>
I have two buttons one is Edit and Save. I have a div or span so onclick of edit button I want to convert the span or div in to a summernote editor and onclick Save it will save the data to same div and will remove the summernote editor.
I did not find any helpful information from summernote website, please suggest the right method.
Summernote does provide a clear example to fullfil your needs, you may find it here.
var edit = function() {
$('.click2edit').summernote({focus: true});
};
var save = function() {
var markup = $('.click2edit').summernote('code');
$('.click2edit').summernote('destroy');
};
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="https://summernote.org/vendors/summernote/dist/summernote.css" rel="stylesheet">
<script src="https://summernote.org/vendors/summernote/dist/summernote.js"></script>
<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Show Edit Mode</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Hide Edit Mode</button>
<div class="click2edit">click2edit</div>
When you click on Edit button, you can hide your div/span. With a jQuery code, it could be
<div id="summernote">/div>
<button id="edit-button">Edit</button>
<div id="editor"></div>
<button id="save-button">Save</button>
//JS
$('#edit-button').click(function() {
$('#summernote').hide();
$('#editor').show();
});
$('#save-button').click(function() {
$('#summernote').show();
$('#editor').hide();
});
I'm encountering a typical situation while accessing the innerHTML property using jQuery. I've fetched the target button using the jQuery attribute selector.
Below is the snippet of jQuery attribute selector.
jQuery('button[type="button"][class="btn btn-primary"]').each(function () {
var btn = jQuery(this);
console.log(btn);
if (btn[0].innerHTML === "OK") {
console.log("ok");
jQuery(this).click();
}
});
Following is the screenshot of the console log of the target button. It's innerHTML property is set to OK.
Following is the screenshot of the value of the innerHTML while debugging the target button object. In this case the value is "".
Ideally, the values of the innerHTML should be the same for both the cases.
EDIT
Why does this behavior differ that the ideal one? For both of the cases, the value of the innerHTML should be the same.
Also, there were multiple buttons. I have taken screenshots of different buttons. Thus their ID's are different. But still, the behavior is same.
Try something like this.
function SomeEvent($ele) {
alert($ele.html());
return false;
}
function invokeBtnEvents() {
$("[data-action=some-event]").off(); // clear old events
$("[data-action=some-event]").on("click", function() {
var $this = $(this);
return SomeEvent($this);
}) // define event(s)
return false;
}
$(document).ready(function() {
invokeBtnEvents();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<br />
<button data-action="some-event" class="btn btn-primary">Button 1</button>
<button data-action="some-event" class="btn btn-primary">Button 2</button>
<button data-action="some-event" class="btn btn-primary">Button 3</button>
<button data-action="some-event" class="btn btn-primary">Button 4</button>
</div>
</div>
</div>
Your issue
What you are doing that I think is your main issue is the $.each() method.
Store the buttons in a variable,
let $button = $("button"); // this returns an array of all the buttons on the DOM
You can then use the $.each() method to get the clicked element
$.each($button, function(index, btn){
const $this = $(btn);
$this.off();
$this.click(function(){someEvent($this)});
});
I would not invoke button clicks like this because every time you click a button, this each loop gets ran. It will then send all of the buttons to that action unless you parse by an ID or something (you are using the innerText).
If you use the code in my snippet, only the clicked button will be triggered.
An alternative approach to my first snippet is using something like a dispatcher.
function DoActionOneClick($ele){
alert("Action 1 " + $ele.html());
}
function DoDefaultClick($ele){
alert("Default Action " + $ele.html());
}
function DispatchEvent(action, $ele){
switch(action){
case "some-event-1":
DoActionOneClick($ele);
break;
default:
DoDefaultClick($ele);
break;
}
}
function invokeActions(){
$("[data-action]").off();
$("[data-action]").on("click", function(){
// get this
var $this = $(this);
// get action
var action = $this.data().action;
DispatchEvent(action, $this);
});
}
$(document).ready(function(){
invokeActions();
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<br />
<button data-action="some-event-1" class="btn btn-primary">Button 1</button>
<button data-action="some-event-2" class="btn btn-primary">Button 2</button>
<button data-action="some-event-2" class="btn btn-primary">Button 3</button>
<button data-action="some-event-2" class="btn btn-primary">Button 4</button>
</div>
</div>
</div>
is it possible to change tooltip on some element when button is clicked?
DIV with some tooltip DIV
BUTTON
after user click on button:
DIV with other tooltip DIV
BUTTON
I wrote this one, but its not with bootstrap tooltip
$(".switch").click(function() {
$(".tooltip").toggle();
if ($("#tp1").text() == "Active") {
$("#tp1").text("Stop");
}
else {
$("#tp1").text("Active");
}
});
<div class="switch">
<input type="checkbox">
<label><i class="glyphicon glyphicon-off"></i></label>
</div> <div class="tooltip fade bottom in" style="display: block;top: 52px;width: 115px;left: 16.5px;"><div class="tooltip-arrow"></div><div id="tp1" class="tooltip-inner">Active</div></div>
I had a best working code for you! Try this below code.
$(function() {
var $toolTip = $('#tooltip-example');
var originalTitle = $toolTip.attr('title');
$toolTip.tooltip({placement: "bottom"});
$toolTip.click(function() {
$toolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show');
});
$(document).on("mouseout","#tooltip-example",function()
{
$toolTip.attr('title',originalTitle).tooltip('fixTitle').tooltip('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>
I'm initializing Bootstrap's popovers like this:
$(".popovers").popover({
placement: "right"
});
Occasionally, I'll want to display a popover in a specific place, so I use a data-placement attribute on that particular element like this:
<i class="popovers fa fa-question-circle"
data-content="Some popover text."
data-placement="bottom" >
</i>
Bootstrap seems to ignore the data-placement attribute and uses the option settings instead.
It seems to me the data-placement attribute should override anything passed to the initialization method. I've scoured the Bootstrap 3 docs and can't find anything that confirms or denies this.
Here's a small demo:
$(".popovers").popover({
container: "body",
trigger: "hover",
placement: "right"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<i class="popovers fa fa-question-circle"
data-content="Some popover text."
data-placement="bottom"
data-original-title="">
</i>
</div>
Is the data-placement attribute ignored when you pass in the property in JavaScript?
To answer your question:
Is the data-placement attribute ignored when you pass in the property in JavaScript?
Yes - Here's a snippet from tooltip.js:
Tooltip.prototype.getOptions = function (options) {
options = $.extend({}, this.getDefaults(), this.$element.data(), options)
You'll see that when creating the options for each tooltip (from which popover inherits), Bootstrap calls jQuery's extend which combines the following objects in this exact order:
The plugin defaults
Then the data-attributes
And finally the passed in options object
Solution
To change this, we can override the GetOptions function using the Programmatic API and reversing the order of operations:
$.fn.popover.Constructor.prototype.getOptions = function (options) {
options = $.extend({}, this.getDefaults(), options, this.$element.data())
if (options.delay && typeof options.delay == 'number') {
options.delay = {
show: options.delay,
hide: options.delay
}
}
return options
}
Additionally, we can maintain a little less code by pre-merging the options and the element data and then passing that back to the original function to override both so we don't have to spell out the entire function
var _getOptionsOriginal = $.fn.popover.Constructor.prototype.getOptions
$.fn.popover.Constructor.prototype.getOptions = function (options) {
options = $.extend({}, options, this.$element.data())
return _getOptionsOriginal.call(this, options);
}
Here's a Demo in Stack Snippets:
var _getOptionsOriginal = $.fn.popover.Constructor.prototype.getOptions
$.fn.popover.Constructor.prototype.getOptions = function (options) {
options = $.extend({}, options, this.$element.data())
return _getOptionsOriginal.call(this, options);
}
$("[data-toggle='popover']").popover({placement: 'bottom'})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container" >
<h2>Popovers</h2>
<button type="button" class="btn btn-default"
data-container="body" data-toggle="popover"
data-placement="right" data-content="Vivamus sagittis">
Popover on Right - Data Attribute
</button>
<br/><br/>
<button type="button" class="btn btn-default"
data-container="body" data-toggle="popover"
data-content="Vivamus sagittis">
Popover on Bootom - Option
</button>
</div>