We Keep Coding

Jquery Ui: Selectable - possible to select two list items with one click?

I am using Jquery Ui: selectable on a list and am trying to figure out how to select two list elements with one click. I want it so that when a list item is clicked/selected, the next item in the list also gets selected.
ASPX page:
<button id="joinButton" type="button" class="collapsible inactiveSequenceTitle">
<span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">
&nbsp
</span>Join Sections
</button>
<div id="joinBox" class="panel-collapse collapse">
<ul id="sortableJoin-1" style="width: 98%; margin: auto;"></ul>
<div id="saveJoin">
<button type="button" class="btn btn-primary" id="join">
<span class="fa fa-save">
&nbsp
</span>Join
</button>
</div>
</div>
Jquery/Jvascript:
$("#sortableJoin-1").selectable({
selected: function(event, ui) {
var selected = $("li[class$='ui-selected']").length;
}
stop: function (e) {
var last = $("li[class$='ui-selected']:last").index();
$("li:eq(" + (last + 1) + ")").addClass("ui-selected");
},
});
$('#sortableJoin-1').click(function() {
$(this).addClass('no-hover');
})

You can select the next item of the selected item using the stop event which is triggered at the end of the select operation. Inside stop, get the index of the last element with the class ui-selected and add this class to the next element in the list.
$("#sortableJoin-1").selectable({
selected: function(event, ui) {
var selected = $("li[class$='ui-selected']").length;
},
stop: function(e) {
var last = $("li[class$='ui-selected']:last").index();
$("li:eq(" + (last + 1) + ")").addClass("ui-selected");
}
});
.ui-selected {
background: red;
color: white;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<button id="joinSectionsButton" type="button" class="collapsible inactiveSequenceTitle"><span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus"> </span>Join Sections</button>
<div id="joinSectionsBox" class="panel-collapse collapse">
<ul id="sortableJoin-1" style="width: 98%; margin: auto;">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<div id="saveJoinSections">
<button type="button" class="btn btn-primary" id="joinSections"><span class="fa fa-save"> </span>Join Sections</button>
</div>
</div>

How to add a class to the body of the page, when the menu is open?

I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
https://www.s1biose.com/groupe/recettes-et-astuces
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
How to add a class .overlay-is-navbar-collapse to the body of the page, when the menu is open and delete the class when the menu is closed ?
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});

