Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Matt Greenfield
Matt Greenfield
1,799 Points
Posted by Matt Greenfield
Matt Greenfield
1,799 Points

Jquery function with parameter, running on page load rather than .change()

Hi all,

I'm earning jquery functions, and passing parameters to them.

I'd like this function to run on checkbox .change() / .click() but it runs on page load and I cant work out why.

Any help much appreciated!

Link to the jsfiddle - http://goo.gl/9YoHYn

4 Answers

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

Try passing your toggleCategory function into an anonymous function:

$( "#checkbox--gloves" ).change(function(){toggleCategory("gloves"); });

The way you had it was firing the function on page load. Tried it in your JS Fiddle and all worked.

Matt Greenfield
Matt Greenfield
1,799 Points
Matt Greenfield
Matt Greenfield
1,799 Points

Thanks Jeff, I've updated the jsfiddle a little as I wanted to make it a bit more complex (hence the function and parameters...).

I have a solution for if they select a brand and a category but am trying to keep it simple for the sake of the jsfiddle!

Any thoughts on if this is the best way about it? Its currently broken :(

http://jsfiddle.net/gmattgreenfield/7xLfbssh/5/

Thanks again for your help so far, much appreciated.

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

So, I opened the JS console in Chrome (cmd+option+j for mac, ctrl+option+j for windows) and did some debugging. Right now, your 'this' keyword's value is set to window, since that is what owns that named function at the top. To access the value of the checkbox, try var filter = $(this).val(); inside of the anonymous function you pass to the change method.

I'm not sure if you'll be able to keep the toggleFilters function the way it is for this to work. You might have to rethink your strategy.

Let me know if you come up with a solution and I'll take a look. Cheers.

Matt Greenfield
Matt Greenfield
1,799 Points
Matt Greenfield
Matt Greenfield
1,799 Points

Thanks Jeff that makes sense, shame I cant use (this) in that way.

The aim was to reduce the basically duplicated code lines 17 & 34 http://goo.gl/G0564w

My javascript knowledge is limited but I know Sass fairly well and am seeing where mixins come from!

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

No problem. 'this' can be tricky sometimes. I checked out the plugin project on Github...very cool idea. I may make a pull request in the near future.

Cheers!

Matt Greenfield
Matt Greenfield
1,799 Points
Matt Greenfield
Matt Greenfield
1,799 Points

Thanks Jeff, any contributions would be great, I'm hoping to advertise it a bit more to the open source community once I've spent a little more time on it. My first open source project!!