jQuery “click” and Safari
March 13th, 2008
Earlier this week I was working on migrating a online donation form that connects to Authorize.net for credit card and bank account donations into a Drupal installation. I built the original form and at the time had used Script.aculo.us to create sliding content blocks that appear when you switch between a one time contribution and an automated recurring contribution. Everything worked great in every browser I tested.
During the migration I ended up re-writing the script and decided to ditch Script.aculo.us for my Javascript library of choice, jQuery.
Everything worked great as before, a few bugs popped up because of they way it had to be setup. After fixing those bugs and sending it to the client for approval, I was informed (by the client) that the sliding panes don’t work in Safari 3 for the Mac. I opened the page in Safari and sure enough they didn’t work. After checking that the Javascript file had indeed loaded, I looked on Google just knowing someone had to of experienced this same problem.
I didn’t find anything, which was discouraging at first until I had an idea. I had used code similar to $(’.field’).focus(); with a function to run when you focus on a form field (usually radio buttons). I made a duplicate of my Javascript file and then did a find and replace. Replacing every occurrence of “focus()” with “click()”. Tested the file and sure enough the panes worked in Safari. I’m not sure why “focus()” wasn’t working, focus should be a valid event in every browser. If anyone has information on why “focus()” in jQuery doesn’t work on Safari 3 for the Mac, I’d be interested in hearing it.