Entries tagged with jquery

Entry tags:

jQuery in Firebug: How and why?

There are a number of folks out there who use the Firebug extension for FireFox so they can debug webpages. Firebug also includes a Javascript console so you can execute arbitrary Javascript code against the current page.

If you're a fan of the jQuery library, there's a way you can use that in Firebug (first documented here):

var j = document.createElement("script");
j.onload = jsCallback;
j.src = "http://code.jquery.com/jquery-latest.pack.js";
document.getElementsByTagName("head")[0].appendChild(j);

Note that line I have in bold? That fires a function called "jsCallback()" after jQuery is successfully loaded.

"Why a fancy callback?"

As I learned the hard way, if I were to just put Javascript code following the jQuery code, it might get executed before jQuery is successfully loaded, leading to errors. While I could just re-run the code (as jQuery would already be loaded), I was looking for a better solution to the problem, and this is what I came up with.

"So what can I do this callback?"

I'm glad you asked. One way using jQuery in Firebug comes in quite handy is if you want to dissect another web page. For example, let's say you want to run a Google search, and extract the URLs in the search results. Here's how to do it:

/**
* This is executed after jQuery is successfully loaded.
*/
function jsCallback() {

    var e = jQuery("a.l");

    var output = "";
    e.each(function() {
        output += jQuery(this).attr("href") + "\n";
    });

    alert(output);

}

var j = document.createElement("script");
j.onload = jsCallback;
j.src = "http://code.jquery.com/jquery-latest.pack.js";
document.getElementsByTagName("head")[0].appendChild(j);

"I could write $.get() calls to load Google's search results!"

Good luck with that. FireFox won't let you do that due to the same-origin policy.

"Well, how about if I get Google's search results in JSONP format?"

Um, good luck with that, too. You won't get very far without an HTTP referrer header, I'm afraid.

"So if I want to do this on an ad-hoc basis, I have to dissect the Google search results page?"

Yep, exactly.

Got any other tricks you find really useful to do with jQuery in Firebug? Let me know in the comments!

Entry tags:

How to completely break jqModal in MSIE 6

I spent about 2 hours tonight trying to figure out why my modal dialog box refused to work under Internet Explorer 6.0. The symptom was that in addition to the rest of the webpage being grayed out, the modal box was also being grayed out. Not good.

The culprit turned out to be this bit of CSS:

.jqmWindow {
   position: fixed;
}

Having the position set to "fixed" will screw you every single time. (Plus, the box displaces your page content, instead of appearing over top of it, like you would expect with a high z-index value.)

The fix is to change the position attribute from fixed to absolute. Once you do that, it behaves as expected in both MSIE 6 and FireFox.

Other than that little problem, the jqModal library is a nice little library which can create pop-up boxes within a webpage that are part of the same window. It can also "gray out" the current contents of the page and force the user to click in the box before continue. Very handy to have, if you want to make the user agree to the T&Cs of a particular website.

Entry tags:

Christmas Update

- Had some friends over for Christmas on Saturday. Manage to finish off that cursed bottle of Soco, among other things.

- Had Christmas Eve dinner with the extended family. My Uncle thought it would be cute to make us sing The 12 Days of Christmas. So I sung The HotMovies version, which brought the song to an early conclusion. Also, I gave out porno to folks who were there.

- Did some jQuery UI work for one of the sites I run. Edge cases in different browsers are really starting to piss me off.

- Back in a mostly empty office for the rest of the week.

- Heading out to Chicago to visit some folks for New Year's. Turns out that I'll be staying about 5 minutes away from a colleague's office. Did I hear someone say, "Microbrew"?

- Working security for the Dorsai Irregulars at MagFest down in Alexandria, Virgina two weeks from now. If you like video games or heavy metal, it's worth checking out.

Entry tags:

Getting PHP arrays to work in jQuery

Making form variables into arrays in PHP easy. One only needs to add "[]" to the name of the variable to make this happen. Example:

<input type="text" name="search[name]" id="search[name]" /> <input type="text" name="search[age]" id="search[age]" /> <input type="text" name="search[city]" id="search[city]" /> <input type="text" name="search[state]" id="search[state]" /> <input type="text" name="search[country]" id="search[country]" />

When the form is submitted and the PHP code on the processing page is run, there will be a handy little array called $search. This variable can then be passed into additional functions, looped through, etc. It's way easier than working with 5 separate variables.

Lately, I've been using jQuery in some of my web development. It lets me "do more with less", as they say. One very easy way to access specific HTML entities in a document is with pound-notation. Examples:

$("#foo").addClass("required"); $("#bar").hide(); $("#username").css("background-color", "blue");

If you just groaned, then you know what's coming. Sure enough, jQuery has issues with using square brackets in pound-notation. It seems that square brackets are used by jQuery itself as attribute selectors.

It took me some time, but I finally found a workaround, which was the real reason behind writing this journal entry -- so as to save myself and other folks time from having to find this solution again in the future. Examples:

$("[id='search[name]']").hide(); $("[id='search[address]']").show(); $("[id='search[country]']").css("color", "green");

That's about it. Happy jQuerying!