Use .one to attach a listener to the body right when the body's class gets added:
$('#dropdown-menu-action').on('click', () => {
$('body').addClass('overlay-is-navbar-collapse');
$('body').one('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
});

why don't you try this,
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
$('.dialog-off-canvas-main-canvas').on('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});

Try this,
$('dropdown-menu-action').click(function(){
if($(body).hasClass('overlay-is-navbar-collapse')){
$('body').removeClass('overlay-is-navbar-collapse');
}
else{
$('body').addClass('overlay-is-navbar-collapse');
}
});

Prevent from clicking, change class name, hide the highlight - jQuery

I have a three issue in this app.
First issue is that the show button doesn't change its name to "show offer" when the app is closed after we open it.
Second, the app doesn't prevent a user from clicking second and third button. He can click only one offer, but now the user can click on every.
Third, the user can highlight a new offer by clicking once, then he can hide the highlight, but cannot highlight it again and never. Appreciate any help.
//// hide offer before the Dom is loaded
//$('ul').hide()
$(document).ready(function() {
function showHideOffer() {
$('ul').slideToggle();
}
//click to show offers
$('.card').on('click', '.showOffers', showHideOffer, function() {
$('.showOffers').html('Hide Offers');
});
//click to hide offers - change name to show offers doesn't work!!
$('.card').on('click','.showOffers', showHideOfferfunction() {
$('.showOffers').html('Show Offers');
});
// click to book, to show info and close button and span
$('li').on('click', 'button', function(){
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
});
// filter new offers by clicking a "new" button
$('#buttons').on('click','.filterNew', function() {
$('.tour').filter('.newOffer').addClass('highlightnew');
$('.highlightpopular').removeClass('highlightpopular');
//click second time and the highlight is hidden
$('#buttons').on('click', '.filterNew', function() {
$('.highlightnew').removeClass('highlightnew');
});
});
// filter by popular offers
$('#buttons').on('click', '.filterPopular', function() {
$('.tour').filter('.popular').addClass('highlightpopular');
$('.highlightnew').removeClass('highlightnew');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.selected {
color: red;
}
.highlightnew {
background: #3D9970;
}
.highlightpopular {
background: #39CCCC;
}
ul {
display:none;
}
</style>
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<!-- click to show -->
<button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button>
<ul class="list-group list-group-flush">
<li class="usa tour newOffer list-group-item"; data-name="New York" data-price="$550">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour newOffer list-group-item" data-name="Paris" data-price="$450">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour popular list-group-item" data-name="Tokyo" data-price="$650">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
<ul id="buttons" class="list-group list list-group-flush">
<button class="filterNew btn btn-info">New</button>
<button class="filterPopular btn btn-info">Popular</button>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>

First Issue Solve : Checkout Here :
Change the code to
$('.card').on('click', '.showOffers', showHideOffer, function() {
//$('.showOffers').html('');
$(this).text( $(this).text() == 'Hide Offers' ? "Show Offers" : "Hide Offers");
});
Instead Of :
$('.card').on('click', '.showOffers', showHideOffer, function() {
$('.showOffers').html('Hide Offers');
});
//click to show offers
$('.card').on('click', '.showOffers', showHideOffer, function() {
//$('.showOffers').html('');
$(this).text( $(this).text() == 'Hide Offers' ? "Show Offers" : "Hide Offers");
});
//click to hide offers - change name to show offers doesn't work!!
$('.card').on('click','.showOffers', showHideOffer);
// click to book, to show info and close button and span
$('li').on('click', 'button', function(){
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
});
// filter new offers by clicking a "new" button
$('#buttons').on('click','.filterNew', function() {
$('.tour').filter('.newOffer').addClass('highlightnew');
$('.highlightpopular').removeClass('highlightpopular');
//click second time and the highlight is hidden
$('#buttons').on('click', '.filterNew', function() {
$('.highlightnew').removeClass('highlightnew');
});
});
// filter by popular offers
$('#buttons').on('click', '.filterPopular', function() {
$('.tour').filter('.popular').addClass('highlightpopular');
$('.highlightnew').removeClass('highlightnew');
});
function showHideOffer() {
$('ul').slideToggle();
}
.selected {
color: red;
}
.highlightnew {
background: #3D9970;
}
.highlightpopular {
background: #39CCCC;
}
ul {
display:none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<!-- click to show -->
<button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button>
<ul class="list-group list-group-flush">
<li class="usa tour newOffer list-group-item"; data-name="New York" data-price="$550">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour newOffer list-group-item" data-name="Paris" data-price="$450">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour popular list-group-item" data-name="Tokyo" data-price="$650">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
<ul id="buttons" class="list-group list list-group-flush">
<button class="filterNew btn btn-info">New</button>
<button class="filterPopular btn btn-info">Popular</button>
</ul>
</div>
</div>

To Resolve your first issue modify your function like below
var ValuesShowOrHidden = 0;
$('.card').on('click', '.showOffers', showHideOffer, function () {
if (ValuesShowOrHidden == 0) {
$('.showOffers').html('Hide Offers');
ValuesShowOrHidden = 1;
}
else if (ValuesShowOrHidden==1) {
$('.showOffers').html('Show Offers');
ValuesShowOrHidden = 0;
}
});
For the Second Issue try the below modification in your function
$('li').on('click', 'button', function () {
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked ' + offerName + ' offer for ' + offerPrice + '!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
$('li').unbind("click");
});

jquery chosen in bootstrap popover not working

I am trying to run jquery chosen inside a bootstrap popover, but the initiated chosen dropdown is not clickable.
Here is my code:
html
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title" >Click to toggle popover</button>
<div style="display: none;" id="popovercontent">
<select class="chosen chzn-done">
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>
</div>
JS
$(document).ready(function(){
// init chosen
var $chosen = $(".chosen").chosen();
// init popover
var $popover = $('#popover').popover({
placement: 'bottom',
html: true,
content: function () {
return $('#popovercontent').html();
},
title: function () {
return $(this).data('title');
},
});
// on show popover
$popover.on("show.bs.popover", function(e) {
console.log('open popover');
$chosen.trigger("chosen:updated");
});
}); // document.ready
https://jsfiddle.net/gdtocsud/
similar question (not answered): Chosen in bootstrap popover not working?
thank you
Bjoern

try this, may be this will help u
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css">
<script>
$(document).ready(function() {
var $popover = $('#popover').popover({
placement: 'bottom',
html: true,
content: function() {
return $('#popovercontent').html();
},
title: function() {
return $(this).data('title');
},
});
$popover.on("shown.bs.popover", function(e) {
$('.chzn-done').chosen();
});
$popover.on('hidden.bs.popover', function() {
$('.chzn-done').chosen('destroy');
});
});
</script>
</head>
<body style="padding:25px">
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title">Click to toggle popover</button>
<div id="popovercontent" style='display:none'>
<select class="chosen chosen-select chzn-done" >
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>
</div>
</body>
</html>

Here is the js code :
$(document).ready(function() {
// init chosen
//var $chosen = $(".chosen").chosen();
// init popover
var $popover = $('#popover').popover({
placement: 'bottom',
html: true,
content: function() {
return $('#popovercontent').html();
},
title: function() {
return $(this).data('title');
},
});
// on show popover
$popover.on("shown.bs.popover", function(e) {
$('.chzn-done').chosen();
});
$popover.on('hidden.bs.popover', function() {
$('.chzn-done').chosen('destroy');
});
}); // document.ready
For working code:
Here is fiddle link
Similar to chosen with modal the chosen behaviour needs to be initialized after the content is ready, so similar to modal events, you can use the popover events

Hi here is the working demo
https://jsfiddle.net/gdtocsud/2/
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>

Bootstrap dropdown menu on click

I am trying to create a dynamic Bootstrap dropdown button when the page load using this function
function loadPage(){
var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li>Action</li><li>Action 2</li></ul>');
$("#col1").append(fType);
}
But when I try to add onclick event on one of the options it doesn't work! This is my javascript
$('#act1').click(function(e) {
e.preventDefault();
alert('alerted');
});
Thanks.

Since content is new to DOM, you must init the click listener AFTER you load the button.
function loadPage() {
var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li>Action</li><li>Action 2</li></ul>');
$("#col1").append(fType).promise().done(function () {
$('#act1').click(function (e) {
e.preventDefault();
alert('alerted');
});
});
}