Using Firebug and jQuerify to Filter a Page

I love Firebug, and I’m getting so I understand jQuery pretty well.

I often drop into the console and type in jQuery commands to figure out how to get things to happen on a page. For example, I was looking at a really long page of search results from Taleo that lists out all of my submissions for jobs at CACI. The problem is, that it shows the fully active submissions with the inactive ones, so it’s not very useful for figuring out what I need to follow up on.

So it occurred to me that if I could just write a couple lines of jQuery to look for the items that include “Active” in them, I could reduce this list in a way that would be meaningful for me.

So the first thing I did was go look at the page HTML to figure out whether there was something on the page I could use to separate out each row on the search page.

I fired up Firebug by right clicking on one of the items and choosing “Inspect in Firebug”.

This starts up Firebug (if it isn’t already showing) and took me to the part of the HTML that I was looking for:

So now I knew I needed to look for something that had a class of “iconcontentpanel” that contained the text “Active”.  I decided to outline it with a green dashed line, so my jQuery looked like:

$(".iconcontentpanel:contains('Active')").css('border','3px dotted green');

So I flipped over to the Console in Firebug and tried running that:

But that gave me an error since there is no jQuery on the original page. But there’s this nifty little thing in the console that says “jQuerify”, and clicking that injects jQuery into the page:

So now that jQuery is available, running the script again gives me what I was looking for:

And of course I can add even more jQuery to strip out unwanted parts of the page, change format, etc, leaving me something that is more  actionable: