Check All To-Do Items on Foursquare

By Michael Flanakin @ 5:44 AM :: 5274 Views :: Technology, Other :: Digg it!
Foursquare + jQuery

As fun as Foursquare is, it agravates me to no end at how short-sighted their interaction designers are (if they even have any). Admittedly, I have this problem with almost every piece of technology I use, but don't have the time to fix them all -- if only *rolling eyes, shaking head* What I do have the time for is finding a quick hack to something that was annoying me -- namely, checking all the to-do items on a Foursquare account page.

Go to any Foursquare account page, like the Bing account page, and you'll be presented with a list of usually 50 or 100 to-do items that often lead to a badge. Say what you will about Foursquare, I enjoy the game. I have gone thru several of these pages clicking each one after the other a few times now and finally got fed up. Within a minute, I was able to use IE8's built-in dev tools to come up with a quick solution.

If you're not familiar with the IE8 dev tools, simply open IE8 and press F12. The dev tools may open in a new window, but I prefer them docked at the bottom of my main window, since I'm usually on a laptop. The extra window is ideal for dual monitor setups, tho.

IE8 Dev Tools

The HTML tab comes up first, which is where I started -- actually, that's not true, the first thing I did was jump over to the Script tab and type $ into the Script Console. This let me verify that Foursquare uses jQuery. Armed with jQuery, I knew I could accomplish what I needed fairly quickly. I selected the element selector arrow (first item on the toolbar on any of the tabs) and then clicked on one of the "Add as a To Do" elements within the page. This switched over to the HTML tab to show me a div with a checkbox. Most importantly, the div has a class of tip_todo_unchecked and the checkbox had an onclick handler. This is all I needed, thanks to jQuery. I moved back to the Script Console and used the following jQuery code to select all unchecked items and click them. Note that I had to "click" them to run the onclick handler. Simply checking them wouldn't have triggered the onclick event.

$('.tip_todo_unchecked :unchecked').click()

If you're not familiar with jQuery, the question mark ($) is an alias to the jQuery() function. Typically, you pass in a selector that is used to traverse and select HTML elements. In this case, we're grabbing all elements unchecked checkboxes (input elements with a type of checkbox) that are within elements with a CSS class of tip_todo_unchecked. While not exactly the same as CSS selectors, jQuery selectors were obviously heavily inspired by CSS selectors and aim to "embrace and extend" what CSS offers in this arena. The click() function simply calls the onclick event for each of the elements that were retrieved. It's that simple.

Note that you'll have to wait a few seconds while the page dynamically registers all of those clicks for you. I just jump down to the bottom of the page and wait for the last few to process.

Arguably, I should've put this into a GreaseMonkey for IE script, but my faith in IE add-ins has dwindled, so I don't use that anymore. Firefox users can do the same thing with FireBug and/or GreaseMonkey. Heck, there may already be a GM script for this. I don't know because I'm not a fan of Firefox -- not that I think IE8 is the best browser in the world. Obviously, the same capability is in Chrome, as well. The bottom line is that jQuery allows this simple hack.