ui not reflecting proper class upon toggle click - javascript

I have a toggle button and after wiring it up i noticed that when i click on it - the style doesn't change unless i refresh the page.
Here is my Html:
<div (click)="onValueChange(item)">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-toggle-switch" [ngClass]="{'active': item.isActive}">
<input type="checkbox">
<span class="status-on">on</span>
<span class="status-off">off</span>
</label>
</div>
</div>
What do i have to do to ensure that upon click the active class is added or removed properly without having to refresh?
Here is my on click function:
private onValueChange(item: ItemType) {
item.isActive = !item.isActive;
this.save(item);
}

Related

How to disable buttons in button-group (Bootstrap)?

I have a button-group like the one on the picture:
and the code like this:
<span class="btn-group" data-toggle="buttons">
<span class="btn btn-default active">
<input type="radio" value="false"><label >No</label>
</span>
<span class="btn btn-default">
<input type="radio" value="true"><label >Yes</label>
</span>
</span>
How do I disable this control completely? When I added bootstrap class .disabled and/or attribute disabled to any or all of these elements I still could click on the buttons and they were affected even though bootstrap was showing the crossed circle icon.
I found here a workaround that stops events propagation, however it works only to prevent adding active class to the buttons but not focus.
$('.btn-group .btn.disabled').click(function(event) {
event.stopPropagation();
});
$('.btn-group .btn.disabled').click(function(event) {
return false;
});

Remove class from buttons on changing values in editable div for dynamically generated divs

I am creating an app using knockout and jquery. There are user generated contents which a user can edit and save. I have a save button which is disabled and gets enabled only when new character is added to the editable div.
Problem:
Save button gets activated for all divs. I want only the respective button to get enabled and remaining should stay in disabled state.
HTML:
<div data-bind="foreach: $root.goals">
<div class="ui padded segment mainCard brdR-S" data-bind="attr:{id:Title()}">
<div>
<div>
<div contenteditable="true" class="heading pdM-TB wordwrap" data-bind="attr:{href:'#'+Title()}, editableText: Title, event: { keyup: $root.ShowButtons }" id="goalTitle">
</div>
<div class="mgXl-T pdM-TB">
<button class="ui disabled tiny primary button" id="btnSave" data-bind="click: $root.putGoal">
<i class="refresh icon"></i>Save
</button>
</div>
</div>
</div>
</div>
Jquery
self.ShowButtons = function (data, e) {
$('.button').removeClass('disabled')
};

Jquery event quits firing after 3 hits

I'm working with a small mvc view and I want to be able to toggle the data source(ajax call to controller) between either 1 of 2 locations or both. It all works great, until I've clicked the toggles 3 different times, then all three toggles become unresponsive. I've tried click and change events, same results.
The only other items are on the page is a left navigation view that still works after the toggles go idle.
If I navigate away from the view with the toggles and then back to it they remain broken. If I hard refresh the page they work for another 3 clicks.
I'm at a loss on this and need some help. Any thoughts?
my toggles
<div class="btn-group"id="divToggle" data-toggle="buttons">
<label class="btn blue">
<input type="radio" value="1" class="toggle DashToggle"> US06
</label>
<label class="btn blue active">
<input type="radio" value="0" class="toggle DashToggle"> BOTH
</label>
<label class="btn blue">
<input type="radio" value="2" class="toggle DashToggle"> US05
</label>
</div>
And my view consist of 5 div blocks like the following
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dashboard-stat blue-soft">
<div class="visual">
<i class="fa fa-car"></i>
</div>
<div class="details">
<div class="number stat_ActiveJits">
1349
</div>
<div class="desc">
Active JITS
</div>
</div>
<a class="more" href="javascript:;">
View Details <i class="m-icon-swapright m-icon-white"></i>
</a>
</div>
</div>
I have tried all of the following examples for the Jquery side and they all quit working after 3 clicks...
$(document).ready(function () {
$('#divToggle input[type=radio]').change(function () {
BuildDashBoard(this.value)
});
});
$('#divToggle input[type=radio]').live().change(function () {
BuildDashBoard(this.value)
});
$('.divToggle').on('change', '.DashToggle', (function () {
BuildDashBoard(this.value)
}));
And yes the toggle classes were changed to match these.
$(".US06_DashToggle").change(function () {
BuildDashBoard(1)
})
$(".US05_DashToggle").change(function () {
BuildDashBoard(2)
})
$(".DYNA_DashToggle").change(function () {
BuildDashBoard(0)
})
And finally my ajax call which works fine.
function BuildDashBoard(plantid)
{
var uri = 'http://' + host + '/DashBoard/DashStats';
$.ajax({
type: 'POST',
url: uri,
data: { PlantId: plantid },
success: function (d) {
$('.stat_ActiveJits').text(d.ActiveJits.toString());
$('.stat_PastDueJits').text(d.PastDueJits.toString());
$('.stat_ActiveExpedites').text(d.ActiveExpedites.toString());
$('.stat_PastDueExpedites').text(d.PastDueExpedites.toString());
$('.stat_ActiveProductionOrders').text(d.ActiveProductionOrders.toString());
//$.notific8('Application Options Updated', { theme: 'teal', life: 2000, verticalEdge: 'right', horizontalEdge: 'bottom' });
}
});
}
Well after a couple hours of fighting with this a comment Kevin B made about the radio buttons needing names made me rethink my css. My css was not correctly doing the grouping so once i clicked a button, it was checked and never unchecked. The reason it did not work as buttons, I have no clue and I'm done messing with it.

