I want to disable my div with image and click event that event does not call. I try do it with KO:
<div title="Delete Series" class="deleteSeriesButton" data-bind="css: { disabled: true}" ></div>
but this does not work with div.
Can I do it without unbind click event?
If you are using KnockoutJS, then you have a view model.
And if you have a view model, you should be able to add an observable property that tells you whether the "delete series" button is enabled or disabled.
self.isDeleteEnabled = ko.computed(function() {
// your code that tells whether the button is enabled or not
});
And let's say you in your view model the click action, like this:
self.clickAction = function() {
// do what you want to do
}
Thne, you can make your "click" binding dependent on this observable, like this:
<div class="button" data-bind="click: isDeleteEnabled() ? clickAction : null">
If the isDeleteEnabled observable returns true, then the button is clickable, otherwise it's not.
I made a fiddle so you can see how it's done in a real example.
you can block the div using the jQuery blockUI plugin.
link to blockUI
Related
I have a template
<div (click)="handler()">
<input type='checkbox' (click)="$event.stopPropagation()" (change)="$event.stopPropagation()">
</div>
and in my component here is the handler
handler() {
this.router.navigate('path');
}
I wanted do nothing on checkbox click but to route on div click.
The above solution is not working.
First argument of navigate function has to be an array
this.router.navigate(['path']);
OR
you can use navigateByUrl,
this.router.navigateByUrl('path');
Since you are using $event.stopPropagation() when you click on the checkbox, navigation won't happen but when you simply click on the div, you will be navigated to expected route.
This setup works for me:
<div (click)="onDivClick()">
<mat-checkbox (click)="$event.stopPropagation()" (change)="onCheckboxChange($event)"></mat-checkbox>
</div>
...
onDivClick() {
console.log('div clicked');
}
onCheckboxChange(event) {
console.log(event);
}
Important to note:
MatCheckboxChange event type does not have a stopPropagation() function so your example code should actually display an error in the console.
So you want the stopPropagation() only on the checkbox click.
I figured out I have a label that wraps the checkbox. So, I needed to add the click event to stop propagation at the label element
The context is I have a radio button in my angular application that triggers a drop-down menu to appear. I'm attempting to attach an event listener that will fire off an AJAX request to a server and populate the drop-down list with the response. I'm using angular-bootstrap-select/bootstrap-select for the switch.
My initial approach was to simply add an ng-click directive to the div surrounding the button, which works, but the request is only sent if the user clicks on the white part of the button:
Image of button:
However the click doesn't register if the user clicks the grey part where it reads "All". I also tried wrapping the div in an anchor and attaching the ng-click to that but that did not work either.
I also tried to use the method in the documentation:
bootstrap-switch-event
My code:
$('input[id="mySwitch"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log('event triggered');
if ( !itemsCalled ) {
myService.items.get().$promise.then(function(response) {
$scope.itemList = response.items;
});
itemsCalled = true;
}
});
Template:
<input bs-switch id="mySwitch" ng-model="item" type="radio" switch-on-text="All" switch-off-text="Custom" switch-on-color="grey" switch-off-color="blue" switch-animate="true" switch-size="small" ng-value="'All'" ng-true-value="'All'" ng-false-value="'Custom'">
And a bunch of variations of this with no success. I'm pretty new to angular so I'm not sure if I'm going about this the wrong way or not.
If you want to make the Ajax call when the switch change from "Custom" to "All" :
function Controller($scope) {
$scope.$watch('item', function(newValue, oldValue){
if(newValue === "All") {
// Ajax call
alert("ajax");
}
})
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">
<input ng-model="item" type="radio" ng-value="'All'" ng-true-value="'All'" ng-false-value="'Custom'">
<button ng-click="item = 'Custom'">Reset</button>
</div>
I am attempting to bind a click event after previously unbinding it and I cannot get it to work.
Here is my HTML:
<div class="input-group date">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<span class="input-group-addon" id="dp1Icon" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></span>
</div>
The input is actually a bootstrap datepicker component. The span contains a bootstrap glyph that triggers the datepicker to open. I have a radio button group that toggles disabling these like this:
$(".date-wrap input[type='radio']").on("click", function(e){
if ($(e.target).val() == "permanent"){
$("#dp1, #dp1Icon").prop("disabled", true);
$("#dp1Icon").unbind("click"); // Disabled attribute only works on form controls, not spans. So we have to unbind the event
$("#dp1").removeAttr("readonly", "readonly");
}else{
$("#dp1, #dp1Icon, #e3").prop("disabled", false);
$("#dp1Icon").bind("click");
$("#dp1").removeAttr("readonly");
}
});
So, if the value of the radio button they click is "permanent", everything becomes disabled; that works great. Otherwise, I attempt to turn them back on.
The only thing I can think of is that when I try to bind the click event to the glyphicon again, I must define the actual handler that opens the datepicker; like this:
$("#dp1Icon").bind("click", $("#dp1").datepicker('show'));
But all that does is open the datepicker as soon as I click the other radio button. I want it to open only when they click it.
What important piece am I missing here? Does anyone have an idea?
Thanks for any tips.
bind("click") does not magically re-add the event. You need to add it back the event.
$("#dp1Icon").on("click", function(){ $("#dp1").datepicker('show'); } );
You might be better off just setting a flag inside that function and not removing the event.
I want to get the value saved in a button in backbone view, but can't seem to get it to work.
I have a couple of buttons in the html template :
<button class='remove-group-button' value='1'>X</button></div>
<button class='remove-group-button' value='2'>X</button></div>
And in the view I have an event on the button click and i'm trying to get the value from the button
events: {
"click .remove-group-button": "groupRemoved"
},
groupRemoved: function(e){
e.preventDefault();
console.log("groupRemoved");
console.log(e);
console.log($(this).attr("value")); // a feeble attempt which failed miserably
},
What would be the correct way to get the value from the button?
this in a Backbone event handler is rigged to be set to the View. Fortunately, what you want is contained in the event object which is passed to the function.
So you can do this:
$(e.currentTarget).attr('value')
Does this help you?
e.target.attr('value')
I'm trying to create an indicator that pops over whenever the input text is focused. The content of the popover is html.
JS
$('.validate').popover({
html : true,
trigger : 'focus',
content : function() {
return $('#popover-content').html();
}
});
On Change
$('.validate').change(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
});
The HTML
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span><input type="text" class="validate" data-placement='right' title="Hello World">
</div>
<div id="popover-content" style="display: none">
<div class="row"><label id="sample">This is your div content</label></div>
</div>
The content inside the label gets updated, but the popover isn't. Dismissing the popover and focusing the input text again (to open it) shows the updated label.
Any help is appreciated :)
Two things: the change event doesn't fire until the input loses focus, you probably want to bind the update code to the keyup event. Second, though that code is updating your sample div, the popover is just getting that data when the popover is triggered; if you want to update the popover's sample div, you need to handle that as part of the keyup event handler. Try changing that event handler like so:
$('.validate').keyup(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
$('.popover #sample').html(eval_me);
});
and you should be good. Check the fiddle.
Edit: actually playing with it a little, it seems like keyup is a better trigger than keypress, otherwise the update trails the input by one char, but I'm probably just missing something there. Changed the code above accordingly.