Great! This is going to be pretty easy, because the fields have IDs
and everything is predictably laid out from a code standpoint. First
off, I recommend that you update your server side suggestion script to
use a LIKE match rather than an = (case-sensitive) match – I typed a
b (lower-case) and nothing happened.
On to the script. First, add the Prototype.js library to your page.
The easiest way to do that is with the Google CDN. Paste this in your
page head somewhere early:
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js
"
type=“text/javascript” charset=“utf-8”>
Your keyword field is called ‘txt1’, so to access its value within a
script, you just use
$F('txt1');
Now, to “wire” your images to do the magic, you will need to attach an
observer function. Add the following script to your page head, after
you have included Prototype:
<script type="text/javascript">
document.observe('dom:loaded',function(){
$$('img').invoke('observe','click',function(evt){
var elm = Event.element(evt);
var field = elm.next('input[type="text"]);
if(field){
var v = $F(field);
var n = $F('txt1');
if(!f.include(n)) field.value += ' ' + n;
}
});
});
</script>
Let’s step through this a line at a time, so you can get a feel for
what’s going on inside all this terseness:
- This is an unobtrusive wrapper. This line makes the script wait
until the DOM (the object model of the page) has loaded, but doesn’t
wait until everything displays on the screen. This means that the
script is wired and ready to go even before all the pictures have
loaded.
- This is a fun bit of metaprogramming. The $$ (double-dollar)
function returns an array of elements that match the CSS selector. In
this case, we’re simply extending all image elements on the page. In a
page with other decorative elements, you could give your trigger
images a special classname, and thus only select any img.thumbnail or
something like that. The result of the double-dollar is passed to the
invoke method, which requires an array of objects and applies the same
method to all of them. In this case, it’s applying the ‘observe’
method, and handing that method two variables: ‘click’, and the
function to apply when it “hears” a click.
- We’re inside the function being applied to each click on an image.
This line gets a reference to the image that was clicked on.
- This line gets a reference to the text field directly following the
image that was clicked (or false, if it fails).
- Check to see if we have a field following the image.
- We do, so we get the current value of that field as a string.
- Get the current value of the Name field as a string.
- If that name is not already in the field, add a space and the name.
(If you want to use commas to separate the names, then you would add
that into this part of the script.)
The rest of the script is just ending the closures and loops.
Because we’ve used an unobtrusive listener, all of this scripting will
be available from the moment the page loads. Nothing on the page will
need to be explicitly changed or modified for this to just work.
By the way, if you run into problems with your autosuggest script
after including Prototype, let me know. There’s an autocompleter
available in Scriptaculous, which is built on Prototype and thus does
not conflict with it. It’s a one or two-line change from the current
script you’re using.
Walter
On Mar 11, 2009, at 11:28 AM, Joe Crnich wrote:
Here’s the URL of the page that does the keywording:
http://crnich.dyndns.org/familyphotos/php/imageupdater2.php
I’m not doing this in Freeway, but rather hand-coding it, as the
page layout is very simple and is entirely generated by the PHP
script, along with a small amount of CSS.
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
