Custom Styled Checkbox with KnockoutJS does not respond to data-bind 'checked' - javascript

I have an advanced checkbox which is checked or unchecked based on initial data, and then it also responds when the user manually checks or unchecks it. Previously for my more primitive checkboxes, I really enjoyed using the checkboxes from here.
The only problem is that it doesn't work properly with Knockout. Notice how the checkbox doesn't respond when the custom checkbox is initialized. But if you remove this code from the bottom of the JavaScript, it works as expected.
// INITIALIZE CHECKBOX
$('#witnessSlider').checkboxpicker();
Here is a fiddle:
http://jsfiddle.net/maxgrr/r23q740u/1/
This could also apply to various other types of custom checkboxes.

Since you're introducing a custom plugin that is transforming your native checkbox into some more complex structure, the built-in checked binding-handler is no longer able to detect changes because it was meant to work with this.checked of the native <input type="checkbox" /> element (that is now hidden).
So, you need a more plugin-aware handler that will be able to update the view-model when the custom checkbox is mutated and also update the plugin when the model changes.
The following checkboxpicker handler does just that: the init function is called only once to setup the plugin, set its initial state according to the current view-model state (the value of the wereThereAnyWitnesses) and registering a listener (change) to any future changes that will then update the view-model.
The update function is called each time the view-model changes and is responsible of updating the custom checkbox state accordingly.
ko.bindingHandlers.checkboxpicker =
{
init: function(element, valueAccessor){
var val = valueAccessor();
$(element).checkboxpicker().prop('checked', val()).change(function() {
val(this.checked);
});
},
update: function(element, valueAccessor) {
var val = valueAccessor();
$(element).prop('checked', val());
}
};
And in your HTML:
<input type="checkbox" data-bind="checkboxpicker: wereThereAnyWitnesses" />
See Fiddle

Related

AngularJs keep lists in pristine state

We have a mover directive with 2 lists controls and 4 buttons. I want to be able to add keepPristine property to this directive and if I set it to true, the control should not react on changes and set ng-dirty flag. I tried adding to the ng-change event of the list:
$scope.onChanged = function (assigned) {
$scope.selectedItem = assigned[0];
if ($scope.keepPristine)
{
$scope.form.assignedList.$pristine = true;
$scope.form.unAssignedList.$pristine = true;
}
}
Unfortunately, when I inspect this control using Developer's Tools I see it's still has ng-dirty state. What should I do to make sure both lists are always in the pristine state regardless on my interaction with them?
You should try to use the method $setPristine() instead... and, if after that, it's not "pristine" yet then add an $scope.$apply() after the $setPristine() call.

How to check if Kendo UI ComboBox is Dirty (i.e. value has been changed from default value)?

I have a simple Kendo ComboBox:
HTML:
<div>
<h5>Brand</h5>
<div id="combo1"></div>
</div>
JavaScript:
j$("#combo1").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
value: "Original_Brand_Value",
dataSource: {
transport: {
read: {
url: "..."
}
}
}
});
Note that the ComboBox has a default initial value of "Original_Brand_Value". How do I check if the Kendo ComboBox is "dirty" i.e. currently has a value other than "Original_Brand_Value"? Seems like I should be able to do something like:
j$("#combo1").data("kendoComboBox").isChanged()
**OR**
j$("#combo1").data("kendoComboBox").dataSource.isChanged()
But I have searched far and wide and there seems to be no such method. There has to be some way to do this, this must be a common use case.
As you have concluded, the kendoComboBox widget itself does not track whether it has been changed state. The datasource does have a hasChanges() method but making a selection does not change the datasource, it just gets a different value from it. However the kendoComboBox does raise events that you can use, for example 'select' that is fired when the user makes a selection: http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-select
For example you could add this to your comboBox configuration:
select: function(e) {
var item = e.item; //jQuery object representing the selection
isDirty = true; //Set a flag or call a function as required. Perhaps check the item as well to make sure it isn't the default value.
}
Alternatively there is also a method called 'select' that can be used to get or set the selected item. You can use this to get the selected index (if it is not zero, then the comboBox has a non-default selection):
var selectedIndex = j$("#combo1").data("kendoComboBox").select();
This isn't the only way. If you were to use MVVM declarative syntax with the comboBox bound to a property on a kendo.Data.Model (which is observable), any changes will automatically set the dirty flag on that model: http://docs.telerik.com/kendo-ui/api/javascript/data/model#fields-dirty
MVVM is a very powerful design pattern to use with kendo but I think going into more detail is outside the scope of what you're asking.
You can use the value() method to check the current widget value and compare it to the initial value, but probably this approach is not appropriate, as it is too obvious.
http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#methods-value
Another possible option is to subscribe to the change event of the widget and raise a custom dirty flag in a JavaScript variable. You could even set an expando on the ComboBox widget object.
http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-change
On a side note, the ComboBox is an input widget that should hold and submit a form value. That's why it should be created from an input or select element, not from a div.

