Javascript is adding active class but not remove when click other button

Javascript is adding active class but not remove when click other button - javascript

function grid_view() {
grid_view_result();
grid_view_button();
}
function grid_view_active() {
if (document.getElementById("grid_view").className == "fa fa-th-large m-l-5") {
document.getElementById("grid_view").className = "fa fa-th-large m-l-5 active";
}
}
function grid_view_inactive() {
if (document.getElementById("grid_view").className == "fa fa-th-large m-l-5 active") {
document.getElementById("grid_view").className = "fa fa-th-large m-l-5";
}
}
function grid_view_button() {
if (document.getElementById("cooking_result").className == "recipes grid") {
grid_view_active();
return;
}
if (document.getElementById("cooking_result").className = "recipes list") {
grid_view_inactive();
return;
}
}
function grid_view_result() {
if (document.getElementById("cooking_result").className == "recipes list") {
document.getElementById("cooking_result").className = "recipes grid";
}
}
function list_view() {
list_view_result();
list_view_button();
}
function list_view_active() {
if (document.getElementById("list_view").className == "fa fa-th-list m-l-5") {
document.getElementById("list_view").className = "fa fa-th-list m-l-5 active";
}
}
function list_view_inactive() {
if (document.getElementById("list_view").className == "fa fa-th-list m-l-5 active") {
document.getElementById("list_view").className = "fa fa-th-list m-l-5";
}
}
function list_view_button() {
if (document.getElementById("cooking_result").className == "recipes list") {
list_view_active();
return;
}
if (document.getElementById("cooking_result").className = "recipes grid") {
list_view_inactive();
return;
}
}
function list_view_result() {
if (document.getElementById("cooking_result").className == "recipes grid") {
document.getElementById("cooking_result").className = "recipes list";
}
}
.active{text-decoration:underline;}
.recipes.grid li{float:left;width:50%;height:50px;background:red;}
.recipes li:nth-child(2){background:blue !important;}
.recipes.list li{float:left;width:100%;height:50px;background:red;}
<i id="grid_view" onclick="grid_view();" class="fa fa-th-large m-l-5">Grid</i>
<i id="list_view" onclick="list_view();" class="fa fa-th-list m-l-5">List</i>
<ul id="cooking_result" class="recipes grid">
<li></li>
<li></li>
</ul>
I can add class="active" to i tag but I can't remove when I click to other i tag. May you help me to fix it?
Also, If possible, may you simplify to javascript? I think it's too long for this functionality :)

Here is a tidied up solution.
The main changes I've made:
I've fixed the underline disappear/reappear issue, using classList.toggle;
I've shortened the .js quite a lot;
I've added a cosmetic change to the CSS, using pointer:
I've removed the inline .js events from the HTMLand made the .js unobtrusive
Please ask questions in the comments below if there is anything that doesn't immediately seem clear to you.
var gridView = document.getElementById("grid_view");
var listView = document.getElementById("list_view");
function grid_view() {
var cookingResult = document.getElementById("cooking_result");
var gridView = document.getElementById("grid_view");
var listView = document.getElementById("list_view");
if (cookingResult.className === "recipes list") {
cookingResult.className = "recipes grid";
gridView.classList.toggle('active');
listView.classList.toggle('active');
}
}
function list_view() {
var cookingResult = document.getElementById("cooking_result");
var gridView = document.getElementById("grid_view");
var listView = document.getElementById("list_view");
if (cookingResult.className === "recipes grid") {
cookingResult.className = "recipes list";
gridView.classList.toggle('active');
listView.classList.toggle('active');
}
}
gridView.addEventListener('click',grid_view,false);
listView.addEventListener('click',list_view,false);
.active {
text-decoration: underline;
}
.recipes.grid li {
float: left;
width: 50%;
height: 50px;
background: red;
}
.recipes.list li {
float: left;
width: 100%;
height: 50px;
background: red;
}
.recipes li:nth-of-type(2) {
background: blue;
}
#grid_view, #list_view {
cursor: pointer;
}
#grid_view.active, #list_view.active {
cursor: text;
}
<i id="grid_view" class="fa fa-th-large m-l-5 active">Grid</i>
<i id="list_view" class="fa fa-th-list m-l-5">List</i>
<ul id="cooking_result" class="recipes grid">
<li></li>
<li></li>
</ul>

Related

Why is my text output from next() and prev() toggle incorrect?

