Posted At : November 25, 2007 3:21 PM
| Posted By : Admin
Related Categories:
Web20,
Ajax,
Coldfusion,
Javascript
I blogged a while back about trying to mash up Spry/Prototype/Scriptaculous to do an inplace-edit and an autocomplete. Unfortunately, I lost a bit of momentum using Spry for this purpose because we're not using Spry in the office.
I picked up the ball to use just Prototype/Scriptaculous for our needs.
What I found out was that there was a bit of a disconnect with Scriptaculous' Ajax.Autocompleter and Ajax.InPlaceEditor (to complete what I needed done).
What I needed: The ability to Add a Tag to a profile with InPlaceEditor but, I didn't want to have multiple versions of the same tag. (Ex. Dog, Dogs, Doggie) I needed to give the person who's inputting a new tag the ability to see tags that are similar to what he/she is currently typing.
Scriptaculous' Ajax.InPlaceEditor builds a form with an input or a textarea on the fly when you click on a link. Awesome! The only issue is that the
<input> or <textarea>
code doesn't include an ID for the html element created. The disconnect is that Autocomplete needs to target an INPUT's ID name.
With this knowledge, I had to make a change to Scriptaculous' library: contols.js. I am using the latest 1.8.0 version, so here is where I made my change at around line 551:
createEditField: function() {
...
fld.id = this.options.formId + '_input';
...
}
After making this change, viewing the generated javascript (god I love the web developer add-on for Firefox), I can see my form's dynamically generated input field, now has an ID. YAY!!!
Now I can continue with the Ajax.Autocompleter to target the INPUT field. But wait...There's a hangup :(
The generated form and the autocomplete execute almost simultaneously and there's an error. My Ajax.Autocompleter is complaining that the INPUT field that I am targetting doesn't exist? Huh? Doesn't exist? OH YEAH!! Need to do this in sequence :) My fix was to put a short setTimeOut function to execute the autocomplete library AFTER the INPUT field has been generated.
PHEW!! What a pain that was. But, hey, I learned alot with this little exercise. I'm almost certain that someone out there has done this before and probably did it better than me. If so, please point me in that direction :)
Here's the demo: Ajax.Autocompleter + Ajax.InPlaceEditor
(Try: Chris or phil or Boot or Hal)
