We Keep Coding

Show/hide all page tooltips on button click Jquery

I am trying to show all tooltips present on the page on button click. The second button click should hide all tooltips. It is also important that this should work in IE 11
<button type="button" onclick="showAlltooltips();" style="float:right;font-size:medium"></button>
<button type="button" data-toggle="tooltip" data-placement="top" title="title2"></button>
<label class="form-check-label text-danger" data-toggle="tooltip" data-placement="bottom" title="title2" style="margin-right:10px"></label>
<script>
function showAlltooltips()
{
$('[data-toggle="tooltip"]').tooltip('show');
}
</script>

<script>
function showAlltooltips()
{
if ($('body').hasClass('is-show-tooltip')) {
$('[data-toggle="tooltip"]').tooltip('hide');
$('body').removeClass('is-show-tooltip');
} else {
$('[data-toggle="tooltip"]').tooltip('show');
$('body').addClass('is-show-tooltip');
}
}
</script>

how to delete element when click on button only not on all div

how to delete element when press on delete button?
but what happened here when i press any where in div the div will delete
i am trying to delete using button only
<script>
function myexfun(mySelectID, selectedItem, myDIVId) {
var x = document.getElementById(mySelectID).value;
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">' + x + '</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm()" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
// bd.style.display = "block";
}
</script>
<script>
function delelm() {
$(document).on("click", '#childcur', function() {
$(this).remove();
});
}
</script>
i tried alot but i can not delete it from button just click on div

Your click event listener is attached to the entire div, which is why it deletes whenever you click anywhere inside the div. Since you have delelm(), you can modify the code as below to confine the click to just the delete button alone.
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">1</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm(this)" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
function delelm(el) {
$(el).closest('#childcur').remove();
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="parentcur"></div>

Your problem is that you're targeting clicks on the #childcur div and not it's children.
Here's an example of how this could be done:
HTML:
<div id="container">
<div class="deletable">
<p>A</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>B</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>C</p>
<button class="do-delete">Delete</button>
</div>
</div>
JS:
// target buttons within the divs we want to be deletable.
$('div.deletable > button.do-delete').on('click', function() {
// when the button is clicked, access the parent and remove it from the DOM.
$(this).parent().remove();
})
Here's a fiddle: https://jsfiddle.net/7aro46et/

How to edit text in a span or div through summernote field

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();
});

Enable bootstrap button using Javascript

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

How to prevent double click of "click" jquery

I've this simple Fiddle where if a user clicks plus glyphicon, I show the collapsed content and change the glyphicon to 'minus' and vice-versa on click of minus glyphicon.
But, when I double click the plus glyphicon, the content shows and the glyphicon is not changed to minus. For the next single clicks, the content is shown when 'minus' glyphicon appears. How can I prevent the double click ?
HTML
<div class="divcontainer">
<span>Click -----></span>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
content
</div>
jQuery
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});

Instead of 'onclick' function use collapse hide and show events. Please refer below code:
$(document).ready(function() {
$('#collapsecontent').on('show.bs.collapse', function(args) {
onContainerClick($(this).parent());
});
$('#collapsecontent').on('hide.bs.collapse', function(args) {
onContainerClick($(this).parent());
});
});
function onContainerClick(args) {
$(args).find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
}

add dblclick event handler too
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
$('.glyphicon-plus').dblclick(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});
.divcontainer{
background:aqua;
width:100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="divcontainer">
<span>Click -----></span>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
content
</div>

just use your own jquery handler. Remove data-toggle attr and use this
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$('.collapse').slideToggle();
$(this).parent("div").find(".glyphicon").toggleClass("glyphicon-plus").toggleClass("glyphicon-minus");
});
});
I think it should work now.

try this
$(this).prop('disabled', true);