We Keep Coding

Link within a bootstrap list-group-item, but popup confirmation before clicking link

I have a 'bootstrap list group item'. I am trying to create a link inside the link area. The code below works:
// THIS CODE WORKS //
<a href="" class="list-group-item list-group-item-action active text-white rounded-0">
// --- JUST A BUNCH OF HTML COMES HERE -- //
<i class="fa fa-trash" aria-hidden="true" onclick="window.open('?delete=<?=$x?>','_self');return false;"></i>
</a>
Now what I would like to do is to add a confirmation to this so the user doesn't delete by mistake.
// WANT TO ADD THIS FEATURE //
return confirm('Are you sure you want to delete?');
How would I combine these to? When I try they will not execute. I have tried.
// WHAT I TRIED //
function Heya()
{
return confirm('Are you sure you want to delete?');
}
function Hoo()
{
window.open('?delete','_self');return false;
}
// AND ON THE PAGE //
<i class="fa fa-trash" aria-hidden="true" onclick="Heya(); Hoo();"></i>
It doesn't work... And I also need a way to pass on the variable 'x' to the script since it will differ..
Thanks a lot for help.

function checkDelete(x)
{
if (confirm('Are you sure you want to archive?')) {
var url = '?delete=' + x;
window.open(url,'_self');
}
return false;
}
<i class="fa fa-trash" aria-hidden="true" onclick="return checkDelete(<?=x?>);"></i>

bootstrap tooltip success on first time but get Uncaught TypeError on second time

I am trying to use bootstrap tooltip in my laravel project.
Here's my blade.php code:
...
#foreach($patients => $patient)
...
//This is the tooltip button
<div data-toggle="tooltip" class="btn btn-default comment-tooltip" data-patient-id="{{ $patient->patient_id }}"><i class="fa fa-book" aria-hidden="true"></i></div>
//this is the div i wanna show after hovering tooltip button
<div id="{{$patient->patient_id}}" style="visibility: hidden">
some text
</div>
...
#endforeach
...
And here's my javascript code
$(document).ready(function() {
$('.comment-tooltip').tooltip({
title: function () {
var patient_id = $(this).data('patient-id');
var element = document.getElementById(patient_id);
element.style.visibility = 'visible';
return element;
},
html: true,
placement: 'right',
callback: function(){
var patient_id = $(this).data('patient-id');
var element = document.getElementById(patient_id);
element.style.display = 'none';
}
});
});
And when I hover the button on first time, it works
But when I hover it on second time, it shows error message below in console
Uncaught TypeError: Cannot read property 'style' of null
Hope someone can help me fix this problem. Thanks!!

<span class="fa fa-info-circle" data-toggle="tooltip" title="your message here">
<script>
$('[data-toggle="tooltip"]').tooltip();
</script>
you do not want to worry about callback function.
this is very simple way i am using it in many projects.
very simple and effective.
as i understand you are getting a problem to show tooltip.
correct me if i am wrong.

You can use below for tooltip
<div data-toggle="tooltip" data-original-title="Message will be here to show on mouse over." data-placement="right" data-container="body">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
no need for this long code

Random quote machine or tweet current quote doesn't work

jQuery on click function to tweet current quote doesn't want to work. What is wrong here. I have to build random quote machine and tweet current quote. I've managed to do JSON API but cannot figure out how to tweet current quote. Please help.
HTML:
<div class="container-fluid">
<div class = "well">
<div class="row">
<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>
<p class="author">-Alina Khachatrian</p>
<div class="buttons">
<div class="row">
<div class="col-xs-6">
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
</a>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Edgar Kiljak.</p>
</footer>
</div>
</div>
JS:
$(document).ready(function(){
$(".btn").on("click", function(){
$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {
var html = "";
var len = json.length;
var index = Math.floor(Math.random() * len);
var val = json[index];
html += "<div class = 'newQuote'>";
html += "<h3>'" + val.quote + "'</h3>";
html += "</div>";
$(".author").text(val.author);
$(".text").html(html);
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
$(val.quote).text() +"&via=your-app-name&original_referer=your-url");
});
});
});
});

First problem I had was that I couldn't even see the link to Tweet Current Quote. I had to add the text in the anchor:
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
TWEET CURRENT QUOTE
</a>
Second: it was popping up the new Twitter window, but not filling the text. In your onclick code, the $(val.quote).text() was unnecessary - just use val.quote
Third: you'll see that in addition to opening the new Twitter window, it is opening another occurrence of your own page. This has to do with how you have the tweet-quote anchor defined in your html, but the easiest way to stop it is to add return false in your onclick so that the target in the anchor doesn't fire:
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
val.quote +"&via=your-app-name&original_referer=your-url");return false;
});
Fourth: if you load a second 'New Quote', and then click the 'Tweet This Quote', you'll see that it opens two new windows -- it is tweeting both the old and the new quotes. This is because the on("click") is cumulative. You should clear out any existing function before setting the new one:
$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
window.open ...
Fifth: Usually when you post a question here, "doesn't work" is not a sufficient explanation. You should explain what's not working, or what is working differently than you want it to. Error messages if there are any. What you saw in the console logs. Some people get real sticky about that. And some people will probably get sticky about me doing your homework for you. Good luck though!

.attr.replace() not working in javascript

For some reason I can't get my code to work
var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");
It draws from this and it isn't a problem with the setup as other functions work just fine, for some reason it doesn't replace myFull instead it just leaves it there.
<div id="LayoutDiv1">
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
<img id="pusher" class="resize" src="../images/myFull/Young_Diego.jpg" alt="page1">
</div>
EDIT:::::::::::::::::::::::
The code suddenly decided to work...not sure what the error was before

try this
var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");
add this at below
$("#LayoutDiv1").children("img").attr("src",mainImg);

angularJS : disable link based on variable value, and display message box

I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.

To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>