Counter counting 1 higher than expected value in jQuery.each() - javascript

I have this function that iterates over all checkboxes in a table and checks them. I also made a counter that will count the number of rows checked. Interestingly, the counter always returns one higher than my expected value. The counter is initialized as 0, so I expect it to increment for every checkbox but something else seems to be going on. Anyone know why this is?
var counter=0;
$('#checkAll').click(function (event){
$(':checkbox').each(function(){
this.checked=true
counter+=1
});
});
Minimal reproducible example: https://codepen.io/enyu0510/pen/eYrEgJe

You have four checkboxes on this page including the select all checkbox - that’s why this is happening. You will need to be more specific and target only the list item checkboxes. One way to do this would be to name the checkboxes you want to count like name=list-checkbox For example - And then target those checkboxes like like $(“[name=list-checkbox]”)

Updating answer to this question because OP update it with the example of the code that is not working
Updated answer
Reason why you are getting value higher than expected is because you have 4 checkboxes in that example. You have to target checkbox list/group in a more specific way (e.g. by their name) because with $(':checkbox') you are counting all checkboxes on the page
Old asnwer
Above code looks fine. Working as expected https://jsfiddle.net/vwxcap9o/.
Make sure to check that there isn't any other checkbox on that page, maybe that's the reason why you are receiving wrong number. Also, try to target that checkbox group in different way than $(':checkbox').

Related

angular grid selected checkbox scroll issue

I have a column with a celltemplate of checkbox. It can be selected/unselected, which works fine as correct events are fired everytime. However, when I select multiple checkboxes on the grid and start scrolling up and down, the checkboxes seem to be scrolling as well. That means that they are not fixed to the rows they are checked against, and get lined up against a wrong row.
This issue has already been reported here a couple of years ago. But the solution posted, does not solve the problem.
Here is a plunker link to demonstrate the issue. Anyone had any similar issue or a workaround to this?
You are not binding the checkboxvalue to your dataset. Thanks to your provided Plunker I can provide an updated Version that works.
The ng-model is bound to the gridscope and has a private scope for each row, so its fine to use somethnig generic
ng-model="foo" ng-change="row.entity.active = foo"
You can use active == 1 but I used true/false for convenience
ng-checked="row.entity.active" //since foo becomes true or false on click
If you want more complex checks, you can use their appScopeProvider.

Cloned checkbox "checked" property undefined

I have a series of checkboxes for each day of the week with an "All" checkbox to check/uncheck all days. My use case requires multiple sets of these checkboxes, and as I'm creating them dynamically, I used the jQuery.clone() function to duplicate the set and add them to a new row; however the cloned checkboxes do not work correctly. The OnClick event fires; but for whatever reason, I can't access the 'checked' property on any of the cloned checkboxes in Chrome. I have tried the following methods (using the All checkbox as an example):
$('input[name="all"]:last').prop('checked')
$('input[name="all"]:last')[0].checked
$('input[name="all"]:last').attr('checked')
All return undefined. The only method I have found that actually returns anything with regards to the checked state is:
$('input[name="all"]:last').is(':checked')
I have the bug replicated here: http://jsfiddle.net/YfY5U/
Really hoping someone has some idea of what's going on, because I'm totally stuck :(
In this part of code:
var new_content = $('.initial').clone()
.removeClass('initial')
.find(':checkbox').each(function(){
$(this).removeProp('checked');
}).end().appendTo('fieldset');
You are removing property "checked" after cloning. So no surprised that it is undefined.
Just change
$(this).removeProp('checked');
to
$(this).prop('checked', false)

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

Dynamics using section to manage fields

I have a tab, containing a section which a large number (20+) of fields occupy. They are all checkboxes, one of which is a "N/A" choice. Can anyone suggest a simple way of writing javascript that will ensure at least one choice is made, or if not, only let the user continue past this section if N/A is ticked. I'm trying to avoid checking the value in each and every checkbox. Any suggestions?
Thanks
From a user interface standpoint, you could split that section into two sections (without header label so it looks like one section). The first would have the N/A checkbox, and if checked the Javascript would simply hide the section with all the other checkboxes.
If you actually want to check values, you should still be able to use the same concept, but use jQuery to find all checkboxes in that section with all the normal checkboxes. If none of them are checked, you could stop a Save with an error message if N/A is also not checked.
I think this is just a case of using some of the existing functions in the Xrm.Page object, there are a couple for working with lots of attributes at once. Regardless of how you do it you will have to check every field, but you can do it in quite a succinct way.
I would suggesting adding an OnSave event, with code that does something like this:
//we want to make sure that at least one of these is populated
//new_na is the na field
//the others are the possible choices
var requiredFields = ["new_na", "new_field1", "new_field2", "new_field3"];
//this loops through every attribute on the page
Xrm.Page.data.entity.attributes.forEach(function (attribute, index) {
//this will track if at least one field was set
bool atLeastOneSet = false;
//see if the requiredFields array contains this field
if (requiredFields.indexOf(attribute.getName()) != -1) {
//if it is required, check the value
if(attribute.getValue()) {
//if it set update the bool flag
atLeastOneSet = true;
}
}
//finished processing all fields, if atLeastOneSet is false no field has been set
if(!atLeastOneSet) {
//If this code is used in an on save event this will prevent the save
Xrm.Page.context.getEventArgs().preventDefault();
//Give the user some message
alert("At least one field must be populated");
}
});
Untested code, but should hopefully give you a good idea of how to progress.

How to retrieve a number of visible divs on a page and displaying a count

I have approximately 1000 divs called "itemcontainer" on the page.
I also have a number of checkboxes which allow me to filter these items.
I would like to display "# of returned results" at the top of the page. The "#" being the actual number of divs returned.
Currently I have:
var divCount = $('.item-container:visible').length;
$('.header').append(contactCount);
When clicking a filter, it displays the visible results. However, if I uncheck a filter, or check another, it shows the visible item account in additional to the previous result.
For example. There's 1000 items. I click a checkbox. It displays 604 at the top of the page. I uncheck the checkbox and it'll display 6041000.
Any help on this would be greatly appreciated.
Thanks all.
$('.header').text(contactCount);
Should do the trick. See the jQuery docs for more details.
Thats because you use the append function. It does append what you give to it to the DOM. I recommend specifying a span and than use the html function to set the content of that span.
var divCount = $('.item-container:visible').length;
$('#counter').html(divCount);

Categories

Resources