

Ask HN: How does the Coursera dynamic checkboxes work technically? - taigeair

Can someone explain how the checkboxes load the content dynamically? Thanks.<p>Here&#x27;s the link:
https:&#x2F;&#x2F;www.coursera.org&#x2F;courses?orderby=upcoming&amp;cats=infotech
======
raquo
From a brief look, they load _all_ of the content initially, and only use
checkboxes to filter it when displaying – a click on a checkbox updates the
set of criteria and calls a function to re-populate the DOM with new elements.

They seem to be using Jade templating language to generate the HTML for each
course, but it can be done with jquery as well.

If you're looking at techniques for actually loading the content dynamically
from the server, check out
[http://api.jquery.com/jQuery.ajax/](http://api.jquery.com/jQuery.ajax/) and
related methods.

If you're looking for some sort of magic that keeps your JS objects and HTML
DOM in sync, check out [http://knockoutjs.com/](http://knockoutjs.com/) for
example.

------
TimFogarty
Hey, there are many ways this could be done. I don't know how it's done
exactly in Coursera. Here's an example with basic jQuery:

[http://jsfiddle.net/TimFogarty/jUKwL/1/](http://jsfiddle.net/TimFogarty/jUKwL/1/)

With a large number of courses and pictures, you'd probably want to use ajax
to fetch the course info every time a box is ticked.

Alternatively, you could use a framework like Angular.js:
[http://angularjs.org/](http://angularjs.org/)

Hope that helps.

------
officialjunk
glad you have likely found your answer already, but it probably will help out
others in the future to pose and answer this question on a site like
stackoverflow.com