Dynamically how to make checkbox check/uncheck in angularjs controller using ng-click

I am new to Angular JS. When the user check/uncheck on a check box, I am calling a function in a controller using ng-click. I am passing $event to the function in controller. Using the $event, I am able to get the srcElement inside the controller function. Now I would like to set the previous check/uncheck value to the check box based on certain conditions.
$scope.isAccessChanged = function(event){
if (some condition) {
var elem = angular.element(event.srcElement);
/** here how to set the elem value back to whatever it was before.*/
}
};
Lets say you have check box like
<input ng-model="form.isSelected" type="checkbox">
All you need to do is:
$scope.form.isSelected = !$scope.form.isSelected;
Avoid DOM manipulation and limit jQuery use as much as possible in angular.
I recommend using jQuery only in directives to make it less of an available option.
Try this out:
<input type="checkbox" ng-model="foShizzle" ng-click="isAccessChanged()"/>
$scope.isAccessChanged = function(event){
if(some condition){
$scope.foShizzle = !$scope.foShizzle; // This will reverse the user's decision
}
}

knockout apply binding to dynamically loaded html from ajax mvc contrib grid

I have an AJAX MVC Contrib Grid implementation, that already existed and now I am in a situation where I am trying to bolt on some knockout functionality... and I want to know if this is possible without changing the whole grid implementation.
This is the refresh grid function that is setting the container html when the pagination changes.
scope.refreshGrid = function (container, url) {
if (url)
container.data(scope.selectors.actionUrlAttribute, url);
$.post((url || container.data(scope.selectors.actionUrlAttribute)), scope.getParams(),
function(html) {
container.html($(html).html());
scope.bindDeleteButtons();
}).done(function() {
container.trigger("refresh.ctb.grid");
});
}
one of the columns for the grid is custom column that uses Html.Partial like this:
column.Custom(x => Html.Partial("_CartSelection", new CartSelection(x.Id)));
The partial view has the below markup with some knockout data bindings
<input type="checkbox" value="#Model.Id" data-bind="enable: (selectionEnabled() || $element.checked), checked: selectionIds" />
This works for the first page of results, when the paging is selected to change the page and the container html() is updated the bindings no longer work but the KO viewModel still has the correct selectionIds.. which is what I was expecting to happen.
The KO view model is being applied as shown below, where the grid has a wrapper parent div with an id of "cart":
$(function() {
var viewModel = new IP.Configuration.CartSelector(new IP.Router());
ko.applyBindings(viewModel, document.getElementById("cart"));
});
I have already seen comments in other posts about how you shouldn't re-apply bindings. In my case it seems I want to apply bindings but only to some child nodes that are being dynamically loaded.
Is this possible?
UPDATE:
Almost had this working by adding a cart-selection class to each checkbox and doing the below in a rebind function on the viewModel, where self is the viewModel:
$("#cart .cart-selection").each(function(index, item) {
ko.applyBindings(self, item);
});
Then doing the below on the custom trigger for refreshing the grid, when the content is reloaded.
$("#cartGrid").on("refresh.ctb.grid", function() {
viewModel.rebind();
});
The issue I am finding with this at the moment is that the checkboxes are no longer enabled regardless of the $element.checked binding.. maybe a valueHasMutated will fix this, still looking into this.
I figured out what my remaining problem was, it was due to the ordering of the data bindings.
The enable data bind needed to be placed after the checked binding since it has a dependency on it via $element.checked which makes sense now after realising it!!
I changed my rebind function slightly to the below:
var gridResult = $("#cartGrid table");
if (gridResult.length > 0)
ko.applyBindings(this, gridResult[0]);
Each refresh brings in a new table but at least now if I add any more bindings to other elements in the results from the grid, they will work as expected.

