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

2 points·taigeair··3 comments

Can someone explain how the checkboxes load the content dynamically? Thanks.

Here's the link: https://www.coursera.org/courses?orderby=upcoming&cats=infotech

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/ 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/ for example.

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/

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/

Hope that helps.

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

Reply on news.ycombinator.com