We Keep Coding

I want to remove redundant code and move in to a separate Jquery function

Here is the code I am trying to remove the redundant code and move the code to separate function.
//Adding Infotypes to filter and checks whether any infotype option is selected
if(this.$infoOptions.val() != null){
var infotypelength = this.$infoOptions.val().length;
var l=0,j;
//Condition to check empty input type
if( infotypelength > 0){
var infotypeList = this.$infoOptions.val();
for(j = 0; j < infotypelength; j++) {
//It checks whether already option is selected and prevents adding to filter if its duplicate.
if(($.inArray( $('#infoOptions').select2('data')[j].text, filterList)) == -1 ){
this.filter.push($('#infoOptions').select2('data')[j].text);
if(infotypeList[j].contains('_subgroup')){
var res = infotypeList[j].split("_");
this.aSubinfotype[l]=res[0];
l=l+1;
}
else
this.aInfotypes.push(infotypeList[j]);
}
}
}
}
//Adding Countries to filter
if(this.$countryOptions.val() != null){
var geoLength = this.$countryOptions.val().length;
//Condition to check empty input type
if( geoLength > 0){
var geoList = this.$countryOptions.val();
var l=0;
for(var j = 0; j < geoLength; j++) {
if(($.inArray( $('#countryOptions').select2('data')[j].text, filterList)) == -1 ){
this.filter.push($('#countryOptions').select2('data')[j].text);
if(geoList[j].contains('_subgroup')){
var res = geoList[j].split("_");
this.aSubgeotype[l]=res[0];
l=l+1;
}
else
this.aGeography.push(geoList[j]);
}
}
}
}
But I am facing problem in passing the variable and cached selectors in to other function. Can anyone help me with this?

I don't know how is done your implementation but I really think that you can improve it, by the way, you can reduce your code in two way bit different :
var myFunction = function(option, filter, array, selector, subType) {
if(option && option.val()){
var optList = option.val();
var optLength = optList.length;
//Condition to check empty input type
if( optLength > 0) {
var l = 0;
for(var j = 0; j < optLength; j++) {
if( ($.inArray( selector.select2('data')[j].text, filterList)) == -1 ){
filter.push(selector.select2('data')[j].text);
if(optList[j].contains('_subgroup')){
var res = optList[j].split("_");
subType[l]=res[0];
l=l+1;
} else {
array.push(optList[j]);
}
}
}
}
}
}
call : myFunction(this.$countryOptions, this.filter, this.aGeography, $('#countryOptions'), this.aSubgeotype)
// data = {option, filter, array, selector, subType}
var myFunction = function(data) {
if(data.option && data.option.val()){
var optList = data.option.val();
var optLength = optList.length;
//Condition to check empty input type
if( optLength > 0) {
var l = 0;
for(var j = 0; j < optLength; j++) {
if( ($.inArray( data.selector.select2('data')[j].text, filterList)) == -1 ){
data.filter.push(data.selector.select2('data')[j].text);
if(optList[j].contains('_subgroup')){
var res = optList[j].split("_");
data.subType[l]=res[0];
l=l+1;
} else {
data.array.push(optList[j]);
}
}
}
}
}
}
call :
myFunction({
option: this.$countryOptions,
filter: this.filter,
array: this.aGeography,
selector: $('#countryOptions'),
subType: this.aSubgeotype
});
or
var data = {
option: this.$countryOptions,
filter: this.filter,
array: this.aGeography,
selector: $('#countryOptions'),
subType: this.aSubgeotype
}
myFunction(data);
The first way is to pass your data one by one, the second you pass your data into an json object.

Javascript to show any/all query values in the URL

