Sometimes programming can make you question your sanity. If you don’t think you’ve crossed the line there, you might at least wonder whether you should take up something a little more tangible, like backhoe operator. Such was the case as I scoured the documentation for the Script.aculo.us Ajax Autocompleter. Ultimately, I was to blame it on the lack of a crystalline, 100% matched example for my problem. I must state for the record that Prototype and Scriptaculous are nothing short of miraculous when it comes to making Javascript accessible to the unwashed like me. All the same, I have spent many hours over the last couple of days getting the Autocompleter to work.

My first problem was that I needed to autocomplete on Cities when given a country and state. The trouble is that when you set up the listener (ie. the “new Ajax.Autocompleter()” line), you can specify some parameters that are static. Static parameters wouldn’t do me much good since the user is going to choose a state and country from drop-downs. I needed to be able to grab those parameters right before the Ajax call. Well, I skipped right by the documentation on the “callback” parameter not thinking that a callback would be an event that fires right before the Ajax call to the server is made. Well, sure enough, that’s the trick. You can give it a function in the callback parameter (e.g. callback: getStateAndCountry, …), and this function get called just before the Ajax call, and it’s return becomes Post key and value pairs, in addition to a key/value that is the “name” and “value” of the form element that you are autocompleting. There were no examples of this, so I searched in vain for a couple of hours….Arrrgh!

Second problem….after figuring out the first problem, I had a second problem in Internet Explorer. When typing into the auto-complete field, the returned list would flash up and immediately hide itself on the first time the call went to the server. After that first Ajax call, all the subsequent calls worked fine. Well, there goes another 3 hours. I tried going backwards in versions to Scriptaculous version 1.7.0 to see if that would help. I had been running 1.8.1. When I switched back to 1.7.0, everything seemed to work. I was fooled. It worked in IE 7 but not IE 6. Next, I slowly stripped my web page of every single tag that wasn’t absolutlely necessary (I had already confirmed that a stripped down page would work with it). It turned out that the problem was that I had an Action parameter and a Method parameter in my Form tag. Took those out, and Bingo! I haven’t figured out whether it was the Action or the Method.

After figuring out problem 2, I decide that I should upgrade my Prototype and Scriptaculous code to the latest/greatest. So back to 1.8.1 for Scriptaculous and 1.6.0.2 for Prototype. I give it a shot in Firefox and when making a selection from the returned list and hitting enter, the form Submit gets fired…Oh, please!!!! That’s just not right! So I load back up 1.7.0 and, ah, back in black. It shouldn’t be this hard. Probably isn’t for normal people, but I had to vent.

I plan to post my example of the callback function soon. It is just a great example that might help someone.

Cheers…at last

Byron

You can now: