I am trying to implement a filter. When a checkbox is checked, and after submitting, the checked values should display in the div with a Clear all button and an X button to remove separately, as shown in the image.
Can Anybody Help me.
The jsFiddle and Codepen code is attached.
That looks like a nice example to learn from.
I looked at your code and it’s quite difficult to understand what it’s supposed to do.
So, I’m going to run the code through JSLint until it stop complaining about things, and try to make your existing code easier to understand.
Ok, I am new to Web development. I am still learning and implementing. I will try to reduce the code sir. thank you for your valuable suggestion. Can you help me to solve the problem.
Here’s the code after I’ve used JSLint to help me automatically find problems. Fixing them is still manual work though.
$(document).ready(function domLoaded() {
$("#showmenu").click(function menuClickHandler() {
$(".menu").show("slide");
});
});
jQuery(document).ready(function domLoaded($) {
$(".dropdown-toggle").click(function dropdownClickHandler(evt) {
var dropdownButton = (evt.target).parents(".button-dropdown");
var menu = dropdownButton.children(".dropdown-menu");
var isHidden = menu.is(":hidden");
$(".button-dropdown .dropdown-menu").hide();
$(".button-dropdown .dropdown-toggle").removeClass("active");
if (isHidden) {
menu.toggle();
dropdownButton.children(".dropdown-toggle").addClass("active");
}
});
$(document).bind("click", function docClickHandler(evt) {
var el = $(evt.target);
if (!el.parents().hasClass("button-dropdown")) {
$(".button-dropdown .dropdown-menu").hide();
$(".button-dropdown .dropdown-toggle").removeClass("active");
}
});
});
$(function domLoaded() {
$("input[type=checkbox]").click(function checkboxClickHandler(evt) {
var el = evt.target;
var value = $(el).val();
if ($(el).is(":checked")) {
$("<li></li>").appendTo("#div ol").text($(el).val());
} else {
value = $(el).val();
if ($("#div ol").has("li:contains('" + value + "')")) {
$("#div ol li:contains('" + value + "')").remove();
}
}
});
});
From there, we can combine the domLoaded sections of code.
jQuery(document).ready(function domLoaded($) {
$("#showmenu").click(function menuClickHandler() {
$(".menu").show("slide");
});
$(".dropdown-toggle").click(function dropdownClickHandler(evt) {
var dropdownButton = (evt.target).parents(".button-dropdown");
var menu = dropdownButton.children(".dropdown-menu");
var isHidden = menu.is(":hidden");
$(".button-dropdown .dropdown-menu").hide();
$(".button-dropdown .dropdown-toggle").removeClass("active");
if (isHidden) {
menu.toggle();
dropdownButton.children(".dropdown-toggle").addClass("active");
}
});
$(document).bind("click", function docClickHandler(evt) {
var el = $(evt.target);
if (!el.parents().hasClass("button-dropdown")) {
$(".button-dropdown .dropdown-menu").hide();
$(".button-dropdown .dropdown-toggle").removeClass("active");
}
});
$("input[type=checkbox]").click(function checkboxClickHandler(evt) {
var el = evt.target;
var value = $(el).val();
if ($(el).is(":checked")) {
$("<li></li>").appendTo("#div ol").text($(el).val());
} else {
value = $(el).val();
if ($("#div ol").has("li:contains('" + value + "')")) {
$("#div ol li:contains('" + value + "')").remove();
}
}
});
});
Structure is more easily seen by separating the functions from handling the events.
jQuery(document).ready(function domLoaded($) {
function menuClickHandler() {
$(".menu").show("slide");
}
function dropdownClickHandler(evt) {
var dropdownButton = (evt.target).parents(".button-dropdown");
var menu = dropdownButton.children(".dropdown-menu");
var isHidden = menu.is(":hidden");
$(".button-dropdown .dropdown-menu").hide();
$(".button-dropdown .dropdown-toggle").removeClass("active");
if (isHidden) {
menu.toggle();
dropdownButton.children(".dropdown-toggle").addClass("active");
}
}
function docClickHandler(evt) {
var el = $(evt.target);
if (!el.parents().hasClass("button-dropdown")) {
$(".button-dropdown .dropdown-menu").hide();
$(".button-dropdown .dropdown-toggle").removeClass("active");
}
}
function checkboxClickHandler(evt) {
var el = evt.target;
var value = $(el).val();
if ($(el).is(":checked")) {
$("<li></li>").appendTo("#div ol").text($(el).val());
} else {
value = $(el).val();
if ($("#div ol").has("li:contains('" + value + "')")) {
$("#div ol li:contains('" + value + "')").remove();
}
}
}
$("#showmenu").click(menuClickHandler);
$(".dropdown-toggle").click(dropdownClickHandler);
$(document).bind("click", docClickHandler);
$("input[type=checkbox]").click(checkboxClickHandler);
});
And improvements are then much easier to make from there.
thank you sir,
Is it possible to give me the code in jsfiddle or codepen link
Nope, as I’m in bed now. copy/paste works perfectly well.
From Where to Where Sir.
I am not able to implement. It would be very helpfull. If codepen or jsfiddle link is provided.
Have you tried pasting Paul’s final version of the code into the JavaScript section of your own Codepen?
Please note. I have not solved the actual problem.
What I have actually done is to supply a better starting point, compared with its original code that looked like this.
function t(t) {
e(t).bind("click", function (t) {
I think that I should step back a bit, and explain with more detail how I came up with the initial code in my first post.
The code from the original poster (OP) is a disaster. Here’s what it looks like:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
$(function () {
$('input[type="checkbox"]').click(
function () {
value = $(this).val();
if ($(this).is(':checked')) {
$('<li></li>').appendTo('#div ol').text($(this).val());
}
else {
value = $(this).val();
if ($('#div ol').has('li:contains("'+value+'")')) {
$('#div ol li:contains("'+value+'")').remove();
}
}
});
});
I find that JSLint is really effective at helping you to steer clear of bad code.
Pasting the code in to JSLint gives us a lot of beneficial feedback on how to improve this code.
Here are the warnings that it gives, and what I’ve done to solve them.
Replace single quotes for delimiting strings with double quotes.
As an example, I’m commenting out the previous line of code, and showing the updated line beneath it.
// $('#showmenu').click(function() {
$("#showmenu").click(function() {
The following code was more difficult to update:
$('input[type="checkbox"]').click(
Fortunately though the attribute equals documentation has a nice and clear solution for us. It shows examples that use double quotes outside, and single quotes inside. For example:
jQuery( "[attribute='value']" )
So we can use that same formatting style to fix our problem:
// $('input[type="checkbox"]').click(
$("input[type='checkbox']").click(
And now that double quote problem is fixed.
The next issue is all about formatting. While it is possible to fix these things manually, being commanded by JSLint about every little detail, we can use the JavaScript Beautifier to automatically fix all of these formatting problems for us.
That now gives us the following code with improved formatting and indenting, and JSLint now has no more problems with the formatting of the code.
$(document).ready(function() {
$("#showmenu").click(function() {
$(".menu").show("slide");
});
});
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
$(function() {
$("input[type="
checkbox "]").click(
function() {
value = $(this).val();
if ($(this).is(":checked")) {
$("<li></li>").appendTo("#div ol").text($(this).val());
} else {
value = $(this).val();
if ($("#div ol").has("li:contains(" + value + ")")) {
$("#div ol li:contains(" + value + ")").remove();
}
}
});
});
The this keyword easily leads to many confusions and misunderstandings. There are better ways than using the this.keyword.
Here’s the section of code that has the this keyword being complained about:
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
Now there’s a lot of problems going on there, but we’ll just focus on one thing at a time.
The function is a part of a click event, where the t variable represents the event object.
Normally the event object is given a parameter name of evt, so in the interest of good consistency I’ll rename t to be evt
// e(t).bind("click", function(t) {
e(t).bind("click", function(evt) {
// t.preventDefault();
evt.preventDefault();
e(this).parent().fadeOut()
})
Don’t rename all of the t variables though, for the one used in e(t) is a different t from the one that’s used in the function. It’s bad to reuse variable names that are within the same scope of each other, as confusing clashes can occur.
The this keyword refers to the element that was clicked on, which we can easily get from the target property of the event object.
e(t).bind("click", function(evt) {
evt.preventDefault();
// e(this).parent().fadeOut()
e(evt.target).parent().fadeOut()
})
That is now a lot improved compared with how it began.
This has been just a small look at using JSLint to improve the code.
@pavanikaranam - do you want me to give further details about the issues that JSLint has with the code, and what is done to fix those issues?
Yes I have tried
Yes I am trying. But can you provide it in codepen or jsfiddle with the functionality.
I will see your code and mine. and i will compare code. and learn.
Currently we are working on removing problems from your existing code, before even starting to solve your problem.
Do you want further details about how problems are removed from your code?
Yes.
Single and double quotes. are same i think so. Because. we can give single or double quotes.
However, there are good reasons why they are not the same.
Using single quote delimeters causes problems when there are apostrophes in text.
Using double quotes also helps to prevent people from putting HTML code in strings.
When they’re both the same, and one of them tends to cause more problems than the other, it makes good sense to consistently use double quotes.
There’s much more about why double quotes are preferred over single quote.
The main message to takeaway though is that you (or me) do not get to make decisions about these things. A linter is designed to enforce a good and common set of standards, so that a majority of problems are reduced or removed.
In this case, the linter enforces double quotes instead of single quotes.
You can learn much much more about the standards that JSLint enforces at http://jslint.com/help.html#var
Till now i tried and came upto this jsfiddle and codepen. The only thing I am not getting is after clicking on Apply button the values should display in the div. Can you help me on this. I have attached the link.
OK sir thank you for the knowledge. now i came to know about double and single quotes. I will try to use them. It was very helpfull.
Okay, it looks like you’re less interested in the work that’s involved in getting to good solution, and instead seem to want a solution to be directly handed to you. This is when I step back and let others get involved.