I have an angular app in this plunker.
When we click on the button, it opens a modal dialog with a list of items. 2 of these items are pre-checked based on the condition in the checkbox table input.
This is the function that pushes and splices:
$scope.toggleCheck = function (course) {
//debugger
var x = $scope.checkplanneddetails(course);
if ($scope.selectedCourses.indexOf(course) === -1){
$scope.selectedCourses.push(course);
$scope.planned += 3;
} else {
$scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
$scope.planned -= 3;
}
$scope.getPercentage();
};
When a course is selected(checked) from this list, it adds 3 to the $scope.planned and also increases the progress bar accordingly. Similarly it also reduces in the same way when a checkbox is unchecked.
But this functionality happens in reverse for the items that are already checked when the modal dialog loads. Where is the code going wrong?
the problem is you're trying to hold state of checkboxes in attitional array. Instead you should only use "ng-" directives (like ng-model, or ng-checked for checkboxes)
http://plnkr.co/edit/Nm9N2zdBZL7IubMCatjz?p=preview
here is my modification:
$scope.toggleCheck = function (course) {
//debugger
if(course.checked){
$scope.planned += 3;
} else {
$scope.planned -= 3;
}
$scope.getPercentage();
};
and also i've changed "ng-clicked" for "ng-changed", because the first one is triggered before actual change of value
Related
I have the following JavaScript code:
var radios = form.elements["option_filter"];
for (var i = 0, max = radios.length; i < max; i++) {
if (typeof (radios[i].value) !== 'undefined') {
radios[i].onclick = function () {
var l = this.nextElementSibling.innerText;
<code to create a path containing selection>
window.location.replace(dest);
}
}
}
which works fine, except that when a radio is clicked, the selection is considered checked in code, but that is not reflected in the UI ... the radio button remains blank as the redirect is processed.
I tried having it sleep a bit between the onclick firing and the redirect, to no avail.
How do I get the UI to reflect the selection change so that the user sees it selected while waiting for the new page to load?
To get the UI to reflect... you'll need to set the value of the target radio button to a value...
radio[i].value = "whatever"
Also remember that the value set must match the name of one of the radio buttons in your options...
I have a list of checkbox, on many pages, when I move from one page to other I need to check if any checkbox is in temporary table, if it is to mark it like checked.
$(document).on('click','.page a',function (){
for (i = 0; i < 20; i++) {
var p = $(this).attr('data-page');
//console.log(p);
x = i + 20 * p;
if (keys.indexOf(x) > -1) {
$(':input[value="'+x+'"]').prop('checked',true);
console.log(x);
}
};
});
After I click on next page (where I clicked before on checkbox) I see checked checkbox_id( in this line console.log(x); ) but they are not checked when I get to the page. The result look like this.
For display I use yii2 gridview between tags Pjax.
When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.
How do I make dat.gui update the checkboxes?
Edit: Here's the current state of the problem.
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
function(value) {console.log('example');} ).listen();
menu['This is an example'] = false;
With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.
I've recently come across the same issue with having to click the checkbox twice to get the proper behavior, so here's what worked for me and will hopefully spare other readers a few minutes of head-scratching:
// the usual
var menu = { "foo":false };
// store this reference somewhere reasonable or just look it up in
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });
// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;
First set up data binding by telling dat.gui to listen to the value you need to bind to by including .listen() after your .add()
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui
.add(menu, 'This is an example')
.listen()
.onFinishChange(
function(value) {
console.log('example');
}
);
Then set your variable that dat.gui is controlling via the checkbox to false.
menu['This is an example'] = false;
Some more info about the details of dat.gui: http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html
I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it.
Here is the JavaScript function:
function tabModifiedHighlight(){
alert("alert");
var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
for(i=0; i<(tabs.length); i++){
selectedTab = tabs[i]+'tab';
if (document.getElementById(selectedTab).className == "selectedtab"){
div = document.getElementById(tabs[i]),
input = div.getElementsByTagName('input'),
selects = div.getElementsByTagName('select');
break;
}
}
highlighted = false;
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].checked == true){
highlighted = true;
}
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
highlighted = true;
}
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
if (selects[selectIndex].value != ""){
highlighted = true;
}
}
if (highlighted == true){
document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}
}
And here is the input that is calling it:
<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />
This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.
I hope I made this clear, and any thoughts are appreciated!
As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.
onClick if checkbox you are calling these 3 methods
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
Note tabModifiedHighlight is last one..
if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.
I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...
It will help you find which one is actually failing then you can add that code here and we will be able to help you further
I've got a page with bunch of drop downs and each drop down has a button next to it. When the page initially loads I want all the buttons to be disabled and if there is a change to a specific drop down then its corresponding button shall be enabled.
I've got the following code down for this but I need to know how to loop through all the drop downs and buttons so I can generalize it.
$(document).ready(function () {
//disable all buttons
function disableAllButtons () {
$(':input[type=button]').attr("disabled", "true");
}
disableAllButtons();
//enable button when drop down changes
$(':input[name=sNewPKvalue1]').focus(function() {
disableAllButtons();
$(':input[name=Update0]').removeAttr("disabled");
})
//enable button when drop down changes
$(':input[name=sNewPKvalue2]').focus(function() {
disableAllButtons();
$(':input[name=Update1]').removeAttr("disabled");
})
////.....question?
});
Question
If I have 12 dropdowns and 12 buttons
How do I loop through all the drop downs with name sNewPKvalue[1-12] and all the buttons with name Update[0-11]
I would not recommend a loop. Just use a selector that selects the elements you want and perform the appropriate action. My first thought is to assign a CSS class to the buttons and drop down lists you are talking about. Then you can simply do something like this:
$('.dropDown').focus(function(){
$(".ddlButton").attr("disabled", "true");
$(this).closest('.ddlButton').removeAttr("disabled");
});
I would do something like:
$.each([1, 12], function(index, value) {
var valmin = val - 1;
$(':input[name=sNewPKvalue'+value+']').focus(function() {
disableAllButtons();
$(':input[name=Update'+valmin+']').removeAttr("disabled");
})
});
I didn't test this one, but you should get the idea ;)
You can do it that way.
for (var i = 0; i < 12; i++)
{
$(':input[name=sNewPKvalue'+(i+1)+']').focus(function() {
disableAllButtons();
$(':input[name=Update'+i+']').removeAttr("disabled");
})
}
Or
$(':input[name^=sNewPKvalue]').focus(function() {
disableAllButtons();
$(':input[name=Update'+(Number(this.name.match(/[0-9]+/))-1)+']').removeAttr("disabled");
})
What you could do is to make a for loop.
for(var i = 1; i <= 12; i++) {
$("select[name='sNewPKvalue"+i+"']").doSomething();
}
for(var i = 1; i <= 11; i++) {
$(":button[name='Update"+i+"']").doSomething();
}