We Keep Coding

Update a part of 'data-content' of popover

I try to find a solution, I would like to update just a part of data-content of popover. Exemple of code:
<div class="popover-wrapper">
<i class="glyphicon glyphicon-question-sign hover_content"
id="popover_help"
data-toggle="popover"
data-placement="right"
data-content="<p>Some static text
<span class='update-text'>Dynamic text to update</span>
</p>"
data-html="true">
</i>
</div>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>
<script>
function updatePopoverContent() {
$('.popover-wrapper .hover_content')???;//and something like attr(‘data-content .update-text’, ‘new text’)
}
</script>
to show popover I use:
$(".hover_content").popover({
trigger: "manual",
animation: false,
delay: {
"hide": 30
}
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
});
Is it possible to change just a part of 'data-content' text? Maybe someone can give some advice? Thank you in advance!

Using bootstrap-4, you can update the attribute data-content.
NB: you cannot update the .data value using jquery's .data("content", newValue) as it appears the popper reads the attribute directly each time instead of honouring the data convention.
$("#popover_help").attr("data-content", replacementHtml);
To update just the update-text part, you can read the HTML, parse it, use jquery to change it, then write it back as HTML:
var html = $("#popover_help").data("content");
var parsed = $("<div/></div>").html(html);
parsed.find("span").text("Updated text");
$("#popover_help").attr("data-content", parsed.html());
You can apply this to a .class to update all if you have more than one, here's an example.
$(function () {
$('[data-toggle="popover"]').popover()
})
function updatePopoverContent() {
$(".hover_content").each(function() {
var html = $(this).data("content");
var parsed = $("<div/></div>").html(html);
parsed.find("span").html("<strong>Updated</strong> text");
$(this).attr("data-content", parsed.html());
// doesn't update if currently shown, so hide then show if desired
$(this).popover("hide");
//$(this).popover("show");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<br/>
<div class="popover-wrapper">
<i class="glyphicon glyphicon-question-sign hover_content"
id="popover_help"
data-toggle="popover"
data-placement="right"
data-title="Example"
data-content="<p>Some static text
<span class='update-text'>Dynamic text to update</span>
</p>"
data-html="true">
click me
</i>
</div>
<hr/>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>

Why does this event.target.previousElementSibling not work?

so ive got this code
<div class="col-lg-12 video-meta">
<div class="container">
<span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
<a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
</span>
and i target it with
$('.like').on('click', function(event) {
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
console.log(isLike);
and it returns "true" in both cases, why?! is there a reason for this? ive been on it for 4 hours straight now and it worked ONCE , i did change nothing just took a break and then it didnt work after my break? i think this is some kind of bad joke. what am i missing here?
it should basically take the "like" class, and as the first a tag has no previousSiblingElement which is null, it should return true, but the second has an element with the same tag as a sibling and still returns true..

event.target is the <i> element, because that's the element on which the click really occured.
If you want the <a> (on which you did attach the event handler), you need to request event.currentTarget or even just this:
$('.like').on('click', function(event) {
event.preventDefault();
console.log(event.target); // <i>
var isLike = event.currentTarget.previousElementSibling == null;
console.log(isLike);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
<div class="container">
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
<a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
</span>
</div>
</div>

javascript click event not firing

I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.
HTML CODE
<div class="col-6">
<div class="js-list-item">
<h3 class="js-list-title"></h3>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<p>Date: <span class="js-date"></span></p>
<p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
</span></p>
</div>
</div>
javascript code
function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
console.log('test');
e.preventDefault();
deleteShow(
$(e.currentTarget).closest('.js-list-item').attr('id')
);
});
}

The second parameter of the .on() function is a selector.
http://api.jquery.com/on/
Change:
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
to:
$('.js-list-item').on('click', '.fa-trash-o', function(e) {

('click', 'fa-trash-o', function(e)
fa-trash-o is not a proper selector, use class or id

JQuery Click Function Randomly Stops Working

I am sorting a list of users by first name when a user click on the sort icon. However, I've noticed that there are times when I click the sort icon, the icon is switched, however, the data not sorted. For example, I click on it 10 times, and there may be 3 times when the data simply not sorted but the icon changed. Any help here would be appreciated.
A partial section of the html code.
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
First Name
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc"></i></a></div>
The function to handle replacing the button and submit the form.
$('#sortName').on('click', function (e) {
e.preventDefault();
if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
$('#searchVal').val('asc');
$('form').submit();
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
} else {
$('#searchVal').val('desc');
var myVal = $('#searchVal').val();
$('form').submit();
$(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
}
});

Is the following line suppose to be the same in both the if block and the else block?
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');

Try it like this
$('a#sortName').on('click', function (e) {
e.preventDefault();
// Setting the current clicked icon into a variable.
var findSortIcon = $(this).find('#sortIcon');
if (findSortIcon.hasClass('fa-sort-alpha-desc')) {
$('#searchVal').val('asc');
//$('form').submit(); - We are sending the submit anytime whenever the button is clicked
findSortIcon.removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
} else {
$('#searchVal').val('desc');
//var myVal = $('#searchVal').val(); - no need for this (You dont use it anyway)
// $('form').submit(); - same in here
findSortIcon.removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
}
// Whether its true or false submit it!
$('form').submit();
// Extra stuff to check changing directly
var attr = findSortIcon.attr("class");
$('#show-class').html(attr + " for " + $(this).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
First Name
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
ICON
</i>
</a>
</div>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
First Name2
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
ICON2
</i>
</a>
</div>
<div id="show-class"></div>

Try this code instead:
$('#sortName').on('click', function (e) {
e.preventDefault();
if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
$('#searchVal').val('asc');
} else {
$(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
$('#searchVal').val('desc');
}
$('form').submit();
});

I changed the code to see if the hidden field is null or not. Then, I made a decision based on that decision. The new JQuery code is below, and it's worked fine so far.
$('#sortName').on('click', function (e) {
e.preventDefault();
var testVal = $('#searchVal').val();
if (testVal === 'desc') {
$('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
$('#searchVal').val('asc');
} else {
$('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
$('#searchVal').val('desc');
}
$('form').submit();
});

Onclick div add class

I want to add a class when clicking on a a tag inside a div.
When clicking on the I want to add the class "show".
I use this HTML:
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
See the JSFiddle: http://jsfiddle.net/8wLze4rf/2/

I edited your fiddle, i think this is what you want to do. On click the class gets added and on another click (anywhere on the page) it gets removed.
$(".liveChatLabel").click(function(){
$(".liveChatContainer").addClass("show");
});
$('html').click(function() {
$(".liveChatContainer.show").removeClass("show");
});
$('.liveChatContainer').click(function(event){
event.stopPropagation();
});
JSFiddle

Add jQuery library.
Use this script:
$(document).ready(function() {
$('.liveChatContainer a').click(function() {
$('.actions a').removeClass('show');
$(this).addClass('show');
return false;
});
});

HTML
<div id="liveChatContainer" class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
<a id="liveChatLabel" href="#" class="liveChatLabel">Contact</a>
</div>
JS
$(document).ready(function(){
$('#liveChatLabel').click(
function(){
$('.actions a').removeClass('show');
$('#liveChatContainer').toggleClass('show');
return false;
});
});
$(document).mouseup(function (e)
{
var container = $("#liveChatContainer");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.removeClass('show');
}
});
JSFiddle

I've used toggle to add and remove the class, here's a fiddle of it:
http://jsfiddle.net/8wLze4rf/8/
$(document).ready(function(){
var button = $('.liveChatContainer');
button.on("click",function(){
button.toggleClass('show');
});
});

$(document).click(function(e) {
$('.liveChatContainer').removeClass('show');
});
$('.liveChatContainer a').click(function(e) {
$('.liveChatContainer').addClass('show');
e.stopPropagation();
});
$('.liveChatContainer').click(function(e) {
e.stopPropagation();
});
.show {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>

use setAttribute("class","actions"); to your link in java script