Develop Reference

Multiple filter for an especific table

I have this code working for any table.
$(document).ready(function () {
$('.CalendarFilter').click(function () {
var values = [];
$('.filter').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push( {
text: $(this).text(),
colId : colIdx
});
});
});
filter('table > tbody > tr', values);
});
function filter(selector, values) {console.log(values);
$(selector).each(function () {
var sel = $(this);
var tokens = sel.text().trim().split('\n');
var toknesObj = [], i;
for(i=0;i<tokens.length;i++){
toknesObj[i] = {
text:tokens[i].trim(),
found:false
};
}
var show = false;
//console.log(toknesObj);
$.each(values, function (i, val) {
if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
toknesObj[val.colId].found = true;
}
});
console.log(toknesObj);
var count = 0;
$.each(toknesObj, function (i, val) {
if (val.found){
count+=1;
}
});
show = (count === values.length);
show ? sel.show() : sel.hide();
});
}
});
It filters good, the problem I have is with an special table that is not working. I have the ID of the table but I don't know how to implement the code for work exclusively for this table ID. I tried modifying this part filter('#TABLEID > tbody > tr', values); but is nor working.
Goal: modify the code to work only with an specific table (specifically one with ID posts-table-1, see jsfiddle below), because the code, which supposedly works for any table, doesn't work
Here is an example: https://jsfiddle.net/mdomfu/gzLktpmw/3/

Jquery : swap two value and change style

i need to make a script for select a black div by click(go red), and put black div value into a white div value by another click, this is ok but when i try to swap values of two white case, the change do correctly one time, but if i retry to swap two value of white case the values swap correctly but whitout the background color red.
This is my code :
var lastClicked = '';
var lastClicked2 = '';
$(".blackcase").click(function(e) {
var i = 0;
if ($(this).html().length == 0) {
return false;
} else {
e.preventDefault();
$('.blackcase').removeClass('red');
if (lastClicked != this.id) {
$(this).addClass('red');
var currentId = $(this).attr('id');
var currentVal = $(this).html();
$(".whitecase").click(function(e) {
$('.blackcase').removeClass('red');
var currentId2 = $(this).attr('id');
if (i <= 0 && $("#" + currentId2).html().length == 0) {
$("#" + currentId2).html(currentVal);
$("#" + currentId).html("");
i = 1;
}
});
} else {
lastClicked = this.id;
}
}
});
$(".whitecase").click(function(e) {
var j = 0;
if ($(this).html().length == 0) {
return false;
} else {
e.preventDefault();
$('.whitecase').removeClass('red');
if (lastClicked2 != this.id) {
$(this).addClass('red');
var currentId0 = $(this).attr('id');
var currentVal0 = $(this).html();
$(".whitecase").click(function(e) {
e.preventDefault();
var currentId02 = $(this).attr('id');
var currentVal02 = $(this).html();
if (j <= 0 && currentVal0 != currentVal02) {
$('.whitecase').removeClass('red');
$("#" + currentId02).html(currentVal0);
$("#" + currentId0).html(currentVal02);
j = 1;
return false;
}
});
} else {
lastClicked2 = this.id;
}
}
});
This is JSfiddle :
https://jsfiddle.net/12gwq95u/12/
Try to take 12 and put into first white case, put 39 into second white case, click on the white case with 12 (go red) then click on the white case with 39, the values swap correctly with the red color when it's select, but if you try to reswap two whitecase values thats work but without the red color.
Thanks a lot

I have spent some time to rewrite your code to make it more clear. I don't know what exactly your code should do but according to the information you have already provided, my version of your code is the following:
var selectedCase = {color: "", id: ""};
function removeSelectionWithRed() {
$('div').removeClass('red');
}
function selectWithRed(element) {
removeSelectionWithRed();
element.addClass('red');
}
function updateSelectedCase(color, id) {
selectedCase.color = color;
selectedCase.id = id;
}
function moveValueFromTo(elemFrom, elemTo) {
elemTo.html(elemFrom.html());
setValueToElem("", elemFrom);
}
function setValueToElem(value, elem) {
elem.html(value);
}
function swapValuesFromTo(elemFrom, elemTo) {
var fromValue = elemFrom.html();
var toValue = elemTo.html();
setValueToElem(fromValue, elemTo);
setValueToElem(toValue, elemFrom);
}
function isSelected(color) {
return selectedCase.color == color;
}
function clearSelectedCase() {
selectedCase.color = "";
selectedCase.id = "";
}
function elemIsEmpty(elem) {
return elem.html().length == 0;
}
$(".blackcase").click(function (e) {
if (elemIsEmpty($(this))) {
return;
}
alert("black is selected");
selectWithRed($(this));
updateSelectedCase("black", $(this).attr("id"), $(this).html());
});
$(".whitecase").click(function (e) {
removeSelectionWithRed();
if (isSelected("black")) {
alert("moving black to white");
moveValueFromTo($("#"+selectedCase.id), $(this));
clearSelectedCase();
return;
}
if(isSelected("white") && selectedCase.id !== $(this).attr("id")) {
alert("swap whitecase values");
swapValuesFromTo($("#"+selectedCase.id), $(this));
clearSelectedCase();
return;
}
alert("white is selected");
selectWithRed($(this));
updateSelectedCase("white", $(this).attr("id"), $(this).html());
});
Link to jsfiddle: https://jsfiddle.net/12gwq95u/21/
If my answers were helpful, please up them.

