We Keep Coding

Jquery functions overriding each other

Question:
I have 2 jQuery function one is a search function and the other is a function to only show column values of a certain type. The problem is if I select a column value with the second function and hide the other rows then try to search those rows it resets and searches all rows.
Fiddle
Code:
Here are the 2 functions:
Search:
$(document).ready(function(){
$("#mySearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr td:nth-child(1)").filter(function() {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Column:
$(function() {
$('select[name="CPUmenu"]').change(function(e) {
let socket = $(this).val();
$('tbody tr[data-socket]').show();
if (socket.length) {
$('tbody tr[data-socket!="' + socket + '"]').hide();
}
});
$('select[name="CPUmenu"]').trigger('change');
});
Expected result:
I was thinking that the function could only apply to rows that aren't hidden but I'm not sure what the code for that would be.
Update:
I saw the :hidden selector and thought i could use .not(:hidden)
I also plan to add more functions in future so need it to be able to scale.
If you need any more information please let me know.
Thanks

I dont really know what this would do but i think your search function should be like this:
$(document).ready(function(){
$("#mySearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr td:nth-child(1)").filter(function() {
if ($(this).parent.css("display") == "block") {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});
});
});

Here's the working fiddle.
You could add, remove a class when you filter the rows by column and then search based on class usage.
Search Function:
...
if($(this).parent().hasClass("filtered")){
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1);
}
Column Function:
...
if (socket.length) {
$('tbody tr[data-socket!="' + socket + '"]').hide();
$('tbody tr[data-socket!="' + socket + '"]').removeClass("filtered");
$('tbody tr[data-socket="' + socket + '"]').addClass("filtered");
}

Quick fix, but sorry won't scale well :
$(function() {
$('select[name="CPUmenu"]').change(function(e) {
let socket = $(this).val();
$('tbody tr[data-socket]').removeClass('discarded').show(); /// <<<- here the trick
if (socket.length) {
$('tbody tr[data-socket!="' + socket + '"]').addClass('discarded').hide(); /// <<<-- here as well
}
});
$('select[name="CPUmenu"]').trigger('change');
});
$("#mySearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr:not(.discarded) td:nth-child(1)").filter(function() {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

Here is the working code:
$(function() {
$('select[name="CPUmenu"]').change(function(e) {
let socket = $(this).val();
$('tbody tr[data-socket]').show();
if (socket.length) {
$('tbody tr[data-socket!="' + socket + '"]').hide();
}
});
$('select[name="CPUmenu"]').trigger('change');
});
$(document).ready(function(){
$("#mySearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$('select[name="CPUmenu"]').trigger('change');
$("#myTable tr td:nth-child(1)").filter(function() {
if ($(this).parent().is(":visible")) {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});
});
});

How can I simplify this select function?

I don't know anything about javascript. I just found this snippet in the web when I was trying to find a solution on how to achieve what I need. Is there any way to simplify this since I will be adding around 40 elements that I need to show and hide.
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
if (vals.join('') === "a1b2c3") {
$(".box_wrapper").not(".a1b2c3").hide();
$(".a1b2c3").show();
$('html,body').animate({
scrollTop: $(".a1b2c3").offset().top},
'slow');
}
else if (vals.join('') === "d4e5f6") {
$(".box_wrapper").not(".d4e5f6").hide();
$(".d4e5f6").show();
$('html,body').animate({
scrollTop: $(".d4e5f6").offset().top},
'slow');
}
else{
$(".vid_box").hide();
}
}
I think I can simplify this further by getting the joined value from the select boxes and use it on the function above and since I am using the same value combination for the class. I just don't know how. Is that possible? Thanks in advance guys!

Perhaps something like this (air code):
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
var values = [ "a1b2c3", "d4e5f6" ];
var vj = vals.join('');
if (values.indexOf(vj) !== -1) {
$(".box_wrapper").not("." + vj).hide();
$("." + vj)).show();
$('html,body').animate({
scrollTop: $("." + vj)).offset().top
}, 'slow');
}
else {
$(".vid_box").hide();
}
}

I would suggest something like this.
var $selects = $('.filters select');
$selects.on('change', function() {
var value = $selects.map(function() {
return this.value;
}).get();
$(".box_wrapper").not("." + value).hide();
$(".box_wrapper." + value).show();
$('html, body').animate({
scrollTop: $("." + value).offset().top},
'slow');
});
$selects.first().trigger("change");

Here is my final code. Thanks #MJH for all the help.
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
var vwarp = vals.join('');
if (vwarp == vwarp) {
$(".box_wrapper").not("." + vwarp).hide();
$("." + vwarp).show();
$('html,body').animate({
scrollTop: $("." + vwarp).offset().top},
'slow');
}
else{
$(".box_wrapper").hide();
}
}
Hope this helps!

How can i display table row depends on matching selected dropdow box values using jquery