Knockout JS: Working with old validation code that changes the DOM

See edit at the bottom.
My company has a huge code base and we want to start using knockout more effectively. However, we have validation code in place already that takes care of all aspects of client-side validation. It uses jQuery to show validation error messages and to sanitize user input.
For example, if I add the class "validate-range" to an input, it will use jQuery change/focusout events to track changes and then if a value is out of the range, it will replace it with the min/max value using $(input).val(). Since this validation code makes changes this way programmatically, my knockout view model won't be updated when these kind of changes are made.
This validation code is used everywhere in the system, and can't be replaced at the moment, so in order to use knockout, I have to make it work along side this code. What i've tried so far is creating a custom value binding that adds an additional change event handler which is used to update the view model whenever the validation code changes an input's value.
This works surprisingly well in all cases except inside a foreach binding (which is the same as using the template/with binding I would imagine). My change event handler isn't being fired on any inputs inside the foreach that use the custom value binding, even though the custom binding is being reapplied to all inputs inside the foreach every time the observable array changes.
I was hoping someone has dealt with this problem before, having to make knockout work with existing javascript code that changes DOM values, and thus doesn't update the view model. Any help is greatly appreciated.
Javascript code for custom binding, creating view model, and old validation code:
// custom value binding for amounts
ko.bindingHandlers.amountValue = {
init: function (element, valueAccessor) {
var underlyingObservable = valueAccessor(),
interceptor = ko.computed({
read: function () {
var value = underlyingObservable();
return formatAmount(value);
},
write: function (newValue) {
var current = underlyingObservable(),
valueToWrite = parseAmount(newValue);
if (valueToWrite !== current)
underlyingObservable(valueToWrite);
else if (newValue !== current.toString())
underlyingObservable.valueHasMutated();
}
});
// i apply a change event handler when applying the bindings which calls the write function of the interceptor.
// the intention is to have the change handler be called anytime the old validation code changes an input box's value via
// $(input).val("new value"); In the case of the foreach binding, whenever the observable array changes, and the table rows
// are re-rendered, this code does get ran when re-applying the bindings, however the change handler doesn't get called when values are changed.
ko.applyBindingsToNode(element, { value: interceptor, event: { change: function () { interceptor($(element).val()); } } });
}
};
// view model creation
// auto create ko view model from json sent from server
$(function () {
viewModel = ko.mapping.fromJS(jsonModel);
ko.applyBindings(viewModel);
});
// old validation code
$(document).on("focusout", ".validate-range", function () {
var $element = $(this),
val = $element.val(),
min = $element.attr("data-val-range-min"),
max = $element.attr("data-val-range-max");
if (val < min)
// my change handler from custom binding doesn't fire after this to update view model
$element.val(min);
if (val > max)
// my change handler from custom binding doesn't fire after this to update view model
$element.val(max);
// more code to show error message
});
HTML code that uses the custom binding inside of a foreach binding:
<table>
<thead>
<tr>
<td>Payment Amount</td>
</tr>
</thead>
<tbody data-bind="foreach: Payments">
<tr>
<td><input type="text" class="validate-range" data-val-range-min="0" data-val-range-max="9999999" data-bind="amountValue: Amount" /></td>
</tr>
</tbody>
</table>
So in the above example, if I enter "-155" in an amount text box, my custom binding runs and sets the view model Amount to -155. Then the old validation runs and re-sets the value of the textbox to "0" with $(input).val(0). My view model doesn't get updated at this point, and still reflects the -155 value. My change event handler from the custom binding is supposed to be ran to update the view model to 0, but it doesn't.
Edit:
As pointed out in the answer, .val() does not trigger any change events. The change event handler I added didn't do anything. The reason the view model was being updated when the validation code changed a value outside of the foreach binding was because we had logic somewhere else in our javascript code that was manually triggering the change event using the blur event, which in turn triggered my custom binding to run and update the view model. This blur event handler was directly bound to the text boxes, instead of being delegated, so it worked for text boxes that were there when the page is first rendered, but not for the ones dynamically inserted by the foreach binding.
For now, I just changed this logic to delegate the events within the document, so it would include dynamically inserted text boxes, and it seems to be working fine. I'm hoping to come up with a better solution in the future.
Calling $(element).val("some value"); does not trigger the change event.
You would need to do: $(element).val("some value").change();

Categories