How to allow User to click on next button from header section? - javascript

I have a list of buttons from which I navigate to other pages and display
Create a variable
currentStep :number=1;
Add ng-disable for current step based on the button.
<button class="btn btn-outline-primary" (click)="first()" ng-disabled="currentStep == 1">First</button>
<button class="btn btn-outline-secondary" (click)="second()" ng-disabled="currentStep == 2">Second</button>
<button class="btn btn-outline-danger" (click)="third()" ng-disabled="currentStep == 3">Third</button>
<button class="btn btn-outline-warning" (click)="fourth()" ng-disabled="currentStep == 4">Fourth</button>
<button class="btn btn-outline-dark" (click)="fifth()" ng-disabled="currentStep == 5">Fifth</button>
Won't to fill the data and allow the disabled button to passon second page


Create a variable
currentStep :number=1;
Add ng-disable for current step based on the button.
<button class="btn btn-outline-primary" (click)="first()" ng-disabled="currentStep == 1">First</button>
<button class="btn btn-outline-secondary" (click)="second()" ng-disabled="currentStep == 2">Second</button>
<button class="btn btn-outline-danger" (click)="third()" ng-disabled="currentStep == 3">Third</button>
<button class="btn btn-outline-warning" (click)="fourth()" ng-disabled="currentStep == 4">Fourth</button>
<button class="btn btn-outline-dark" (click)="fifth()" ng-disabled="currentStep == 5">Fifth</button>

Related

Custom timepicker with jQuery and bootstrap

I build a custom timepicker with jQuery and bootstrap.
It's almost finished, but 1 "nice to have detail" is missing and I'm stucked getting to the result.
It should follow this rules:
Select the time on click
Only related times are possible to select.
Only 1 time range at once is possible (e.g. 09:00-11:00 works but can't pick another time range)
Disabled times are not possible to pick and if they are between a possible time range, only the range before or after disabled are allowed.
It should be possible to click the start time and the end time and if there are no obstacles in between, the times between should be selected as well.
1-4 are working but I'm stucked on point 5.
So what I want to achieve is that if I click on 13:00-14:00 and 15:00-16:00, 14:00-15:00 should be selected automatically if allowed by above rules.
$('.time-cal .time-btn').on('click',function(){
if($('.time-cal .time-btn.btn-success').length == 0)
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}else{
if($(this).hasClass('btn-light'))
{
if($(this).next().hasClass('btn-success') || $(this).prev().hasClass('btn-success'))
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}
}else{
let next = $(this).next();
let prev = $(this).prev();
if(!next.hasClass('btn-success') || ! prev.hasClass('btn-success'))
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}
}
}
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="time-cal col-lg-6 col-12">
<label>Pick times</label><br>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="07:00" data-end="08:00" disabled="">07:00 - 08:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="08:00" data-end="09:00" disabled="">08:00 - 09:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="09:00" data-end="10:00">09:00 - 10:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="10:00" data-end="11:00">10:00 - 11:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="11:00" data-end="12:00" disabled="">11:00 - 12:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="12:00" data-end="13:00">12:00 - 13:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="13:00" data-end="14:00">13:00 - 14:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="14:00" data-end="15:00">14:00 - 15:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="15:00" data-end="16:00">15:00 - 16:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="16:00" data-end="17:00" disabled="">16:00 - 17:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="17:00" data-end="18:00" disabled="">17:00 - 18:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="18:00" data-end="19:00">18:00 - 19:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="19:00" data-end="20:00">19:00 - 20:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="20:00" data-end="21:00">20:00 - 21:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="21:00" data-end="22:00">21:00 - 22:00</button>
<div class="form-group">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