I have two multiple dropdownbox and one table and one search button. After i click the search button i want to hide/show the table row depends on selected dropdownbox values matching.How can i do it?anyone help.
JS:
var array1 = [];
var array2 = [];
jQuery('#codexpl tr').each(function () {
var $row = $(this);
var $firstCell = $row.find('td:first');
array1.push($firstCell.text());
var $lastCell = $row.find('td:last');
array2.push($lastCell.text());
});
var selectedBrandarr=[];
var selectedStatusarr=[];
$("#search").on('click', function () {
/*search function*/
$('.multiSel span').each(function (index) {
selectedBrandarr.push($(this).html().replace(/,/g, ""));
})
$('.multiSel2 span').each(function (index) {
selectedStatusarr.push($(this).html().replace(/,/g, ""));
})
jQuery('#codexpl tr').each(function (index) {
var $row = $(this);
var $firstCell = $row.find('td:first');
var $lastCell = $row.find('td:last');
if($firstCell.text()==selectedBrandarr[index] && $lastCell.text() == selectedStatusarr[index] )
{
alert("yes");
$(this).css('display','block')
}
else{
$(this).css('display','none')
alert("not match");
}
});
});
$(".dropdown dt a").on('click', function () {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function () {
$(".dropdown dd ul").hide();
});
function getSelectedValuedropdownbox2(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function () {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
/*-----------------------------*/
$(".dropdown2 dt a").on('click', function () {
$(".dropdown2 dd ul").slideToggle('fast');
});
$(".dropdown2 dd ul li a").on('click', function () {
$(".dropdown2 dd ul").hide();
});
function getSelectedValuedropdownbox2(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown2")) $(".dropdown2 dd ul").hide();
});
$('.mutliSelect2 input[type="checkbox"]').on('click', function () {
var title = $(this).closest('.mutliSelect2').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel2').append(html);
$(".hida2").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida2");
$('.dropdown2 dt a').append(ret);
}
});
Jsfiddle:http://jsfiddle.net/3J2Ns/59/

I would have gone for a server side solution, where you got a search result returned and the table replaced with the results.
If you for some reason want to do this manually on the frontend, one out of the box solution would be to assign each row classes that equates to the select values applicable for that row.
Also store all these class names as an array.
Write a function that hides all the classes, and another that shows all the classes. eg: for each class display none;
Then write a function that would on search, if both of the selects are empty, show all.
Else hide all and then show for each selected classes.
Your table html should be like this (add the 'result-row' class for all rows):
<table ...>
...
<tr class="Apple Active result-row">
<td> Apple </td>
<td>Active</td>
</tr>
... //repeat the same for every row
</table>
You have used input checkboxes, but havent given them a name. You need to give them a name for each group.
eg:
<input type="checkbox" value="Draft" name="option"/>
<input type="checkbox" value="Active" name="option"/>
<input type="checkbox" value="Motorola" name="option"/>
They can all be given the same name since for your purpose, it would both be used for filtering the same list. If there was a requirement to separate them out, I would give each group its own name.
In the javascript:
function hideAll() {
$('.result-row').hide();
}
function showAll() {
$('.result-row').show();
}
function showFiltered() {
if ($('input[name="option"]:checked').length == 0) {
showAll();
}
else {
hideAll();
$('input[name="option"]:checked').each(function() {
$('.' + this.value).show();
});
}
}
Call function showFiltered() on click of any checkbox.
eg:
$('input[name="option"]').on('click', function () {
showFiltered();
});
I have partially updated your jsfiddle.
http://jsfiddle.net/3J2Ns/60/
If you click on your select brand dropdown and select Apple, you would find Blackberry and HTC rows disappearing.

put a value with javascript on the url

Is there a way to add the select-result on the url when the pop up window appears?
The select-result gives the value of the boxes selected and i want to pass the values selected gto a form but i am not ussing a form. can i pass the values ussing the url?
i want to add the selected values like form.php?id=2882,222,22412,23
$(function() {
$(".selectable").selectable({
filter: "td.cs",
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$('.ui-selecting:gt(31)').removeClass("ui-selecting");
confirmation($(".ui-selected").length + " box selected. "+($(".ui-selected").length));
function confirmation() {
var answer = confirm($(".ui-selected").length + " box selected. "+($(".ui-selected").length));
if (answer){
window.open ("form.php","mywindow","menubar=no,resizable=no,width=650,height=700");
}
else{
}
}
$('#divmsg').html($(".ui-selected").length + " box selected")
$('#divmsg2').html($(".ui-selected").length)
if ($(".ui-selected").length > 90) {
alert("Selection of only 90 boxes allowed");
$('#divmsg').html($('#divmsg').html() + ",<br><b>Message: Selection of only 90 pixels allowed!!</b>");
$(".ui-selected").each(function(i, e) {
if (i > 3) {
$(this).removeClass("ui-selected");
}
});
return;
}
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});
this is the fiddle
http://jsfiddle.net/dw6Hf/57/
Thanks in advance
​

Append the value to the querystring. Basic idea:
window.open ("form.php?foo=" + bar,"mywindow"...

selectable limit stop

I am trying to make this selectable script to have selecting limits. I want it to stop selecting when the limit of selection goes over the limit number that is 4.
http://jsfiddle.net/dw6Hf/51/
$(function() {
$(".selectable").selectable({
filter: "td.cs",
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$('.ui-selecting:gt(31)').removeClass("ui-selecting");
// alert($(".ui-selected").length);
$('#divmsg').html($(".ui-selected").length*2+ " box selected")
if ($(".ui-selected").length > 4) {
//alert("Selection of only 4 allowed");
$('#divmsg').html($('#divmsg').html() + ", Selection of only 4 allowed");
$(".ui-selected").each(function(i, e) {
if (i > 3) {
$(this).removeClass("ui-selected");
}
});
return;
}
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});​
thank you

Ok now that i understand the requirements this one should give you what you asked for. Changing from stop to selectable means you can decide before it is "selected" not after which is when stop is fired.
fiddle

This works
$( "#selectable" ).selectable({
selecting: function(event, ui) {
if ($(".ui-selected, .ui-selecting").length > 4) {
$(ui.selecting).removeClass("ui-selecting");
}
}
});
duplicate of this
EDIT
something like this?
$(function() {
$(".selectable").selectable({
filter: "td.cs",
// do not allow selecting more than four items
selecting: function(event, ui) {
if ($(".ui-selected, .ui-selecting").length > 4) {
$(ui.selecting).removeClass("ui-selecting");
}
}
// do whatever you like with the selected
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$('#divmsg').html($(".ui-selected").length*2+ " box selected")
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});?