So if a user wants to check a checkbox, it will prompt a dialog if he/she have rights to tick-untick. So when he don't have rights, the state will stay the same.
I am using angularjs with kendo treeview.
$scope.options = {
checkboxes: {
checkChildren: true,
},
loadOnDemand: false,
check: onCheck,
dataSource: $scope.treeData,
template: '{{ dataItem.text}}',
schema: {
model: {
children: "List"
}
}
function onCheck(e) {
var currentItem = e.sender.dataItem(e.node);
console.log(currentItem.rights);
//if currentItem.rights= '0001'
//dataItem.checked = true else false (something like this)
}
Kendo UI's events sometime are very poorly designed. Example here: The check event is prevented but it still perform the change, what doesn't happens in the default JS behaviour. What you can do is a rollback on changes:
if (!window.confirm("Do you have the rights to change this?")) {
window.setTimeout(function (node) {
this.expand(node); // expand() creates the child list if not created yet
$(node).find('input[type="checkbox"]').prop("checked", null);
}.bind(this, e.node));
}
Demo
IKR it is ugly, but I can't figure a better way for doing that. The nice thing is that the checkbox user's clicks, is not a real checkbox, it is a span that somehow internally changes the state of a real hidden checkbox and you can't prevent it's default click behaviour! Maybe somebody in their forums could help with a better solution but I'm not sure about that.
UPDATE
In fact there was a logic error in the snippet. The check event should be:
check: function(e) {
let dataItem = this.dataItem(e.node);
if (!window.confirm("Do you have the rights to change this?")) {
window.setTimeout(function (node, currentState) {
this.expand(node); // Expand created the child list if not created yet
$(node).find('input[type="checkbox"]').prop("checked", (currentState ? "checked" : null));
this.dataItem(node).set("checked", currentState);
}.bind(this, e.node, !dataItem.checked));
}
}
Updated demo.
The bug you've reported was happening because it was changing only the element state and not the DataItem's checked property, so internally the widget was acting wierd. Also, there was another bug that, the cancel action was only changing the checkbox to unchecked state and that was wrong, since the user could be cenceling a checked checkbox, so it state has to be kept checked.
Related
Working on a SPA with Mithril.js (love it!), but having a problem with input checkboxes not behaving correctly when I assign an "onchange" listener to them.
var Widget = {
view: function(vnode) {
return m("div", [
m("input[type=checkbox]", {
id: "cb" + vnode.attrs.id,
checked: Boolean(vnode.attrs.state),
onchange: function(e) {
console.log(
(e.target.checked) ? "ON" : "OFF"
);
}
}),
m("span", vnode.attrs.name)
]);
}
}
The page will initially populate properly, with checkboxes in their correct state (on or off), but when clicking the checkbox... the checkbox element does not switch.
At first, I thought the onchange event was interrupting and blocking the DOM redraw. But, then found that if I removed the "checked: (true|false)" attribute the elements works as expected.
Of course, this is not acceptable. The checkbox state needs to be presented according to it's current on/off state in the database.
I'm unsure if this is weirdness with Mithrils DOM redraw. Or some other strange behavior with HTML checkboxes and Javascript in general.
Here is a sample illustrating the broken behavior.
https://jsfiddle.net/v1aq85kj/14/
Any ideas are appreciated!
changed the "onchange" listener to an "onclick", but still the same.
tried updating checkbox states with javascript after the page load, but seemed clunky and a bad way to address the issue
You are missing out changing the value the checkbox binds to so checked/unchecked will never change.
something like this might help on the way
onchange: function(e) {
vnode.attrs.state = e.target.checked
}
This is a dumb question but I've been all over the Semantic UI site, along with searching here and I haven't found a solution.
The gist is: I have been using the code below with a Semantic dropdown list. It works fine – except that I have a table component through which the user can also make a selection (which triggers a function) – and when they do, I update the Semantic dropdown to reflect the current selection . . . and then the onChange event fires – so a function is running twice when it doesn't need to.
I tried using onSelect but that is apparently not a valid event for a dropdown. I could do some stupid hack to work around this but I'd rather just use a different event. Is there one?
$(function () {
$('#productStates').dropdown({
allowAdditions: true,
allowReselection: true,
placeholder: "Select State",
onChange: function (value, text) {
if (projectData == undefined) return;
loadStateByID(value)
}
})
});
Ok - solved this. Wish the Semantic docs were clearer on event handling.
I was trying to prevent a "loading" function from getting called twice when a user clicked on a table cell and the dropdown was updated to reflect the current selection. I update the dropdown using:
$('#productStates').dropdown('set selected', activeStateID);
The onChange event handler captured all changes and so the "load" event would fire twice. Using action, the event only fires on a user action, not on setting the dropdown state through code.
$('#productStates').dropdown({
allowAdditions: true,
allowReselection: true,
placeholder: "Select State",
action: function (value, text) {
if (projectData == undefined) return;
$(this).dropdown('set selected', value);
loadStateByID(text)
}
})
I know that I can add a click or change listener on a checkbox. The handler changes the disabled propof a button to true when the checkbox is unchecked. That's easy.
But rather than having this be event-driven, is there a way to have this be "state" driven?
If the "state" of the checkbox is unchecked, the "state" of the button will always be disabled. It doesn't matter what kind of event triggers the state change. If the checkbox is in one state, then the button is always in a corresponding state. That's it.
Here's an example of standard event-driven code where a checkout button should be disabled as long as the terms and conditions checkbox is unchecked.
$('input[name="terms-and-conditons"]').change(function(e, tmpl){
if(e.target.checked === true){
$('#checkout-button').prop("disabled", false);
} else {
$('#checkout-button').prop("disabled", true);
};
});
Unfortunately this doesn't take into account initial states, since it requires an event to happen for something else to happen. On page load, if the checkbox is unchecked, the button could still be enabled, unless care is taken to remember to set the initial state of the button to disabled:
// setting the initial state
$('#checkout-button').prop("disabled", true);
$('input[name="terms-and-conditons"]').prop("checked", false);
$('input[name="terms-and-conditons"]').change(function(e, tmpl){
if(e.target.checked === true){
$('#checkout-button').prop("disabled", false);
} else {
$('#checkout-button').prop("disabled", true);
};
});
I'm wondering if there is a way to create a "state listener." No matter what event happens (even if there isn't an event, like a default value on pageload), the button state will always be in lockstep with the checkbox state. It could be changed via a click, space key press, change event, someone just editing the HTML directly in Chrome Console, or it might just initially load in some kind of state. The point is that things just are. And the state of certain things can automatically change with the state of those other things.
You can use trigger to force the event handler to run on page load. You can also change the button state using the checkbox state.
// setting the initial state
$('#checkout-button').prop("disabled", true);
$('input[name="terms-and-conditons"]').on('change', function() {
$('#checkout-button').prop("disabled", !$(this).is(':checked'));
}).trigger('change');
// ^^^^^^^^^^^^^^^^^
Hi dude i thing what you want is the like
i think you need to refer
Publish/Subscribe Pattern or observer pattern
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
this may help you to what you want
and one thing i want to add that Only chorme browser supports the .Observe() Method for detail study for that you could refer
http://www.html5rocks.com/en/tutorials/es7/observe/
hi you want something like this? http://jsfiddle.net/elviz/gg5r92q0/1/
$(document).ready(function(){
var is_click = $("#myCheckbox").is(':checked');
if(is_click == false){
$("#checkout-button").prop('disabled', true);
}else{
$("#checkout-button").prop('disabled', false);
}
$("#myCheckbox").click(function(){
var is_click = $("#myCheckbox").is(':checked')
if(is_click == false){
$("#checkout-button").prop('disabled', true);
}else{
$("#checkout-button").prop('disabled', false);
}
});
});
We have a backbone program which will listen on a checkbox. When user clicks on the checkbox, it will trigger a function, but the problem is that the event.currentTarget.checked is not correct.
Say, there is a template contains a checkbox:
<input type="checkbox" id="show_user" />
It binds to a backbone view, and have such events:
events: {
"click #show_user": "toggle"
},
toggle: function(event) {
this.model.set("show_user", event.currentTarget.checked);
}
So if I clicked the checkbox to select it, I hope event.currentTarget.checked is true. But when we run karma test on Chrome(with debugger), we clearly see that it is false!
If we keep running the debugger line by line, it will be true after a while.
Why it has such behavior? Is there any other stable way to get the checked status of a checkbox?
Update:
I think I'm missing some important information. When I say click on the checkbox, I mean in the jasmine test, I write:
$("#show_user").click()
In this case, the event parameter in the method toggle is too early received that the state of the checkbox itself has not been changed yet. If I put it in a setTimeout with very short time, say:
toggle: function(event) {
setTimeout(function() {
this.model.set("show_user", event.currentTarget.checked);
}, 1);
}
The event.currentTarget.checked will be correct.
Now I changed it to change:
events: {
"change #show_user": "toggle"
}
And in my test, I won't use .click(), instead, I write:
var checkbox = $("#show_user");
checkbox.prop("checked", !checkbox.prop("checked"));
checkbox.change();
to change the state of the checkbox and trigger a change event. Now it's working well!
I've got a base background image and two checkboxes. I need replace the background image (via toggle class) with the correct class depending on which checkbox is selected. If both checkboxes are selected I need it to show the black background.
http://jsfiddle.net/2k96D/6/
$('#ax_lab').change(function () {
if ($('#ax_ov').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_lab');
}
});
$('#ax_ov').change(function () {
if ($('#ax_lab').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_over');
}
});
My fiddle works perfectly when I select and deselect in the same order, however, if I de-select the checkboxes in a different order than the order I selected them in, it doesn't default back to the original class. I know there must be a flaw in my logic, I'm just having trouble finding it. Any thoughts?
You need to be more explicit with the logic. Here's what I did:
$(document).ready(function () {
function updateAxialStatus() {
var axOv = $('#ax_ov').prop('checked'),
axLab = $('#ax_lab').prop('checked');
$('.axial').removeClass('axial_all axial_lab axial_over');
if (axOv && axLab)
$('.axial').addClass('axial_all');
else if (axOv)
$('.axial').addClass('axial_over');
else if (axLab)
$('.axial').addClass('axial_lab');
}
$('#ax_lab, #ax_ov').change(updateAxialStatus);
});
That version just explicitly checks the status of the two checkboxes and updates the class to reflect the status. The same handler can be used for both checkboxes.
Note that old versions of IE may not fire the "change" event for checkboxes until the checkbox loses focus, but you can safely use "click" instead.