It happens because you have multiple $(".whitecase").click() handlers and they don't override each other but instead they all execute in the order in which they were bound.
I advise you to debug your code in browser console by setting breakpoints in every click() event you have (in browser console you can find your file by navigating to the Sources tab and then (index) file in the first folder in fiddle.jshell.net).
In general I think you should rewrite you code in such a way that you won't have multiple handlers to the same events and you can be absolutely sure what your code does.

Remove "NaN" from HTML document

It's a stupid thing tho be honest. As you see in my fiddle, you can add and remove fields. The sum of the total of the amount inserted in the input fields works well.
But when I remove a field (which the total is 0), it changes to NaN.
Is it possible to make NaN == 0?
http://jsfiddle.net/1ggaco1d/4/
$(document).ready(function () {
/* --- ADD FIELD --- */
rebind();
$('.TotalMultiField').each(function () {
var $wrapper = $('.multiFields', this);
$(".addField", $(this)).click(function (e) {
$('.multiField:first-child', $wrapper).clone(true)
.appendTo($wrapper)
.find('input')
.val('').focus();
rebind();
});
/* --- REMOVE FIELD --- */
$('.multiField .removeField', $wrapper).click(function () {
if ($('.multiField', $wrapper).length > 1) {
$(this).parent('.multiField').remove();
total();
}
});
});
});
function rebind() {
$(".number").on('blur', function(e) { total(); })
}
function total() {
var total = 0;
$(".number").each(function (idx, el) {
var value = $(el).val();
if (value !== "") {
total = total + parseFloat($(el).val());
}
});
$("#added").text(total);
}

You could use javascript isNaN() function.
like
if(isNaN(total) == ture)
{
total = 0;
}

jslint error..Don't make functions within a loop

In the below piece of code I am getting the JSLint error (Don't make functions within a loop). can you help me to modify the code to satisfy the JSLint.
setEllipsis : function () {
$('.co_documentReportTable > thead > tr > th').each(function() {
$(this).find('.co_dcrTable_Header').each(function() {
var $el = $(this);
if($el.css("overflow") === "hidden") {
var text = $el.html();
while ($el.height() > 64) {
$el.text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
//
var txt = 'Fair consideration/no fraudulent conveyance';
if(text.indexOf(txt) !== -1 ) {
$el.text(txt + '...');
}
}
}
});
});
}
I tried creating another function and calling it then in that case while loop is getting executed forever.

Looks in general like you want to use the text-overflow: ellipses CSS property instead here.
Otherwise - pull the anonymous function up and give it a name, so you might end up with :
setEllipsis : function () {
var addEllipses = function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
};
$('.co_documentReportTable > thead > tr > th').each(function() {
$(this).find('.co_dcrTable_Header').each(function() {
var $el = $(this);
if($el.css("overflow") === "hidden")
{
var text = $el.html();
while ($el.height() > 64) {
$el.text(addEllipses);
var txt = 'Fair consideration/no fraudulent conveyance';
if(text.indexOf(txt) !== -1 ){
$el.text(txt + '...');
}
}
}
});
});
}

On mouseenter, if a checkbox is checked, do X, else do Y

I am trying to have a checkbox on a page to show/hide passwords in password boxes. If they are hidden, then they will instead show on hover of that item.
The only thing I am struggling with is that the var is saved on page load along with when the rest of the jquery loads. How can I, on every mouseenter/leave, make sure that the checkbox is checked or not?
jsfiddle
window.hide_passwords = $('#hide_passwords').attr('checked');
if(hide_passwords) {
$("main table tbody tr").on({
mouseenter: function() {
$(this).children('td:first-child').children('input').attr('type', 'text');
},
mouseleave: function() {
$(this).children('td:first-child').children('input').attr('type', 'password');
}
});
} else {
$('input[type="password"]').attr('type', 'text');
}
$('#hide_passwords').click(function() {
if($(this).prop('checked')) {
window.hide_passwords = false;
} else {
window.hide_passwords = true;
}
});

Use .is(":checked") to check whether the checkbox is checked or not.
window.hide_passwords = $('#hide_passwords').attr('checked');
$("main table tbody tr").on({
mouseenter: function () {
if ($("#hide_passwords").is(":checked")) {
$(this).children('td:first-child').children('input').attr('type', 'text');
}
},
mouseleave: function () {
if ($("#hide_passwords").is(":checked")) {
$(this).children('td:first-child').children('input').attr('type', 'password');
}
}
});
Demo

var window.hide_passwords = document.getElementById("hide_passwords");
window.hide_passwords = window.hide_passwords.checked
var container = document.querySelectorAll("main table tbody tr");
var i = 0, length = container.length;
for (i; i < length; i++) {
container[i].addEventListener("mouseover", function() {
if (window.hide_passwords) {
// Your stuff here
} else {
}
}
}
I only work in Native JS, so sorry about the disconnect.

You can use bind and unbind methods for same behavior.
window.hide_passwords = $('#hide_passwords').attr('checked');
showPass();
function showPass() {
$("main table tbody tr").on({
mouseenter: function () {
$(this).children('td:first-child').children('input').attr('type', 'text');
},
mouseleave: function () {
$(this).children('td:first-child').children('input').attr('type', 'password');
}
});
}
$('#hide_passwords').click(function () {
if ($(this).prop('checked')) {
showPass();
} else {
$('input[type="password"]').attr('type', 'password');
$("main table tbody tr").unbind();
}
});
Demo