-edit altered behaviour based on the comments.
At startup each time'button' is divided into a specific timeblock so buttons in the same timeblock can be quickly handled together (there might be some additional/other behavioral requirements when reselecting)
const
disabledClass = 'btn-danger',
selectedClass = 'btn-success',
notselectedClass = 'btn-light',
timeButtons = $('.time-cal .time-btn'),
enabledButtons = timeButtons.not('.' + disabledClass ),
timeBlocks = [];
timeButtons.each((index,btn)=>{btn.enabled=!$(btn).hasClass(disabledClass);
if(btn.enabled){
if(index===0 || !timeButtons[index-1].enabled){
timeBlocks.push([]); //new timeblock
}
btn.timeBlock = timeBlocks[timeBlocks.length-1];
btn.timeBlock.push(btn);
}
prevEnabled = btn.enabled;
btn.index = index;btn.selected=false;
btn.setSelected = sel => {if(btn.selected===sel)return; btn.selected=sel;
$(btn).toggleClass(notselectedClass,!sel).toggleClass(selectedClass,sel);}
});
enabledButtons.click(function(){
if(this.selected){
//deselect and make sure times in this block after this button are deselected too
this.timeBlock.filter(btn=>btn.index >= this.index && btn.selected).forEach(btn=>btn.setSelected(false));
return;
}
//deselect other timeblocks
enabledButtons.toArray().filter(b=>b.timeBlock !== this.timeBlock).forEach(b=>b.setSelected(false));
//check if there are other selected
const selected = this.timeBlock.filter(b=>b.selected);
if(selected.length === 0)
this.setSelected(true); //no other buttons selected, simply select
else{
//select range withint the timeblock
let from = selected[0].index, to = this.index;
if(from > to)
[from,to] = [to,from];
for(let i = from;i<=to;i++)
timeButtons[i].setSelected(true);
}
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="time-cal col-lg-6 col-12">
<label>Pick times</label><br>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="07:00" data-end="08:00" disabled="">07:00 - 08:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="08:00" data-end="09:00" disabled="">08:00 - 09:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="09:00" data-end="10:00">09:00 - 10:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="10:00" data-end="11:00">10:00 - 11:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="11:00" data-end="12:00" disabled="">11:00 - 12:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="12:00" data-end="13:00">12:00 - 13:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="13:00" data-end="14:00">13:00 - 14:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="14:00" data-end="15:00">14:00 - 15:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="15:00" data-end="16:00">15:00 - 16:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="16:00" data-end="17:00" disabled="">16:00 - 17:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="17:00" data-end="18:00" disabled="">17:00 - 18:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="18:00" data-end="19:00">18:00 - 19:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="19:00" data-end="20:00">19:00 - 20:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="20:00" data-end="21:00">20:00 - 21:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="21:00" data-end="22:00">21:00 - 22:00</button>
<div class="form-group">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Button can't click() on javascript if it has multiple button in one div/list

I have problem that Button can't click() on javascript if it has multiple button in one div/list. In this case, "ADD" button doing nothing if i click it. But "Delete" button can. If i remove Delete function on js, add button work properly. What's wrong?
I have HTML like this
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And JS function :
var id ="";
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});

This problem happens because the second $('.coll-list').off('click') remove ALL on('click') event you have set before (i.e. on click on .btn-remove-coll, in this case).
You can try to change your off('click').on('click') order in your page and you'll see that will change the working button (or Delete or Add).
Here only remove button works
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And here add button only
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
2 possible solution to make both buttons work are:
Simply remove off('click')
Combine your 2 clicks in 1 on('click')
$('.coll-list').off('click').on('click','.btn-add-coll, .btn-remove-coll', function(e) {
if($(this).hasClass("btn-add-coll")){
alert("add")
} else {
alert("remove")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>

Try changing .coll-list from you JavaScript code with .coll_list because that is the class of you ul HTML tag.
Edit
It seems that it is impossible for some reason to have click functions for two different divs in the same <li> tag. I'd sugges you to change the HTML markup a bit, and use the <div> tag instead of <ul>. Fiddle: jsfiddle.net/xpvt214o/592987

Pass html string in controller and put into .html (angular js)

I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with
ng-bind-html
Still not working, any solution for me ? Thanks
This is my code :
Controller
if(item.active === 1){
html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';
}else{
console.log(1);
html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}
$scope.getButtonOnOff = function(html_button) {
return $sce.trustAsHtml(html_button);
};
Html
<span ng-if="data.active === 1">
<button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
<button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
</span>
<span ng-if="data.active === 0">
<button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
</span>

Lets try angular way
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

jquery get array of buttons and their values

Im new in JS and Jquery.
I have been trying to set an event to all buttons in the same class, meanwhile I'm tryinh to get the value of each button.
In my HTML I got:
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>
And in my JS I tried this:
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
At this point, I'm just trying get the value of each button that I click, but when I click in any button, I got a text of numbers (1 to 9) in a Column.
I would appreciate any kind of help.
Thank you in advance!

You trying to add click event to #highlightButtons and when you click on it, javascript get text of it that is 123456789. You need to add click event to buttons. In the case, your selector changed to $('#highlightButtons > button')
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>

Reset bootstrap button state

I have a form with a few toggle buttons:
<div id="options-group" class="row">
<button id="burning-option-button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
<button id="flacky-cocktail-button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
<button id="ice-cocktail-button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
<button id="official-cocktail-button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
<button id="checked-cocktail-button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
</div>
Now I want to add button with possibility to reset states of that buttons.
What the best way to "unselect" toggled buttons using jquery/js?
I'm using Bootstrap3.

Try:
$('button.active').removeClass('active');
https://jsfiddle.net/fpdwef37/

Categories