We Keep Coding

How to prevent filtering and going back to default result when button is clicked for the second time in a row

The first click of a button filters the table as it should. However the second click on the same button resets the table to default result.
I would like the second, consecutive click on the same button to do nothing, just keep the table filtered.
Only when you click a different button, should the table filter again.
BONUS QUESTION: How not to lose focus on a button when a click happens anywhere else on the screen?
Note: This code is not mine. I am a complete amateur in JS/JQuery and so I would appreciate a direct solution.
Thank you!
Here's the Fiddle: https://jsfiddle.net/Sprytny/71xbjpqm/5/
jQuery(function ($) {
$('table').show();
var filter;
$('.filter').click(function () {
if (filter == this.id) {
$('tr').show();
filter = undefined;
} else {
$('tr:not(.' + this.id + ')').hide();
$('tr.' + this.id).show();
filter = this.id;
}
});
});

This is all the code you basically need to use to get the desired functionality:
jQuery(function ($) {
$('.filter').on('click', function () {
$('tr.' + this.id).show();
$('tr:not(.' + this.id + ')').hide();
});
});
Every time you click on an element with a class of '.filter' it will grab that elements' ID and show the rows with a class equal to that ID, and hide those that do not match the criteria.
As far as the issue with keeping the focus is concerned. I suppose you'd like to keep the current filter highlighted to the user. As others have mentioned you shouldn't do that with the focus property. You can add a class on a filter if it's active and style it through the class. Something like this:
jQuery(function ($) {
$('.filter').on('click', function () {
$('.active-filter').removeClass('active-filter')
$(this).addClass('active-filter');
$('tr.' + this.id).show();
$('tr:not(.' + this.id + ')').hide();
});
});

Jquery selected option text contains

Trying to make if condition of selected option of another select not the current which contains certain text string as a text and not the value.
Example:
<select class="Selected">
<option>Hello</option>
<option>Bye</option>
</select>
In the following case what I have is the fowling. a trigger of another select:
$(".Selected_Two").change(function () {
if ($(this).closest('.div-block').find('.Selected:contains("Bye")')) {
alert('Bye');
}
});
So basically if the select option is selected in the select when triggering the other select will have to see alert "Bye"
But it is not working at this state. Any help is welcome.

Two ways to do that indexOf() for value or :contains for option text
indexOf()
$(".Selected_Two").change(function () {
var SelectTwoValue = $(this).val();
if ($(this).closest('.div-block').find('.Selected)').val().indexOf(SelectTwoValue ) > -1) {
alert('Bye');
}
});
:contains and length
$(".Selected_Two").change(function () {
var SelectTwoValue = $(this).val();
if ($(this).closest('.div-block').find('.Selected option:selected:contains("'+SelectTwoValue+'")').length > 0) {
alert('Bye');
}
});
Maybe you'll need to work around .val().indexOf() and :contains("'+SelectTwoValue+'")').length .. but I think you got the point

Hiding and showing divs when user uses select box not working correctly