I am working on a document list with a filter menu to pair down the listing via query strings. I want to display all current query values in a designated div, which I have working. The problem that I have now is that I have each category individually coded in the JS, which causes an "undefined" value to display if there is no query for that category.
I want to display ONLY the values that are represented in the query. I have been trying to create an array, but my JS is spotty at best and this has been kludged-together from multiple sources.
Any suggestions?
Here is my current js:
function getQueryVariable(variable)
{
try{
q = location.search.substring(1);
v = q.split("&");
for( var i = 0; i < v.length; i++ ){
p = v[i].split("=");
if( p[0] == variable ){
if( p[1].indexOf('_') != -1 ){
n = [];
for( var j = 0; j < p[1].split('_').length; j++ ){
n.push(p[1].split('_')[j]);
}
str = "";
for( var k = 0; k < n.length; k++ ){
str += n[k] + ' ';
}
return str.trim();
}
else{
return p[1];
}
}
}
}
catch (e){
console.log(e);
}
}
if(document.location.search.length) {
// query string exists
$p( "div#filterContainer" ).html(
"<div class='litType'><ul class='ct-list'><li class='ct-list-elem'>"
+getQueryVariable('application')
+"</li>"+
"<li class='ct-list-elem'>"
+getQueryVariable('year')
+"</li>"+
"<li class='ct-list-elem'>"
+getQueryVariable('industry')+
"</li>"+
"<li class='ct-list-elem'>"
+getQueryVariable('literature_type')
+
"</li></ul></div>" );
} else {
// no query string exists
$p( "div#filterContainer" ).html(
"No filters are being applied." );
}

Output object values in javascript

I have an ObjectHtmlInputElement:
for($array as $a){
echo '<input type="checkbox" name="check[]" value="'.$a.'">';
}
Javascript:
function myForm(){
var theForm=document.getElementById("myCheck");
var a = theForm.elements['check[]'];
for( var i=0; i<a.length; i++){
if(a[i].checked){
alert( a[i].value );
return true;
}
}
}
This script checks if atleast one checkbox is checked then return true(there can also be more checkboxeses checked).What i need is to output in the alert() , each checkbox that have been checked(each object value that passes 'a[i].checked'). a[i].value , outputs only the first value, so i need something else.
Based on 'dec' and 'vijay' s answer i managed to find a solution:
var checkedCheckboxes="";
for( var i=0; i<a.length; i++){
if(a[i].checked){
checkedCheckboxes += a[i].value;
}
}
for( var i=0; i<a.length; i++){
if(a[i].checked){
alert('Checked: ' + checkedCheckboxes);
return true;
}
}
Indeed the loop was stopped because of return true as dec said.And the solution was to make another loop,and insert all values in a variable so i can use it in the alert.

The first value seems to match a[i].checked and then you return and no other element is tested. So remove return true.

Try this:
function myForm() {
var theForm = document.getElementById("myCheck");
var a = theForm.elements['check[]'];
var checkedCheckboxes = "";
for (var i = 0; i < a.length; i++) {
if (a[i].checked) {
checkedCheckboxes += a[i].value + ", ";
}
}
if (checkedCheckboxes.length > 0) alert(checkedCheckboxes);
return checkedCheckboxes.length > 0;
}
http://jsfiddle.net/p5upLprk/1/

with jquery you can do:
function isThereAtLeastOneCheckActive() {
var res = false
$(':checkbox').each(function() {
if (this.checked) {
res = true
alert(this.val())
// .text() can also be used
}
})
return res
}
As you are beggining, maybe you find strange the absense of ;
There is no need for them in js: https://mislav.net/2010/05/semicolons/

Set value jquery work in trace but doesn't work without trace

