How to pass values using Yahoo AJAX?

June 7, 2006 12:28 PM

I'm making the AJAX plunge, and working with Yahoo's AJAX User Interface Library (specifically Dialog to create form sumission dialog boxes. But I don't know how to pass values into the box that pops up.

I deconstructed their exampel enough to get a button to open a dialog with a form in it that allows a user to add a name to a list. I want to use a different button to open a different dialog box to remove a name.

How do I pass the ID of the item to remove from the button into the remove dialog?

My button:
<button onclick="YAHOO.item.container.remove.show()"> REMOVE </button>

My javascript skills are very weak, but I would guess I could put the ID into the onclick command "YAHOO.item.container.remove.show('myID'). But then what? how do I get that value to be used in the form? Am I even going about this the right way?

Finally, is there a "yahoo ajax for dummies" site I could reference, or is there an easier AJAX library I could use to cut my teeth on?

posted by jazon to computers & internet (7 comments total)

1. Try posting in the Yahoo! group for UIL. (AxMe isn't very good for highly specific technical questions)

2. Google's Web Toolkit may or may not be easier to use for your project.
posted by b1tr0t at 1:45 PM on June 7, 2006

(I know less than nothing about javascript, but played around with the GWT when it came out a few weeks back)
posted by b1tr0t at 1:54 PM on June 7, 2006

AxMe isn't very good for highly specific technical questions

I don't think that's quite fair!

Short answer, jazon, although you may have got this from the Yahoo! group by now -- what you've got with that dialog code is the front end.

It shows the form, it handles the data, it wraps it up into a little package, and then, if you're using AJAX, it sends it to a server and the server does something with it. It's your server that's got to do the deleting. Yahoo's widget sends a Post request with

data = {item:"foo"}

in it and if you want to delete "foo" not add it, you'd better have a signal in there that says "we're deleting", as in

data = {item:"foo",action:"delete"}

which you would add via a hidden field or a button or something.

I think you're confused, in other words, about the roles. The Yahoo widgets give you a nice AJAXy way to get information and ... do something with it. They don't do that second part, you do.
posted by AmbroseChapel at 4:25 PM on June 7, 2006

Thanks for the information AmbroseChapel - I am aiming to have the server do the action, but my challenge is knowing what item to act upon.

I have a list of items
1 me
2 you
3 him
4 her

and I have a button after each item. I want to click the button, have yahoo UI display a dialog saying "you're about to remove ME. Are you sure?

So, I want the button to know the ID of the item (and I can put that information into the button) but how do I get the information into the newly displayed dialog?
posted by jazon at 7:17 PM on June 7, 2006

I have also received an answer offline, and to summarize it I probably need to know more javascript than I do.

I have gone through the Yahoo UI group but a lot of what they're discussing is beyond me. I was hoping the documentation would give better explanation as well.

I get the impression that what I want answered is so easy that if I knew more javascript I'd already know the answer. I know it's possible because I see it all the time: click an event in google calendar and the info bubble pops up. Somehow I should be able to let the dialog know what item I'm clicking.

I am probably trying to run when I need to learn to crawl. I'll keep digging through Yahoo's site and forum, but if anyone can give more pointers I'm all ears.
posted by jazon at 7:23 PM on June 7, 2006

I want to click the button, have yahoo UI display a dialog saying "you're about to remove ME. Are you sure? [...] So, I want the button to know the ID of the item

Well again, the question lacks enough context for a sensible answer. How are you building your form? If you're going to dynamically create your list from an array of options, doing a document.write() for each one, then it's easy to dynamically create your buttons from that same array.

But if we don't know how the page gets created, we can't answer.
posted by AmbroseChapel at 9:16 PM on June 7, 2006

I haven't looked at the Yahoo AJAX kit, so I don't know if it is producing highly obfuscated code (like the GWT), but if it is remotely readable, I would suggest doing some reading on basic AJAX manipulations. Over the past two weeks I was able to go from understanding it as a buzzword to using it in a productive manner.
This was a very helpful source:
W3Schools
Also, depending on the data complexity, you may wish to look into the DOM Tutorial on that site as well.
posted by bastionofsanity at 7:53 AM on June 8, 2006