Music Database
How awesome is JQuery’s Ajax and XML parsing functions? It helped me implement the basics for my ajaxish music database application all during my lunch break today at work. I’ve been putting off creating it mainly because I didn’t want to deal with writing the tedious Ajax and XML parsing code that’s necessary for Ajax stuff.
And when I say ‘basics’ I mean everything except for the interface (ie. the HTML / CSS part). I was trying to go for the Homebrew style of OS X’s Terminal application but since I’m not much of a designer it was difficult getting that exact look. Also note that ‘basics’ really means ‘not production ready’ but since this is just a personal project kind of thing what do I care how polished things are.
Five Days In The Hospital
Last week I spent 5 days in the hospital. I got into this bicycle accident (sadly no vehicle was involved. Somehow I thought this would make the accident more noble. Or at least less embarrassing). I hit a sidewalk curb and woke up in the ambulance. And in between hitting that sidewalk curb and waking up in the ambulance I manged to fracture 5 ribs and dislocate my shoulder.
So… some words of advice to all my non existent readers out there. First off: If you’re riding your bicycle down the steepest bridge in your city make sure to slow down. Even if you have a green light at the bottom of the bridge. Even if you’ve made that downhill trip a million times before. And especially if you’re rushing to work because you can wait to write some kick ass code. Just remember… slow down!
Secondly… Use JQuery wherever possible. It rocks.
The Double Submitting Form
From the ‘Thank God We Have External Users As Testers’ department comes the following bug: The Project has this one particular form which takes forever (thank you third party API) to complete. Because of the whole ‘Did I Click On That Submit Button Or What?’ feeling that a user may experience when interacting with this particular form, he/she may be compelled to hit that submit button again. Which produces less than desirable results.
The (client side) fix that I found was rather straightforward. Just disable the submit button when the form is submitted:
$('form').submit(function()
{
$(this).find('input:submit').attr('disabled', true);
});
However… a small problem. When the form is submitted with the disabled submit button, the value of that submit button isn’t included in the POST values. Which kind of sucks because The Project uses the value of the submit button to check if the form should be processed or not:
$processForm = isset($_POST['SubmitButton']);
if ($processForm)
{
// process your form
}
else
{
// show an error page or something. NOT supposed to be here
}
I had to figure out another way to check if the form was actually POST‘ed or not. I decided to check whether a POST array exists:
$processForm = isset($_POST) && count($_POST) > 0;
Not as clean… but it works.
As for the server side solution… I needed to track (with a $_SESSION variable) when the form is first submitted and whether or not it’s been completed. That way if the form is double submitted that second submit can be handled:
$processForm = $_SESSION['IsFormBeingProcessed'];
if ($processForm)
{
$_SESSION['IsFormBeingProcessed'] = TRUE;
// when the form processing is finished set the tracking to false
$_SESSION['IsFormBeingProcessed'] = FALSE;
}
else
{
// forward to a 'Stop hitting that submit button!' page
}
Not even close to being clean… but it works.
Sometimes You Can Please All Of Them
Attention all future potential users of The Project who for some reason or another choose to browse with scripting off: The Project, as it stands now, will still be fully functional. Sure it won’t be as pretty or slick but it’ll still work.
And for all future potential users with scripting on: All of you will have the pleasure of The Project running some of the most consise Javascript I’ve ever written. And it’s all because of JQuery. I haven’t fallen this much in love with a framework since I met Hibernate a few months ago…
Three Hours For A Pair Of Square Brackets
The Project has this one particular form with a set of ‘Yes’/'No’ radio buttons and a <textarea> element.
The Client wanted the ‘Yes’ radio button automatically checked whenever a user enters some text in the <textarea> and the ‘No’ radio button to do the same thing when a user erases said text.
Solution: Attach an onChange()* onBlur() event handler on the <textarea>. Everytime the event is fired set the radio buttons based on the <textarea>’s value.
I knew how to do this in plain vanilla Javascript but I’m drinking the JQuery kool aid nowadays so off to figure out how to jquery-select a radio button.
Three hours later I finally figured it out. Here’s a quick summary of those three hours:
- 2 hours 59 mins wondering why
$('input[name=YesNoRadioButton]‘).val(radioValue)wasn’t working - 30 seconds to read in The Official JQuery Docs that the correct way is
$('input[name=YesNoReadioButton]‘).val([radioValue]) - 30 seconds to implement the ‘correct way’
And that’s what bugs me about JQuery. It possesses great power but with great power comes great… reading of sh*tloads of blogs tagged with ‘jquery’ in order to try to figure out your JQuery problem.
* Pointless because there’s no onChange() event handler for a <textarea> element