Autocomplete + InPlaceEditor + Proto/Scriptaculous...finally!!
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
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';
...
}
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)
Thanks!
new Ajax.Autocompleter('testID-inplaceeditor_input', 'autocomplete', "../action/createTagsUL.cfm", {paramName: "tag", parameters:"category=personal", minChars:2, indicator:'testID_indicator'}); }
variable sent to server: testID-inplaceeditor_input
receiving div element of server response: autocomplete
processing server URL: ../action/createTagsUL.cfm
Hope that answers your question :)
Thanks!
When I type two or more letters, the page submits a POST to the script createTagsUL.cfm (I'm using PHP, but you are using coldfusion) which in turn queries a database for similar suggestions. According to firebug, the page is sending a POST of the letters I type, but the script is not seeing any POSTed variables. (or at least not the testID-inplaceeditor_input one).
At the end of my server-side PHP script, I put another <li></li> that echoes the POST'ed variable 'testID-inplaceeditor_input'. This way, when I type in any letters, it should post back what I'm typing - but it does not.
Am I missing something, or is it just late and I need to bang my head a few times on something really hard?
Thanks for getting this to work so well... you should submit a change to Thomas Fuchs at script.aculo.us so he could implement this into the code permanently...
great job!