the Fresh!

Another quickie to detail a little gotcha that I just ran into on this site, actually. I use flXHR on this site to make requests to longurlplease to lengthen/reverse shortened URLs (mostly in the recent tweets feed). I use the flXHRproxy jQuery plugin with jQuery code to accomplish that.

I made some recent optimization changes to the site according to suggestions from YSlow. (side note: I went from a 27-F grade to a 62-D grade with some simple CSS, HTML, and JS changes — not bad, huh?). Anyway, one of the changes I made regarding Javascript was to package all 4 flXHR related JS files into one file (flXHR.js, checkplayer.js, flensed.js, and swfobject.js), to reduce the number of HTTP requests on page load.

After rolling out those changes and basking in the glory of my optimization improvements, I realized that part of my code logic, the part about reversing URLs, wasn’t working anymore, even though all the rest of my jQuery code logic seemed to be working fine. After some clumsy debugging, I found out it was because flXHR was never fully loading (actually, all the JS was there, obviously, but the other assets, like flXHR.swf) were not loading.

When this happens, it’s USUALLY because the code is unable to auto-detect the correct base-path to load additional assets from. The code is able to do the auto-detect by looking for itself (that is, its corresponding DOM script tag) and inspecting the path of the file reference. But the logic only works if the file is the same name as what it’s hard-coded to look for (“flXHR.js”).

In my haste to package up the files, I named the new file “flXHR-packaged.js”. Thus, the base-path detection went lame. Oops. Luckily, there’s a simple fix, and doesn’t require any hacking to the files at all (probably the easiest temptation — but you should avoid that IMHO).

All you have to do is include a setting to manually specify the base-path for flXHR/flensed to use, and all’s good! Look:

<script>var flensed={base_path:”/path/to/flXHR.files/”};</script>

Include that right before your script tag that includes flXHR.js (or whatever you are calling it), and you should be fine.

Note: Make sure you use regular double-quote characters instead of the funny stylized ” that WP insists on using.

Happy flXHR’ing.