I'm trying to filter a table with some filters. Some are simple selects, and others are multiples. For the simple ones, that's ok, but not the multiple.
I want to follow this logic :
Passing through the array which contains the filter (filtre_transports)
Passing through the array which contains the value(s) (ligne_transports)
If an element of the 1. isn't in the 2. so not display the line (transports_matches = false)
I made this code :
// Pass through each line of the table
jQuery('#agents_liste tbody tr').not('.vide').each(function() {
var transports_matches = true;
// ligne_transports is an array contains values to compare with the filter
var ligne_transports = jQuery(this).children('td').eq(2).text().split('###');
// filtre_transports is an array contains the selected val of a multi select
jQuery(filtre_transports).each(function() {
var filtre = jQuery(this);
var filtreOk = false;
jQuery(ligne_transports).each(function() {
if (filtre == jQuery(this)) {
filtreOk = true;
return false;
}
});
if (!filtreOk) {
transports_matches = false;
return false;
}
});
});
The problem : When we have filters selected, the result transports_matches is always false.
Btw, I saw this post where the answer is to use classes, but is there a way without them ?
EDIT : You can see the JSFiddle here.
Thanks
Fixed: http://jsfiddle.net/r4mfv/2/
You had a couple of issues:
$(filtre_transports).each is not the way to iterate over an array, you should use $.each(filtre_transports, function() {...}).
You should cast filtre and this to String before comparing them.
Related
On my page with payment I need two inputs with total payment value:
- one that the client can see
- another one which is hidden.
I wrote a code which pass price of every element to the input when a client check a box with a product they want to pay for, but it works only with the one input.
I was trying to use different options (like getElementsByName and getElementsByClassName) but I am learning JS now and I have no idea how to solve this problem. :(
function select(selector, parent){
return Array.from((parent||document).querySelectorAll(selector));
}
var inputs = select('.sum'),
**totalElement = document.getElementById('payment-total');**
function sumUpdate(){
totalElement.value = inputs.reduce(function(result, input){
return result + (input.checked ? parseFloat(input.value) : 0);
}, 0).toFixed(0);
}
WHAT I TRIED:
var inputs = select('.sum'),
**totalElement = document.getElementsByName('payment-total')[0][1];**
var inputs = select('.sum'),
**totalElement = document.getElementsByName('payment-total, payment-total2')[0][1];**
var inputs = select('.sum'),
**totalElement = document.getElementsByName('payment-total).getElementsByName('payment-totalTwo);**
If I'm understanding you right, you want to put the computed value in both the id="payment-total" element and the id="payment-total2" element.
If so, just do what you've already done for payment-total, but for payment-total2 as well, see *** comments:
var inputs = select('.sum'),
totalElement = document.getElementById('payment-total'),
totalElement2 = document.getElementById('payment-total2'); // ***
function sumUpdate(){
//vvvvvvvvvvvvvvvvvvvvvv---- ***
totalElement2.value = totalElement.value = inputs.reduce(function(result, input){
return result + (input.checked ? parseFloat(input.value) : 0);
}, 0).toFixed(0);
}
I don't immediately see the reason for having both a visible and a hidden input, but if you need that for some reason, that's how you'd do it.
If it got to the point there were three or more elements you wanted to update, I'd probably give them all a class and select them the way you've selected your .sum elements, then compute the total once and assign it to all of them in a loop. But for just two, repeating the lookup and assignment seems fine.
I'm using the DataTables jQuery plugin.
I want to search the table if a term shown in at least one of two specific columns.
The current code below only finds rows where the word "word" is in both columns. I need to find rows where the word is in either of the columns.
$table.DataTable().columns([0,1]).search("word");
I've considered using global search and setting searchable option of other columns to false, but I couldn't find a way to change this option at runtime.
Search all columns
You can use regular expressions when searching a table.
For example, the code below shows search results containing either word Angelica or London in all columns.
var table = $('#example').DataTable();
table
.search('Angelica|London', true, false)
.draw();
See this jsFiddle for code and demonstration.
Search specific columns
To search specific columns you may need to utilize custom search functionality.
The code below shows search results containing either word Angelica or Tokyo in table data values with indexes 0, 1, and 2.
var table = $('#example').DataTable();
var terms = ['Angelica', 'Tokyo'];
// Convert terms to lower case
$.each(terms, function(index, value){
terms[index] = value.toLowerCase();
});
// Enable custom search
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var isFound = false;
$.each(data, function (index, value){
// Evaluate only first three data values
if(index === 0 || index === 1 || index === 2){
// Convert data to lower case
value = value.toLowerCase();
$.each(terms, function(termIndex, termValue){
// If data contains the term
if (value.indexOf(termValue) !== -1) {
isFound = true;
}
return !isFound;
});
}
return !isFound;
});
return isFound;
}
);
// Perform search
table.draw();
// Disable custom search
$.fn.dataTable.ext.search.pop();
See this jsFiddle for code and demonstration.
So here is my jQuery:
var optionsArray = $(".optionInput").map(function() {
return this.value;
}).get();
Currently it gets all of the inputs with the class .optionInput and puts the data into an array, but it also stores blank inputs too. With my site I don't need all the inputs to be filled, but I don't want the function to collect any data from the blank fields. Any help would be much appreciated.
If the function returns null or undefined, no element will be inserted
source: jQuery
var optionsArray = $(".optionInput").map(function() {
return this.value || null;
}).get();
Jsfiddle Demo
I have a number of checkboxes that are generated from a JavaScript API call from a database. I need to be able to pass the values of the checkboxes which are then selected by the user, and sent to the processing page. The issue is that the checkboxes don't have ID's associated with them(or this wouldn't be a problem) They all have the same name, but no ID's.
What is the best way to find which check boxes are selected, and pass their values to the following page?
One way I started was with an array:
var options = ["option1","option2","option3"];
var option 1 = [0];
var option 2 = [1];
var option 3 = [2];
On the processing page, using:
var option1 = getFromRequest('option1') || '';
var option2 = getFromRequest('option2') || '';
var option3 = getFromRequest('option3') || '';
Is there a better way of doing this?
I've changed the implementation to the following:
var values = []
$("input:checkbox.subIndustry").each(function(){
values.push(this.value);
});
passing the values to the success page with
window.location.href = REGISTER_SUCCESS +'&values='values.join(",")
which should then get the value with
var variablname = getFromRequest('values') || "";
This is returning Undefined. Any help?
An easy way to select them would be something like $("input[type=checkbox]:checked")
However, if you wanted to keep up with them as they are checked, even if they are added after you load, you could create a variable, then asign a delegation to the "change" state of each input that is a checkbox and update this variable on each change.
It's as simple as:
var checked, checkedValues = new Array();
$(function() {
$(document).on("change", "input[type=checkbox]", function(e) {
checked = $("input[type=checkbox]:checked");
// if you wanted to get an array of values of the checked elements
checkedValues = checked.map(function(i) { return $(this).val() }).get();
// make a string of the values as simple as joining an array!
var str = checkedValues.join(); // would return something like: value1,value2,ext...
});
})
Working Example
Since all your checkboxes have the same name, you can retrieve the checked ones using a variation of:
var checked = $('input[name=ckboxname]:checked');
see: :checked selector for more information
you can simply get the values of checked checkboxes by using
$('input[name=checkboxname]:checked').val();
this will give you the value of checkbox which is checked and for all values simply use
each function of jquery.
Turns out, the answer was to utilize indexOf in the underscore.js library. The solution had to be applied in the API being used to send data.
(_.indexOf(values, '9') != -1 ? 1 : '0'),
I'm using Feedburner to show feeds. sometimes the feeds have the same title. In situations where this is the case I would like to show only the first title and hide all the other titles with the same text. I tried this: JsFiddle
No luck. I can refer to them as 'a' but I don't understand how to distinguish them from one another.
Try starting with all links showing and this javascript:
$(function() {
var $feeds = $(".feedburnerFeedBlock li a");
$feeds.each(function(i) {
var $that = $(this);
$feeds.each(function(j) {
var $this = $(this);
if (j <= i) {
return true;//continue
};
if ($this.text() == $that.text()) {
$this.hide();
}
});
});
});
DEMO
Instead of using the filter function you could use an object to collect all the feed titles with their jQuery elements. The object will behave just like a HashMap in Java since objects can't contain duplicate keys - so duplicate feed titles are eliminated automatically.
var unique = { };
// Reverse elements to keep first occurence of feed title (and not the last one)
$($(".feedburnerFeedBlock li").get().reverse()).each(function(){
// Use feed title as key and jQuery element as value
unique[$(this).find("a").text()] = $(this);
}).hide();
// Show all unique elements
for (title in unique) {
unique[title].show();
}
JSFiddle: http://jsfiddle.net/Aletheios/9GKBH/1/
Besides, your code doesn't work because of several reasons. Amongst others jQuery's .html() function only returns the HTML string of the first element in the set (see documentation).