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");
});
Related
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">
 
</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">
 
</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>
User needs to input Bitcoin address
after bitcoin address is valid modal should open
if bitcoin adress is invalid modal should stay closed
enter image description here
enter image description here
enter image description here
And here is the code
(Bicoin validation works, i only need help with the modal)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BItmixxer</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
hr.style1{
border-top: 1px solid #8c8b8b;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="text-align:center" >
<div class="container">
<h1>Crypto Mixxer</h1>
<p>some more Text about crypto mixxer</p>
</div>
</div>
<div class="container" style="text-align:center" >
<h1>BTC Mixxer</h1>
<p>Choose COins to mix:</p> <button type="button" class="btn btn-outline-primary">Bitcoin</button>
<button type="button" class="btn btn-outline-success">Ethereum</button>
<br>
<br>
<br>
<div class="form-group" id="elMessage" class="msg">
<input type="text" class="form-control" id="inpAddress" value="">
</div>
<button type="button" class="btn btn-primary" id="btnValidate" data-toggle="modal" data-target="#myModal">Next</button>
<script>
var normalize = (s) => {
let x = String(s) || '';
return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};
var check = (s) => {
if (s.length < 26 || s.length > 35) {
return false;
}
let re = /^[A-Z0-9]+$/i;
if (!re.test(s)) {
return false;
}
return true;
};
var getEl = (id) => {
return document.getElementById(id) || null;
};
var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');
var setMessage = (txt = '', clss = 'msg') => {
elMessage.className = clss;
elMessage.innerHTML = txt;
};
var validate = (s) => {
let className = 'msg fail';
let textMessage = 'Invalid bitcoin address';
if (!s) {
textMessage = 'Please enter a valid address';
}
let re = check(s);
if (re) {
className = 'msg pass';
textMessage = 'Bitcoin address is valid';
}
setMessage(textMessage, className);
return re;
};
btnValidate.onclick = () => {
let v = normalize(inpAddress.value);
let result = validate(v);
if (result) {
inpAddress.value = v;
}
};
lnkClear.onclick = () => {
inpAddress.value = '';
inpAddress.focus();
setMessage('Enter any text and press "Validate"');
};
</script>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3>Please send your BTC(min0.5) to</h3>
<p id ="btc-house" style="color:blue;"></p>
<script>
var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V','1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
document.getElementById("btc-house").innerHTML = rand;
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
I know i need to use
$('#myModal').modal('show');
$('#myModal').modal('hide');
i just dont know where to put it
First remove the data-toggle="modal" target="#myModal" from #btnValidate
<button type="button" class="btn btn-primary" id="btnValidate">Next</button>
Then change your if statment inside your validate function to:
if (re) {
className = 'msg pass';
textMessage = 'Bitcoin address is valid';
$('#myModal').modal('show')
}
Note that you import jquery twice, which can lead to bugs. Remove one import and make sure jquery is imported before bootsrap.js
I have an ul (unordered list) which contains several li (list items) when I click on the + sign left to li, console log should output "description expanded" For the two first li, it works just fine, but not for any other li's. The html code by default includes only 2 li's. any li after that is added through the form. However, any new li does not produce the console log output. Which means they're not responding to clicks. I'm using jQuery to listen for click events. When clicking on the icon.
project link http://pctechtips.org/apps/todo/
//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = []; //{title: "value", desc: "value"},
var numId = 2; //num is for desc paragraph id eg <p id="plus-3">
/*
* Script main body
*/
$(document).ready(function() {
//hide form when doc loads first time
$("#submit-form").hide();
//hide list item description <p>
$(".item-desc").hide();
//listener for show hide form functionality
$("#add-todo").click(function() {
toggleForm();
return false; //return false to prevent page reload
});
//listener for add new item form (submit button)
$(".btn").click(function() {
console.log("submit item");
addToList();
});
//listener for expanding li description
$(".plus").click(function() {
console.log("description expanded")
var plusId = $(this).attr("id"); //grabbing id of plus sign
showDescription(plusId);
return false;
});
});
//functionality for show / hide form
function toggleForm() {
if($("#submit-form").is(":hidden")) {
console.log("form exapnded");
$("#submit-form").show("slow");
$("#form-icon").removeClass("fa-plus-square-o");
$("#form-icon").addClass("fa-minus-square-o");
}
else {
console.log("form hidden");
$("#submit-form").hide("slow");
$("#form-icon").removeClass("fa-minus-square-o");
$("#form-icon").addClass("fa-plus-square-o");
}
}
//add new item to todo list items
function addToList() {
numId++;
//getting data from input fields
var todoTitle = $("#todo-title").val();
var todoDesc = $("#todo-desc").val();
//checking user input
if(todoTitle == "" || todoDesc == "") {
alert("fill in all fields!");
}
else {
console.log(todoTitle + "\n" + todoDesc);
//adding values to array
todoList.push({title: todoTitle, desc: todoDesc},);
//adding new li to ul
var ul = document.getElementById("list");
var li = document.createElement("li");
$(li).addClass("list-group-item justify-content-between align-items-center");
$(li).append(($('<i id="plus-'+numId+'" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>')));
$(li).append(($('<span class="left marg-left">'+todoTitle+'</span>')));
$(li).append(($('<i class="fa fa-trash-o right" aria-hidden="true"></i>')));
$(li).append(($('<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>')));
ul.appendChild(li);
}
}
//expanding description under for each todo
function showDescription(plusId) {
//getting the number from id
var num = plusId.substring(plusId.indexOf("-")+1);
//checking for hide / show description paragraph
if($("#desc-"+num).is(":hidden")) {
$("#desc-"+num).show("slow");
$("#desc-"+num).removeClass("fa-plus-square-o");
$("#desc-"+num).addClass("fa-minus-square-o");
}
else {
$("#desc-"+num).hide("slow");
$("#desc-"+num).removeClass("fa-minus-square-o");
$("#desc-"+num).addClass("fa-plus-square-o");
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>TodoList App</title>
<!-- bootstrap, fontawsome cdn -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- local stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- local javascript -->
<script type="text/javascript" src="js/todo.js"></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
<div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
<form class="">
<div class="form-group">
<input type="text" class="form-control" id="todo-title" placeholder="Todo Title" value="Pay Car Insurance">
</div>
<div class="form-group">
<input type="text" class="form-control" id="todo-desc" placeholder="Todo Description" value="This is to pay car insurance">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item justify-content-between align-items-center">
<i id="plus-1" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg-left">Pay Car Insurance </span>
<i class="fa fa-trash-o right" aria-hidden="true"></i>
<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
</li>
<p id="desc-1" class="item-desc bg-white">Helloooooooooo this is description</p>
<li class="list-group-item justify-content-between align-items-center">
<i id="plus-2" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg-left">Pay Car Insurance </span><i class="fa fa-trash-o right" aria-hidden="true"></i>
<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
</li>
<p id="desc-2" class="item-desc bg-white">Helloooooooooo this is description</p>
</ul>
</div>
</div>
</body>
</html>
ok for dynamically added elements the even listener needs to be defined at the root / document level. so
$("class").on("click", function() { });
will not work. It needs to be
$(document).on("click", ".class", function() { });
Thanks to "MADDY BLACKLISTED" above pointed me in right directions
Use
$(document).on("click", ".plus", function() {
console.log("description expanded")
var plusId = $(this).attr("id"); //grabbing id of plus sign
showDescription(plusId);
return false;
});
Instead of having a static click listener defined at document load.
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>
I want to implement a custom next button into the bootstrap tab navigation.
When clicking on the next-button, the next tab should be displayed as active.
If the last tab is reached it should start with the first tab.
Bootply snippet
This solve your problem
$('.next-tab').click(function(e){
if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
$('.nav-tabs > li').first('li').find('a').trigger('click');
}else{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
e.preventDefault();
});
http://www.bootply.com/XYpxMIgink
I Recently needed this functionality and this is what I ended up with:
$('.change-tab').click(function() {
var $this = $(this);
var $nav = $($this.data('target'))
var $tabs = $nav.find('li');
var $curTab = $tabs.filter('.active');
var cur = $tabs.index($curTab);
if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a');
else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a');
$showTab.tab('show');
});
// normal tabs code
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$(function () {
$('#myTab a:last').tab('show');
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home
</li>
<li>Profile
</li>
<li>Messages
</li>
<li>Settings
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home content...</div>
<div class="tab-pane" id="profile">Content here...</div>
<div class="tab-pane" id="messages">Messages...</div>
<div class="tab-pane" id="settings">Settings...</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar pull-right">
<div class="btn-group">
<button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button>
<button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
I am using #DelightedD0D provided solution. When the page load, the control stop on the last tab always. If you want to fix this, please update the following function
$(function () {
$('#myTab a:last').tab('show');
})
to
$(function () {
$('#myTab a:active').tab('show');
})