When clicking the arrows to change the displayed option, the incorrect options is shown.
The user should be able click on the option menu to toggle it open/cosed and be able to click on a option to select it. Alternatively, the arrows could be used to toggle through the options instead.
This is the problematic code:
<script>
$("#arrow_left_physics").click(function() {
var $selected = $(".left_menu_option_selected").removeClass("left_menu_option_selected");
var divs = $("#left_menu__variant_physics").children();
divs.eq((divs.index($selected) - 1) % divs.length).addClass("left_menu_option_selected");
$("#left_menu_open .button-text").text($($selected).text());
});
$("#arrow_right_physics").click(function() {
var $selected = $(".left_menu_option_selected").removeClass("left_menu_option_selected");
var divs = $selected.parent().children();
divs.eq((divs.index($selected) + 1) % divs.length).addClass("left_menu_option_selected");
$("#left_menu_open .button-text").text($($selected).text());
});
</script>
$("#menu_open").click(function() {
$("#menu").toggle();
});
$(".menu_option").click(function() {
if ($(this).hasClass(".menu_option_selected")) {} else {
$(".menu_option").removeClass("menu_option_selected");
$(this).addClass("menu_option_selected");
$("#menu_open .button_text").text($(this).text());
}
});
$("#arrow_left").click(function() {
var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
var options = $("#menu").children();
options.eq((options.index($selected) - 1) % options.length).addClass("menu_option_selected");
$("#menu_open .button_text").text($($selected).text());
});
$("#arrow_right").click(function() {
var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
var options = $("#menu").children();
options.eq((options.index($selected) + 1) % options.length).addClass("menu_option_selected");
$("#menu_open .button_text").text($($selected).text());
});
.menu_open {
Cursor: pointer;
}
.menu {
display: none;
position: absolute;
border: 1px solid;
}
.menu_option {
Cursor: pointer;
Padding: 5px;
}
.menu_option:hover {
Background-Color: black;
Color: white;
}
.menu_option_selected {
color: green;
Background-color: #00ff0a4d;
}
.menu_option_selected:hover {
color: green;
}
.arrow {
Cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input class="arrow" type="button" id="arrow_left" value="❮" />
<input class="arrow" type="button" id="arrow_right" value="❯" />
</div>
<div>
<button class="menu_open" id="menu_open">
<span class="button_text">option1</span>
</button>
</div>
<div class="menu" id=menu>
<div class="menu_option menu_option_selected">option1</div>
<div class="menu_option">option2</div>
<div class="menu_option">option3</div>
<div class="menu_option">option4</div>
<div class="menu_option">option5</div>
<div class="menu_option">option6</div>
</div>
-It seems that the first click of the arrows isn't working and that the index function is incorrect somewhere.

The problem is this line:
$("#menu_open .button_text").text($($selected).text());
$($selected) is the option that was previously selected, so you're showing the text of the previous option, not the current option. (BTW, there's no need to wrap $selected in $(), since it's already a jQuery object.)
You should use $(".menu_option_selected").text() instead of $($selected).text() to get the current option.
You should also make the initial text of the button option1, so it matches the selected option.
$("#menu_open").click(function() {
$("#menu").toggle();
});
$(".menu_option").click(function() {
if ($(this).hasClass(".menu_option_selected")) {} else {
$(".menu_option").removeClass("menu_option_selected");
$(this).addClass("menu_option_selected");
$("#menu_open .button_text").text($(this).text());
}
});
$("#arrow_left").click(function() {
var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
var options = $("#menu").children();
options.eq((options.index($selected) - 1) % options.length).addClass("menu_option_selected");
$("#menu_open .button_text").text($(".menu_option_selected").text());
});
$("#arrow_right").click(function() {
var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
var options = $("#menu").children();
options.eq((options.index($selected) + 1) % options.length).addClass("menu_option_selected");
$("#menu_open .button_text").text($(".menu_option_selected").text());
});
.menu_open {
Cursor: pointer;
}
.menu {
display: none;
position: absolute;
border: 1px solid;
}
.menu_option {
Cursor: pointer;
Padding: 5px;
}
.menu_option:hover {
Background-Color: black;
Color: white;
}
.menu_option_selected {
color: green;
Background-color: #00ff0a4d;
}
.menu_option_selected:hover {
color: green;
}
.arrow {
Cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input class="arrow" type="button" id="arrow_left" value="❮" />
<input class="arrow" type="button" id="arrow_right" value="❯" />
</div>
<div>
<button class="menu_open" id="menu_open">
<span class="button_text">option1</span>
</button>
</div>
<div class="menu" id=menu>
<div class="menu_option menu_option_selected">option1</div>
<div class="menu_option">option2</div>
<div class="menu_option">option3</div>
<div class="menu_option">option4</div>
<div class="menu_option">option5</div>
<div class="menu_option">option6</div>
</div>

Just another version, refactoring your javascript code with some Arrow functions.
const setButtonText = () => {
$("#menu_open .button_text").text(
$(".menu_option_selected").text()
);
}
const moveSelection = direction => {
var selected = $(".menu_option_selected")
var options = $("#menu").children()
var newIndex;
if (direction == 'right') {
newIndex = (options.index(selected) + 1) % options.length
} else {
newIndex = (options.index(selected) - 1) % options.length
}
selected.removeClass("menu_option_selected")
options.eq(newIndex).addClass("menu_option_selected")
setButtonText()
}
// inizilize menu button_text
setButtonText()
$("#arrow_left").click(() => moveSelection('left'));
$("#arrow_right").click( () => moveSelection('right'));
$("#menu_open").click( () => $("#menu").toggle());
$(".menu_option").click( function() {
$(".menu_option_selected").removeClass("menu_option_selected")
$(this).addClass("menu_option_selected")
setButtonText()
});

jQuery show / hide notification if read

I'm trying to show/hide the .notification indicator when all of the .activity__item is marked as read. They can be marked read by clicking each individual item's .activity__button, or by clicking the button to mark all item's as read.
Using the function below I tried identifying whether each item has received the read state (getting the .activity__button--read class) and then hiding the notification if all of the items have been read. This doesn't seem to work here.
Is there an efficient way to show/ hide the notification indicator when all items have been read either by
Clicking them individually or
Marking all as read by clicking
the button?
$(function() {
if (!$(".activity__button").not(".activity__button--read").length) {
$(this).closest(".activity__header").find(".notification").hide();
} else {
$(this).closest(".activity__header").find(".notification").show();
} });
var open = 'fas fa-envelope-open';
var close = 'fas fa-envelope';
$(".activity__button[data-status]").off().on('click', function() {
var status = $(this).data('status');
if (status == 'unread') {
$(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
$(this).closest(".activity__item").addClass('activity__item--read');
} else {
$(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
$(this).closest(".activity__item").removeClass('activity__item--read');
}
});
$('.mark').off().on('click', function() {
var status = $(this).data('status');
if (!status || status == 'unread') {
$(this).closest(".activity__header").find(".notification").hide();
$(this).html('Mark all unread').data('status', 'read');
$(".activity__button[data-status]").each(function() {
$(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
$(this).closest(".activity__item").addClass('activity__item--read');
});
} else {
$(this).html('Mark all read').data('status', 'unread');
$(this).closest(".activity__header").find(".notification").show();
$(".activity__button[data-status]").each(function() {
$(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
$(this).closest(".activity__item").removeClass('activity__item--read');
$(this).closest(".activity__header").find(".notification").show();
});
}
});
$(function() {
if (!$(".activity__button").not(".activity__button--read").length) {
$(this).closest(".activity__header").find(".notification").hide();
} else {
$(this).closest(".activity__header").find(".notification").show();
}
});
.activity__header {
display: flex;
}
.activity__item {
position: relative;
height: 100px;
width: 300px;
border: 1px solid whitesmoke;
margin-top: -1px;
}
.activity__button {
cursor: pointer;
padding: 1rem;
font-size: 21px;
}
.activity__button svg {
color: #f8971d;
}
.activity__button.activity__button--read svg {
color: #47a877;
}
.activity__item--read {
background: #fafafa !important;
}
button {
padding: 12px;
margin: 1rem;
}
.notification {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #cb6f74;
color: #fff;
font-size: 10px;
font-weight: 600;
}
<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="activity__header">
<button class="mark" data-status="unread">Mark as Read</button>
<div class="notification"></div>
</div>
<div>
<div class="activity__item">
<div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
</div>
</div>
<div class="activity__item">
<div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
</div>
</div>
<div class="activity__item activity__item--read">
<div class="activity__button activity__button--read" data-status="read">
<i class="fas fa-envelope-open"></i>
</div>
</div>
<div class="activity__item">
<div class="activity__button" data-status="unread">
<i class="fas fa-envelope"></i>
</div>
</div>
</div>
</div>
data-status"read"`?

One way would be to check the state of all items each time they are updated
You could use a function like this
function updateNotificationIcon(){
var $activity_items = $('.activity__item'),
all_read = true;
// Loop through each .activity__item
$activity_items.each(function(){
// If item does NOT have the "read" class, set all_read to false
if(!$(this).hasClass('activity__item--read')){
all_read = false;
}
});
if(all_read){
$('.notification').hide();
}else{
$('.notification').show();
}
}
Then just run that function after each change to one of the item's "read" state
In your case I would update your javascript as so:
var open = 'fas fa-envelope-open';
var close = 'fas fa-envelope';
$(".activity__button[data-status]").off().on('click', function() {
var status = $(this).data('status');
if (status == 'unread') {
$(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
$(this).closest(".activity__item").addClass('activity__item--read');
} else {
$(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
$(this).closest(".activity__item").removeClass('activity__item--read');
}
// Add here
updateNotificationIcon();
});
$('.mark').off().on('click', function() {
var status = $(this).data('status');
if (!status || status == 'unread') {
$(this).closest(".activity__header").find(".notification").hide();
$(this).html('Mark all unread').data('status', 'read');
$(".activity__button[data-status]").each(function() {
$(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
$(this).closest(".activity__item").addClass('activity__item--read');
});
} else {
$(this).html('Mark all read').data('status', 'unread');
$(this).closest(".activity__header").find(".notification").show();
$(".activity__button[data-status]").each(function() {
$(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
$(this).closest(".activity__item").removeClass('activity__item--read');
$(this).closest(".activity__header").find(".notification").show();
});
}
// Add here
updateNotificationIcon();
});
$(function() {
if (!$(".activity__button").not(".activity__button--read").length) {
$(this).closest(".activity__header").find(".notification").hide();
} else {
$(this).closest(".activity__header").find(".notification").show();
}
});
function updateNotificationIcon() {
var $activity_items = $('.activity__item'),
all_read = true;
// Loop through each .activity__item
$activity_items.each(function() {
// If item does NOT have the "read" class, set all_read to false
if (!$(this).hasClass('activity__item--read')) {
all_read = false;
}
});
if (all_read) {
$('.notification').hide();
} else {
$('.notification').show();
}
}

How to change background colors between user input and computed output in javascript

Pretty new to javascript and jquery so I don't know if it's possible, but here goes. I'm attempting to build a simple chatbot feature for a website. Basically you click the help button link, a chatbox appears with a prompt for input. User inputs and a response comes out accordingly. I've got all this working fine.
What I want is to change the text color or background color of the user:"text" or help:"text" which alternate between chatting. Once the chatbox fills with back and forth text it becomes more difficult to differentiate between user input and feedback. Ideally i'd like the background color of chatbox feedback to be a gray color while user remains white.
HTML
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="dropdown">
<a id="helpBtn" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<div id="helpBox">
<span id="usrText"></span>
</div>
<input id="textarea" placeholder="Type Here" maxlength="15">
</ul>
</li>
</ul>
JS/jquery
$(function() {
$('#helpBtn').click(function() {
$(this).toggleClass('active');
$('#helpBox').toggle();
$('#textarea').toggle();
if ($(this).hasClass('active')) {
$('#usrText').html('');
$('#usrText').append('HelpBot: What can I help you with? ','<br />'+'Please type "sales", "info" or "contact" for information.','<br />');
}
});
});
$(function() {
$('#textarea').keydown(function() {
var text = $(this).val();
if (event.keyCode == 13) {
$(this).val('');
$('text').css({
"background":"blue",
"color":"red"
});
$('#usrText').append('User: '+text,'<br />');
}
else {
return;
}
if (matches(text)==1) {
$('#usrText').append('HelpBot: Todays sales are: ','<br />');
}
else if (matches(text)==2) {
$('#usrText').append('HelpBot: Find info here: ','<br />');
}
else if (matches(text)==3) {
$('#usrText').append('HelpBot: Call: or Email: ','<br />');
}
else {
$('#usrText').append('HelpBot: I did not understand that. ','<br />');
$('#usrText').append('Please type "sales", "info", or "contact". ','<br />');
}
return false;
$('#helpBox').scrollTop($('#helpBox').children().height());
});
});
function matches(text) {
var a1 = ['sales','sale','bargain'];
var a2 = ['info','information','411'];
var a3 = ['contact','number','email','phone'];
var split = text.split(" ");
if (a1.includes(text)) {
var match = a1.includes(text);
return 1;
}
else if (a2.includes(text)) {
var match2 = a2.includes(text);
return 2;
}
else if (a3.includes(text)) {
var match3 = a3.includes(text);
return 3;
}
}
Here's the jsfiddle for the program:
JSfiddle Chatbot

If I understood you well, you want to change background color of HelpBot message? If that is the case then just add <span style="background-color:lightgray;">Your Text</span> and do it like this:
$(function() {
$('#helpBtn').click(function() {
$(this).toggleClass('active');
$('#helpBox').toggle();
$('#textarea').toggle();
if ($(this).hasClass('active')) {
$('#usrText').html('');
$('#usrText').append('<span style="background-color:lightgray;">HelpBot: What can I help you with? </span>', '<br />' + '<span style="background-color:lightgray;">Please type "sales", "info" or "contact" for information.</span>', '<br />');
}
});
});
$(function() {
$('#textarea').keydown(function() {
var text = $(this).val();
if (event.keyCode == 13) {
$(this).val('');
$('text').css({
"background": "blue",
"color": "red"
});
$('#usrText').append('User: ' + text, '<br />');
} else {
return;
}
if (matches(text) == 1) {
$('#usrText').append('<span style="background-color:lightgray;">HelpBot: Todays sales are: </span>', '<br />');
} else if (matches(text) == 2) {
$('#usrText').append('<span style="background-color:lightgray;">HelpBot: Find info here: </span>', '<br />');
} else if (matches(text) == 3) {
$('#usrText').append('<span style="background-color:lightgray;">HelpBot: Please call: (555)555-5555.', '<br /></span>', '<span style="background-color:lightgray;">HelpBot: Or you can email us at: wookiesRus#weirdos.net</span>', '<br />');
} else {
$('#usrText').append('<span style="background-color:lightgray;">HelpBot: I did not understand that. </span>', '<br />');
$('#usrText').append('<span style="background-color:lightgray;">Please type "sales", "info", or "contact". </span>', '<br />');
}
return false;
$('#helpBox').scrollTop($('#helpBox').children().height());
});
});
function matches(text) {
var a1 = ['sales', 'sale', 'bargain'];
var a2 = ['info', 'information', '411'];
var a3 = ['contact', 'number', 'email', 'phone'];
var split = text.split(" ");
if (a1.includes(text)) {
var match = a1.includes(text);
return 1;
} else if (a2.includes(text)) {
var match2 = a2.includes(text);
return 2;
} else if (a3.includes(text)) {
var match3 = a3.includes(text);
return 3;
}
}
#helpBtn {
color: black;
text-decoration: none;
}
#helpBox {
width: 100%;
height: 250px;
background-color: white;
overflow-y: auto;
display: none;
z-index: 1000;
}
#textarea {
position: absolute;
width: 100%;
margin-top: -23px;
display: none;
}
#usrText {
line-height: 1.4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="dropdown">
<a id="helpBtn" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<div id="helpBox">
<span id="usrText"></span>
</div>
<input id="textarea" placeholder="Type Here" maxlength="15">
</ul>
</li>

Removing a bootstrap popover dynamically using jquery

This following works when a list item is selected and then hovered and a popover is shown. But when I try to remove popover data attributes from list tag, all the tag removes but the popover does not remove. How to remove the popover such that when an item is not selected, the popover is not shown?
/* Latest compiled and minified JavaScript included as External Resource */
// Checked list box items
$(function() {
$('.list-group.checked-list-box .list-group-item').each(function() {
// Settings
var $widget = $(this),
$checkbox = $('<input type="checkbox" class="hidden" />'),
color = ($widget.data('color') ? $widget.data('color') : "primary"),
style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
$widget.css('cursor', 'pointer')
$widget.append($checkbox);
// Event Handlers
$widget.on('click', function() {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function() {
var id = $(this).closest('li').attr('id');
var isChecked = $checkbox.is(':checked');
if (isChecked) addPopOver(id);
else removePopOver(id);
updateDisplay();
});
function addPopOver(id) {
id = "#" + id;
$(id).attr('data-toggle', "popover");
$(id).attr('data-trigger', "hover");
$(id).attr('data-original-title', $(id).text());
$(id).attr('data-content', "(No items selected)");
$('[data-toggle=popover]').popover();
}
function removePopOver(id) {
id = "#" + id;
$(id).removeAttr("data-toggle");
$(id).removeAttr("data-trigger");
$(id).removeAttr("data-original-title");
$(id).removeAttr("data-content");
}
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$widget.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$widget.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$widget.data('state')].icon);
// Update the button's color
if (isChecked) {
$widget.addClass(style + color + ' active');
} else {
$widget.removeClass(style + color + ' active');
}
}
// Initialization
function init() {
if ($widget.data('checked') == true) {
$checkbox.prop('checked', !$checkbox.is(':checked'));
}
updateDisplay();
// Inject the icon if applicable
if ($widget.find('.state-icon').length == 0) {
$widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
}
}
init();
});
$('#get-checked-data').on('click', function(event) {
event.preventDefault();
var checkedItems = {},
counter = 0;
$("#check-list-box li.active").each(function(idx, li) {
checkedItems[counter] = $(li).text();
counter++;
});
$('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
});
});
/* Check Box For item required */
.state-icon {
left: -5px;
}
.list-group-item-primary {
color: rgb(255, 255, 255);
background-color: rgb(66, 139, 202);
}
/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
margin-bottom: 0px;
}
.list-inline>li {
display: inline-block;
padding-right: 12px;
padding-left: 20px;
margin-bottom: 3px;
font-size: 17px;
}
#check-list-box {
padding: 10px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul id="check-list-box" class="list-group checked-list-box list-inline ">
<li class="list-group-item event-item" id="venue" data-color="danger">Venue</li>
<li class="list-group-item event-item" id="catering" data-color="info">Catering</li>
<li class="list-group-item event-item" id="desserts" data-color="warning">Desserts</li>
<li class="list-group-item event-item" id="photographer" data-color="success">Photographer</li>
<li class="list-group-item event-item" id="bus" data-color="danger">Party buses</li>
<li class="list-group-item event-item" id="castles" data-color="danger">Bouncy Castles</li>
<li class="list-group-item" data-color="danger">Other</li>
<!--<input type="textbox" name ="other" >-->
</ul>

You could use .popover('destroy').
function removePopOver(id) {
id = "#" + id;
$(id).popover('destroy')
}

To destroy the shown popover you can use the following code-snippet:
function removePopOver(id) {
id = "#" + id;
$(id).popover('dispose'); // JQuery > 4.1
// $(id).popover('destroy'); // JQuery < 4.1
}
You can also remove all created popovers from your DOM via .popover class (of course each popover has its own id, so by knowing the IDs you can be more precise)
$('.popover').remove();

Update data value via jquery

I need to update two data value.
When I click on a div with class .messageconv grab the data-unread_mess_n value and subtract it from data-menutop_mess_nr and by the same data-unread_mess_n.
If the value of data-menutop_mess_nr==0 change the class.I can't update data-unread_mess_n and data-menutop_mess values why?
$(document).on('click touchstart', '.messageconv', function(e) {
e.preventDefault();
messagesNumber($(this));
});
function messagesNumber(elem) {
var numMess = elem.parent().data('unread_mess_n');
var numMessMenutop = $('#menutop_mess_nr').data('menutop_mess_nr');
if (numMess != 0) {
elem.children('p').remove();
}
var remainingMess = numMessMenutop - numMess;
$('#menutop_mess_nr').html(remainingMess);
if (remainingMess == 0) {
$('#menutop_mess_nr').addClass('bluecount').removeClass('redcount');
}
elem.parent().data('unread_mess_n','0');
$('#menutop_mess_nr').data('menutop_mess_nr',remainingMess);
}
.messageconv{
border: 2px solid red;
height: 50px;
}
.redcount {
background: #de2424;
width:30px;
}
.bluecount {
background: #333399;
width:30px;
}
.redcount:hover {
background: #ed4747;
text-decoration: none;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<a data-unread_mess_n="2" href="5">
<div class="messageconv">
test
<p class="incmessage redcount">2</p></div>
</a>
<a data-unread_mess_n="3" href="4">
<div class="messageconv">
test1
<p class="incmessage redcount">3</p></div>
</a>
<p data-menutop_mess_nr="5" id="menutop_mess_nr" class="incmessage redcount">5</p>

You can try this
elem.parent().attr('unread_mess_n','0');

We Keep Coding

JavaScript is the programming language of the Web.

Javascript is adding active class but not remove when click other button - javascript

Related

Why is my text output from next() and prev() toggle incorrect?

jQuery show / hide notification if read

How to change background colors between user input and computed output in javascript

Removing a bootstrap popover dynamically using jquery

Update data value via jquery

Categories

Resources