I have set filter in Kendo grid but i have a problem when filter applied to grid, i missed value of my filter row.
After filter i missed my filter :
Now for this reason, i set my filter row again so bellow code :
function updateSearchFilters(grid, field, operator, value)
{
var newFilter = { field: field, operator: operator, value: value };
var dataSource = grid.dataSource;
var filters = null;
if ( dataSource.filter() != null)
{
filters = dataSource.filter().filters;
}
if ( filters == null )
{
filters = [newFilter];
}
else
{
var isNew = true;
var index = 0;
for(index=0; index < filters.length; index++)
{
if (filters[index].field == field)
{
isNew = false;
break;
}
}
if ( isNew)
{
filters.push(newFilter);
}
else
{
//alert(value);
if(value == '')
filters.splice(index,1);
//delete filters[index];
else
filters[index] = newFilter;
}
}
dataSource.filter(filters);
for (var i = 0; i < filters.length; i++) {
$('#gridId-filter-column-' + filters[i].field.toString()).val(filters[i].value.toString());
}
}
When i set the break point in this line $('#gridId-filter-column-' + filters[i].field.toString()).val(filters[i].value.toString()); it worked correct but
when i remove break point this line doesn't work.

you can set delay before run this line :
for (var i = 0; i < filters.length; i++) { $('#gridId-filter-column-' +filters[i].field.toString()).val(filters[i].value.toString()); }

Display the value on click of check box in an array

I have an array of 10 checkboxes. onclick of checkbox i want to get the value of that particular checkbox. That I am able to achieve using my code.When I click in serial order it is working fine. When I click on checkbox 5 after clicking on checkbox 7 the value of checkbox 5 ie..5 is getting added befor 7. I dont want in that order. I want the values to displayed in whatever order I click. My js file is as follows
var selected = new Array();
$(document).ready(function(){
checkBoxTest();
});
function checkBoxTest() {
alert("checkbox test");
for(i = 0; i < 10; i++){
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' +i+' "/><td></tr>');
test();
}
}
function test() {
$('#catalog_table input:checkbox').change(function() {
var emails = [];
$('#catalog_table input:checkbox:checked').each(function() {
emails.push($(this).val());
});
var textField = document.getElementById("root");
textField.value = emails;
});
}
My HTML code is something like this
<table id="catalog_table"> </table>
<textarea id="root"></textarea>
Can any one please tell me how to do this?
Demo

Its messy, but it works:
http://jsfiddle.net/za7m8/1/
var selected = new Array();
$(document).ready(function(){
$("input[type='checkbox']").on('change', function() {
// check if we are adding, or removing a selected item
if ($(this).is(":checked")) {
selected.push($(this).val());
} else {
for(var i = 0; i<selected.length;i++) {
if (selected[i] == $(this).val()) {
// remove the item from the array
selected.splice(i, 1);
}
}
}
// output selected
var output = "";
for (var o = 0; o<selected.length; o++) {
if (output.length) {
output += ", " + selected[o];
} else {
output += selected[o];
}
}
$("#root").val(output);
});
});

You just have to change your javascript like this.
var selected = new Array();
$(document).ready(function(){
checkBoxTest();
});
function checkBoxTest() {
alert("checkbox test");
for(i = 0; i < 10; i++){
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' +i+' "/><td></tr>');
test();
}
}
var emails = [];
function test() {
$('#catalog_table input:checkbox').change(function() {
if (this.checked)
{
if ( emails.indexOf( $(this).val() ) === -1 )
{
emails.push($(this).val());
}
} else
{
if ( emails.indexOf( $(this).val() ) !== -1 )
{
var index = emails.indexOf( $(this).val() );
emails.splice(index, 1);
}
}
var textField = document.getElementById("root");
textField.value = emails;
});
}

You need to clear up your code a bit, like this:
I assume that unchecking removes the value from the array, and checking adds.
var selected = new Array(); // What for is this here ?
$(document).ready(function () {
checkBoxTest();
});
function checkBoxTest() {
for (i = 0; i < 10; i++) {
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' + i + ' "/><td></tr>');
}
test();
}
function test() {
var emails = [],
textField = document.getElementById("root");
$('#catalog_table input:checkbox').change(function () {
var val = $(this).val();
// if you don't want removal of values on `uncheck`, comment out everything below excluding `emails.push(val)` and the last line
if(this.checked){ // if checked
emails.push(val); // add it
}else{
emails.splice(emails.indexOf(val), 1); // remove it if not checked
}
textField.value = emails; // set the value
});
}
DEMO