For my website I allow the user to use a drop down to select various options, when they choose an option i have some jquery that should hide or show different pictures according to what they choose. However it doesn't seem to be changing.
I have created a js fiddle and put some text in on the cook section to try and test it but it still isn't working. Can anyone see why?
http://jsfiddle.net/av7E2/
$(document).ready(function () {
$('.box').hide();
$('#option1').show();
$('#select-portion').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.prepBox').hide();
$('#option10').show();
$('#select-prep-time').change(function () {
$('.prepBox').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.cookBox').hide();
$('#cook1').show();
$('#select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
});

Going by your fiddle, select-cook-time is a class and not an id value. Hence you should be using .select-cook-time instead. Try this
$('.select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});

I looked at your fiddle. You are using #select-portion when you should be using .select-portion. You seem to have the same problem with all other dropdowns.
Apply this changes and change handlers will be invoked.
$('#select-cook-time') -> $('.select-cook-time')
$('#select-prep-time') -> $('.select-prep-time')
$('#select-portion') -> $('.select-portion')

Well in your fiddle, you have class="select-portion" and in the jquery you are looking for # not .

After cleaning up some of the typos in the markup and cleaning up the jQuery we get this -
$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
$('.box, .prepBox, .cookBox').hide(); // combine selectors
$('#option1, #option10, #cook1').show(); // combine selectors
$('.select-portion').change(function () { // change to class selector
$('.box').hide();
$('#' + $(this).val()).show();
});
$('.select-prep-time').change(function () { // change to class selector
$('.prepBox').hide();
$('#' + $(this).val()).show();
});
$('.select-cook-time').change(function () { // change to class selector
$('.cookBox').hide();
$('#' + $(this).val()).show();
});
});
You can see this in operation here - http://jsfiddle.net/jayblanchard/av7E2/1/

Dynamically Uncheck All Checkbox's From Container Using A Textbox

fiddle - http://jsbin.com/OruFonU/1/edit
completed fiddle (for anyone who's in the same boat) - http://jsbin.com/OruFonU/15/edit
I'm trying to uncheck all checkbox's based upon the text in a texbox. If the textbox's value is equal to "Uncheck All" I want all checkbox's unchecked inside it's container div. (not all completely, just all inside the visible container)
I've tried the following but no luck.
.removeAttr('checked');
.attr('checked', false);
.prop('checked', false);
.is(':checked', false);
Here's the full JQuery/Javascript
$(document).ready(function() {
$('input[type=checkbox]').prop('checked', 'checked');
$('.show').hide();
$('.number-1').show();
$(".show-nums").on('load change', function() {
var val = $(this).val().toLowerCase();
if( $("." + val) && $("." + val).length ){
//check if there is a selector that corresponds to the value of the dropdown
$('.show').hide();
$("." + val).show();
}
});
$(".search").on('keyup change', function() {
var val = $(this).val();
if(val === "Uncheck All") {
$('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]').prop('checked', false);
}
});
});
If anyone can help me with this it'd be greatly appreciated.

It's because you wrap form inside p tag. Try to put your form inside div and it should work as expected
Demo

Basically your code would work. The thing that fails is the the selector for the inputs. You can fix that by fixing the selector for example juste use input[type=text].
There are other things you could improve, I have updated your jsbin:
http://jsbin.com/OruFonU/13/edit
you can dramatically simplify your code (and make it more readable) by doing this:
$(".show-nums").on('load change', function() {
var val = $(this).val();
$('.show').hide();
if( $("." + val) && $("." + val).length ){
//check if there is a selector that corresponds to the value of the dropdown
$("." + val).show();
}
});
side note: form tags are not allowed inside of paragraphs (p). Since inline elements are not allowed inside a p elements, the browser just assumes that the p tag was not closed and close it by him self. This is the result, and this is why your selector is not working:
The forms are not inside the P elements anymore.
If you have to stick to your HTML structure I would suggest you set the .number-n on the form tag.

you problem is that this selector:
$('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]')
returns [] empty.

just use $('input:checkbox').removeAttr('checked');
$(".search").on('keyup change', function() {
var val = $(this).val();
if(val === "Uncheck All") {
$('input:checkbox').removeAttr('checked');
});
I have used this in your fiddle and it works fine.
If you want to find specifically then you can use like this
$('.number-1').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-2').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-3').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-4').find('input[type=checkbox]:checked').removeAttr('checked');
You can also apply any loop here.

Set the value to ID of the element on click event by jquery

I want to set the menu to active when click on it. This is what I've tried :
<script language="javascript" type="text/javascript">
var select;
$(document).ready(function () {
$.getJSON(url, function (data) {
$.each(data, function (index, dataOption) {
var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
$('a#' + dataOption.ID).click(function () {
select = "selected";
$('.level1').attr("id",select);
});
});
});
});
</script>
What I tried to do is to set the id of 'level1' to selected, when I click on that link. But my coding is set all the link to selected, even I click only 1 link.
Could anyone give me the solution please.
Thanks so much.

That happens because you are calling .attr() on all .level1 element instead of only the one being clicked by its child so,
change
$('.level1').attr("id",select);
to
$(this).parent().attr('id', select);
You also need to remove the "selected" id from the other <li>'s by
$('.level1').removeAttr('id');
So the complete code looks like:
$('a#' + dataOption.ID).click(function () {
$('.level1').removeAttr('id');
$(this).parent().attr("id", 'selected');
});
One suggestion though, class is usually used in situation like this when you want to have a selected type of a list of menu, if you are using class you'd do something like
$('a#' + dataOption.ID).click(function () {
$('.level1').removeClass('selected');
$(this).parent().addClass('selected');
}
Looks more concise that way, but I'll leave it up to you :)