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.

jquery click send function wont work only update the same field

I am trying to make a click send function for my emoticon function but it is not working correctly.
I have created this demo from jsfiddle. In this demo you can se there are four textarea and smiley. When you click smiley then other alert (comments will be come here) changing to (Plese write your comment). What is the problem on there and what is the solution anyone can help me in this regard ?
JS
$('.sendcomment').bind('keydown', function (e) {
if (e.keyCode == 13) {
var ID = $(this).attr("data-msgid");
var comment = $(this).val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("Plese write your comment!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
}
});
/**/
$(document).ready(function () {
$('body').on("click", '.emo', function () {
var ID = $(this).attr("data-msgid");
var comment = $(this).val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("nothing!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
});
});
$('body').on('click', '.sm-sticker', function (event) {
event.preventDefault();
var theComment = $(this).parents('.container').find('.sendcomment');
var id = $(this).attr('id');
var sticker = $(this).attr('sticker');
var msg = jQuery.trim(theComment.val());
if (msg == '') {
var sp = '';
} else {
var sp = ' ';
}
theComment.val(jQuery.trim(msg + sp + sticker + sp));
var e = $.Event("keydown");
e.keyCode = 13; // # Some key code value
$('.sendcomment').trigger(e);
});
HTML

At 43 line $('.sendcomment').trigger(e); you trigger keydown event to all textareas. Change it to theComment.trigger(e)

jQuery JsTree version 3+ plugin DND

Where can I get information after drag:
Target element
Where was the moving element included (inside, after, before)
ad1) I found target element like this:
$(document).on('dnd_stop.vakata', function (e, data) {
var t = $(data.event.target);
);
ad2) I do not know
In version 1+ I found it like this:
$("#tree").bind("move_node.jstree", function (e, data) {
var idMoveElement = data.rslt.o.attr('id');
var idTargetElement = data.rslt.r.attr('id');
var where = data.rslt.p;
}
pretty easy... but in version 3+ I do not know.
Can you help me?
Thank you.

My solution:
$('#tree_structure').bind('move_node.jstree', function (e, data) {
if(data.parent !== '#') {
var infoAfterDnd = getTargetElementAndWhere(data);
if(infoAfterDnd .target.length > 0 && infoAfterDnd.where !== '') {
console.log(infoAfterDnd);
}
}
});
getTargetElementAndWhere = function(data) {
var where = '';
var $parent = $('#' + data.parent);
var $target = $('li:nth-child(' + data.position + ')', $parent);
if($target.length > 0)
where = 'after';
else {
where = 'inside';
$target = $parent;
}
return { where: where, target: $target };
},

jQuery improve table iterator

I have a table containing in every row one cell inside which is checkbox and label for that checkbox.
What I'm trying to do it to hide rows based on inputed text.
Basically this is list on names and I want to filter/hide those that don't contain entered text.
This is my function:
$(function () {
$('#user_name').keyup(function () {
if ($.trim($('input#user_name').val()) == '') {
$('table.myList >tbody >tr').each(function (index, value) {
$(this).css("display", "block");
});
} else {
$('table.myList >tbody >tr').each(function (index, value) {
if ($(this).find('td > label').length > 0) {
if ($(this).find('td > label').html().toLowerCase().indexOf($.trim($('input#user_name').val()).toLowerCase()) >= 0) {
$(this).css("display", "block");
} else {
$(this).css("display", "none");
}
}
});
}
});
});
This code works, if my table has 40 records its fast, but when I increment list to 500 it slows down and crashes my browser after time.
I'm looking for a way to improve this code to work faster.
Here is link to mock-up code: http://jsfiddle.net/gGxcS/
==UPDATE==
Here is my final solution based on answers of #scessor and #nnnnnn:
$(function () {
var $tableRows = $('table.myList tr');
var lastInput = '';
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
$('img.removeSelections').click(function () {
$('table.myList input[type="checkbox"]').prop("checked", false);
})
});

Can you test this code (with lot of elements)?
$(function () {
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if (sValue == '') {
$('table.myList tr').show();
} else {
$('table.myList tr').each(function() {
var jThis = $(this);
var oLabel = jThis.find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
jThis.show();
} else {
jThis.hide();
}
}
});
}
});
});
Don't call functions with same parameters twice (e.g. $.trim($('input#user_name').val());).
Use short selectors.
Use jquery each only if necessarry (e.g. don't needed here: $('table.myList >tbody >tr').each(function (index, value) {).
=== UPDATE ===
If somebody holds backspace to long, it will set all trs visible again and again. To prevent this you could check, if the last value is equal to the current value. If true, do nothing.
=== UPDATE ===
To uncheck all checkboxes, it depends on your jQuery version.
With jQuery 1.6 and higher:
$('table.myList input[type="checkbox"]').prop("checked", false);
Before:
$('table.myList input[type="checkbox"]').attr("checked", false);

I'd suggest that you cache your jQuery objects - given that you want to process on every keystroke I'd cache the table rows object outside of the keyup handler. Also, don't call functions inside the .each() loop when you can call them once outside - e.g., no need to be calling $.trim($('input#user_name').val()).toLowerCase() on every .each() iteration.
$(function () {
var $tableRows = $('table.myList >tbody >tr');
$('#user_name').keyup(function () {
var searchStr = $.trim($('input#user_name').val()).toLowerCase();
if (searchStr === '') {
$tableRows.css("display", "block");
} else {
$tableRows.each(function (index, value) {
var $this = $(this),
$label =$this.find('td > label');
if ($label.length > 0) {
if ($label.html().toLowerCase().indexOf(searchStr) >= 0) {
$this.css("display", "block");
} else {
$this.css("display", "none");
}
}
});
}
});
});
Demo: http://jsfiddle.net/gGxcS/3/