We Keep Coding

How can I solve when I click OK it deletes the data but when I click CANCEL it also delete. It should do nothing when cancel is clicked

Here is the html.
<a href="source.php?admin_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['admin_username']; ?>"
data-toggle="tooltip"
data-placement="top"
title="Delete">
<i id="del" class="mdi mdi-close"></i></a>
Here is the php.
$sql = "delete from admin where id = '$id' ";
$conn->query($sql);
Here is the javascript. (I don't know if this is the problem or not)
const deleteIcon = document.getElementById("del");
deleteIcon.addEventListener("click",(e) => {
const confirmVar = confirm("Do you want to proceed? ");
if(confirmVar){
return true;
}else{
return false;
}
})

You are assigning the click handler to a child element, the "i" element, but that will not prevent the parent link "a" element from going to its href when clicked.
You could call the delete endpoint programmatically when confirmVar is true in the JavaScript. If you do this, the link "a" element would need to be changed to something else, or removed, so that the delete endpoint isn't always called when the element is clicked.

e.preventDefault() will prevent the link from trying to go to another page. In this example there are many delete buttons. The code is commented to explain, but in your actual code container will be whatever the element is you want to remove when someone deletes it. Also, change id='del' to class='del' since all id's have to be unique.
// get all the delete icons (class='del')
const deleteIcons = document.querySelectorAll(".del");
// for each one...
deleteIcons.forEach(el => {
// add a click event listener
el.addEventListener("click", (e) => {
// stop it from acting like a normal link
e.preventDefault();
// prompt the question
const confirmVar = confirm("Delete?");
// if OK, find the closest parent with the class 'container' and remove it
if (confirmVar) e.target.closest('.container').remove()
})
})
.container {
padding: 5px;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 10px;
}
.container a {
text-decoration: none;
}
<div class='container'>
<a href="https://google.com" class="del" data-toggle="tooltip" data-placement="top" title="Delete">
Delete Me <i class="mdi mdi-close"></i>
</a>
</div>
<div class='container'>
<a href="https://google.com" class="del" data-toggle="tooltip" data-placement="top" title="Delete">
Or Delete Me <i class="mdi mdi-close"></i>
</a>
</div>
<div class='container'>
<a href="https://google.com" class="del" data-toggle="tooltip" data-placement="top" title="Delete">
Or Maybe Me <i class="mdi mdi-close"></i>
</a>
</div>

How to change an empty star glyphicon button to star glyphicon button onclick with JS?

This seems to change the glyphicon only when I click glyphicon itself. I want it to change when I click the button.
<script>
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});
</script>
<button class="btn btn-default">
<span class="glyphicon glyphicon-star-empty"></span>
</button>

You can use this jQuery code.
$(document).ready( function() {
$('.btn').click(function(){
$(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphicon-star');
});
})
You have to bind the event on the button, not only the icon, else it will be triggered only clicking the star.

Change glyphicon on click

I am trying to change this glyphicon on click but it works fine when href = "#" but originally my href contains a url which through a view hits the database in django.
HTML:
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id = "star" href="#" data-toggle="tooltip" title = "Add to your list" data-placement="top">
<span class="glyphicon glyphicon-star-empty"></span>
</a>
</h1>
</div>
</div>
JS:
$('#star').click( function(){
$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});
This works fine.
http://jsfiddle.net/asees/5XqyW/564/
But when i change href to the below code, there is no change on glyphicon.
<a id = "star" href="{% url 'add' %}" data-toggle="tooltip" title = "Add to your list" data-placement="top">
<span class="glyphicon glyphicon-star-empty"></span>
</a>

Working fiddle.
Since you're clicking on anchor #star you need to prevent the default event
(redirecting to href) using e.preventDefault() like :
$('#star').click( function(e){
e.preventDefault();
$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});

Find element and see if its active/hasClass

I am trying to access a button in my leaflet map. The button is created using a plugin "easy-button".
My main goal is to see if the button has been clicked (is active), I will use it for validation in another function, not shown here.
This is how the html for the button looks like in the browser debugger (I believe the html is created by the plugin?).
Before it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg"></span>
</span>
</button>
After it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo"></span>
</span>
</button>
This click function access the button and show 'Button was clicked' but the if statement does not pass. I got to the button using Copy CSS path in the browser, but it seem really long.
$("div.leaflet-bar.easy-button-container.leaflet-control > button > span").click(function(){
alert("Button was clicked");
if
($('span').hasClass('fa fa-crosshair fa-lg'))
{
alert('My button has active class')
}
});
Any advice on what I am doing wrong?

This
if($('span').hasClass('fa fa-crosshair fa-lg'))
Will not target the span you are expecting it to.
You wanted
if($('span',this).hasClass('fa fa-crosshair fa-lg'))
To target the child span of the span you clicked on

Run this example, hope it helps:
$(document).ready(function() {
// My example to trigger the click on buttons..
$("button > span > span").click(function(){
alert("Button was clicked");
if (
//$(this).hasClass('fa') && <-- You don't need it, both have it
$(this).hasClass('fa-crosshairs') &&
$(this).hasClass('fa-lg')
) {
alert('My button has active class');
} else {
alert('Ops..');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Unclicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg">click me</span>
</span>
</button>
<!-- Clicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo">clicked</span>
</span>
</button>

How to get a tooltip to appear in a popover?

On my machine, this code produces a tooltip on hover over a bootstrap glyphicon:
<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
However when I stack the tooltip inside a popover, the code used to generate a tooltip on its own no longer produces a tooltip:
<a href="#" class="example" data-toggle="popover" >Experiment</a>
<div id="popover_content_wrapper" style="display: none">
<a href="">
<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
</a>
</div>
Here's how I'm triggering the popover and tooltip in the javascript (below these html elements)
<script>
$('.tt').tooltip();
$('.example').popover({
trigger: 'hover click',
html: true,
content: function() {
return $('#popover_content_wrapper').html();
},
placement: 'top',
delay: { show: 500, hide: 1000 }
});
</script>
Any ideas on how to get a tooltip to appear on an element inside a popover?

The problem is that the .tt classed element that appears in your popover is not the same one used to bind .tooltip() to.
You need to use the delegation model via the selector option, eg
$(document).tooltip({
selector: '.tt'
});
Demo here - http://jsfiddle.net/jAtqW/