I am trying to disable bootstrap toggle buttons but no luck yet
<div class="toggle btn btn-default" disabled data-toggle="toggle" data-bind="toggle:isok(), css:{off:!isok()}">
<div class="toggle-group">
<label class="btn btn-primary toggle-on">ON</label>
<label class="btn btn-default active toggle-off">OFF</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
I am using knockout to bind data. I hardcoded to add disabled property as you can see but it shows as disabled but i still can make it on or off.
How to fix this?
You hardcoded the disabled attribute to a div element. A div can't be disabled. Change the div to a button and it will work, see the example below in which the toggle has been handcrafted:
function Test() {
var _this = this;
_this.disabled = ko.observable();
_this.active = ko.observable();
_this.toggleActive = function() {
_this.active(!_this.active());
}
_this.toggleDisable = function() {
_this.disabled(!_this.disabled());
}
}
ko.applyBindings(new Test());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" aria-pressed="false" autocomplete="off" data-bind="css: {active: active}, click: toggleActive, enable: disabled">
<span data-bind="visible: active">ON</span>
<span data-bind="visible: !active()">OFF</span>
</button>
toggle disable
Related
I want to toggle the accordion only with the icons to add a click event on the button. How do I do this? I have tried this--
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button #click="toggleTheme" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
User
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button #click="toggleTheme" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
View
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
In this snippet The toggle on icon is working but Click event on button does not work.
How do I do the accordion toggle on icon & click event on button separately?
I just split the button in two ways
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">User</a>
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">View</a>
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
I have a textbox bound with datetime picker. What I have to do is on change of value in the text box if another input textbox (which also bound with datetimepicker) is empty I have to fill the value from initial textbox.
at the moment just trying to catch events but unable to success
my asp.net core razor code is given below
<div class="filters-list">
<div class="form-group">
<div class="input-group date">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
//try to print date value of txtFirst text box at on change event
});
</script>
}
if i put datetimepicker in js I got double date time picker
Do you mean you want to bind a datetime picker change event? Try this way:
$(document).ready(function () {
$("#txtFirstDate").datetimepicker();
$("#txtSecondDate").datetimepicker();
$('#txtFirstDate').on('dp.change', function (e) {
console.log(e.date._d);
})
});
Test Result:
Update:
It seems that the components we use and the methods we call are not the same. I will share all the libraries I use and the calling methods, I hope it will help you.
View:
<div class="filters-list">
<div class="form-group">
<div class="input-group date" id="datetimepicker">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#datetimepicker").datetimepicker();
$('#datetimepicker').on('dp.change', function (e) {
console.log(e.date._d);
})
$("#datetimepicker2").datetimepicker();
$('#datetimepicker2').on('dp.change', function (e) {
console.log(e.date._d);
})
});
</script>
_Layout.cshtml:
//...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
//...
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
//...
I have updated my site from BS4 to BS5.... all works, however, I have problems wth drop downs.
Please see this:
Well.... the drop down is opened when I click the button, but the only way to close it is by clicking inside the button again. If I click outside, dropdown is still opened.
Even when that should be the normal behaviour, I have explicitly added data-bs-auto-close="true" but no luck.
What is it going on here?
Note that this should be done automatically without adding some JS code. In BS4 it works correctly.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="btn-group">
<button id="btnFingerprints" type="button" class="btn btn-circle btn-secondary me-2 dropdown-toggle" data-bs-toggle-second="tooltip" data-bs-toggle="dropdown" aria-expanded="false" title="Testing">
<i class="ti-exchange-vertical"></i>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button" id="btnBajarHuellas">
<i class="ti-download me-2"></i>Bajar huellas
</button>
<button class="dropdown-item" type="button" id="btnSubirHuellas">
<i class="ti-upload me-2"></i>Subir huellas
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle-second="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html
When a Bootstrap alert is shown, I want to stay until the user explicitly dismisses it. However, all my alerts vanish within 5 seconds. How do I change this behavior?
My current alert code:
<div class="alert alert-dismissible alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button><b>Error:</b> Error message...</div>
Tried removing both alert-dismissible class but that didn't help.
Try this:
$(document).ready(function() {
$('button').click(function() {
$('.alert').show()
});
$('button').click(function() {
$(this).parents('div').hide();
});
});
.alert {
display: none;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<button type="submit" class="btn btn-primary">Submit</button>
<div class="alert alert-dismissible alert-success">
<button type="button" class="close">×</button>
<strong>Completed!</strong> Form successfully submitted...
</div>
</body>
This seems to be the results of adding "alert" as a class. The following works for me:
<div style="padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px" class="alert-dismissible alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button><b>Error:</b> Error message...</div>