Toggle visibility of html elements using angular js

I have created a html dom structure like this. I have used the ng-click to toggle the visibility of the DOM structure. For example if I am clicking in menu1 and if it is not visible it will be make visible. This is working perfectly . But I came across a scenerio where I need to close menu2(if it is open) on clicking menu1 & vice versa. Is is possible to accomplish using ng-click & ng-show
<span ng-click ="menu1 = !menu1">
<div ng-show="menu1">
//Rest of DOM element
</div>
</span>
<span ng-click ="menu2 = !menu2">
<div ng-show =menu2>
//Rest of DOM element
</div>
</span>
Below I will provide you a sample. I have provided two button, by clicking on each button it hide and show its respective content
HTML :
<body ng-app="ngToggle">
<div ng-controller="myAppCtrl">
<button ng-click="toggleCustom()">Custom</button>
<span ng-hide="custom">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom">To:
<input type="text" id="to" />
</span>
<span ng-show="custom2"></span>
<button ng-click="toggleCustom2()">Custom</button>
<span ng-hide="custom2">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom2">To:
<input type="text" id="to" />
</span>
<span ng-show="custom2"></span>
</div>
</body>
And JS:
angular.module('ngToggle', []).controller('myAppCtrl',['$scope', function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = $scope.custom === false ? true: false;
};
$scope.custom2 = true;
$scope.toggleCustom2 = function() {
$scope.custom2 = $scope.custom2 === false ? true: false;
};
}]);
<span ng-click="menuToggle(1)">
<div ng-show="menu1">...</div>
</span>
<span ng-click="menuToggle(2)">
<div ng-show="menu2">...</div>
</span>
And in controller (or inline inside ng-click but you'd be better off having it in the controller (or directive depending on your code structure))
$scope.menuToggle = function(menu) {
$scope.menu1 = (!$scope.menu1 && menu === 1);
$scope.menu2 = (!$scope.menu2 && menu === 2);
};
If I understand your question correctly, you want this scenario:
When component/page/whatever is loaded, nothing is open (or you could set a default by settings '$scope.menu1 = true;' in controller). Then, if you would press menu1 span, menu1 would open. If you then press menu1 again, it would close. If you instead press menu2, menu1 is closed and menu2 opened.
In the future, try to be a bit more descriptive with your questions. Hope it works out!

AngularJS popover: hide popover template on mouse out

I am using AngularJS' ui-bootstrap module. Here's my markup:
<button class="btn btn-default btn-sm" type="button"
popover-template="dynamicPopover.templateUrl"
popover-trigger="click" id="custom_overview"
popover-placement="bottom">Custom</button>
Here's my controller:
$scope.dynamicPopover = {
templateUrl : '../static/templates/popup-templates/datepicker.html'
};
Here's my popover template:
<div class="row" id="datepicker-container">
<div class="col-sm-12 clearfix">
<div class="col-sm-12">
<span class="heading">From:</span>
<input ng-model="timedata.fromDate" type="text" id="fromDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="fromOpen.isOpen" ng-click="fromOpen.isOpen = true" placeholder="dd-mm-yyyy">
</div>
<div class="col-sm-12" style="margin-top:5px">
<span class="heading">To:</span>
<input ng-model="timedata.toDate" type="text" id="toDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="toOpen.isOpen" ng-click="toOpen.isOpen = true" placeholder="dd-mm-yyyy">
<div class="error"
ng-show="timedata.toDate <= timedata.fromDate && timedata.fromDate && timedata.toDate">
<span>'To' date cannot be less than 'From' date.</span>
</div>
</div>
</div>
<div class="col-sm-12" id="submit-button">
<button class="btn btn-primary" ng-click="setInterval('custom')"
ng-disabled="timedata.toDate <= timedata.fromDate || !timedata.toDate || !timedata.fromDate">
Submit
</button>
</div>
</div>
As you can see, I am populating a popover with a popover template which contains a form. Here's a screenshot:
This popover opens up when I click on the 'Custom' button. Now, I want this popover to hide when I take the mouse away from the template and the 'Custom' tab. How can I do it?
In short,
replacing popover-trigger="click" by popover-trigger="'mouseleave : click'" should work for you.
For more understanding,
As per uib-popover documentation, both popover open and close triggers will be enabled by default with the popover-trigger attribute(only if you want to close and open on same event).
For example:
popover-trigger="'mouseenter'" This by default should open the popover on mouseover and close the popover on mouseleave
popover-trigger="'click'" - This will show and hide on clicks
In your case(show and close on different events), popover-trigger attribute should contain both events in order to work.
popover-trigger="'mouseleave : click'" This should work. Here first and second values represents hide and show triggers respectively.

Categories