Forums

Hi,

First off - thanks for the excellent software!. I am a relative newbie to JavaScript (familiar with jQuery and trivial DOM manipulation) and complete novice with YUI.

I have managed to cobble together an Accordion which is managed (items added/removed) by an Ajax JSON DataSource (via setInterval). Works well.

The use-case is that a user needs to triage tickets - the GUI polls the GUI for new tickets, and if any appear, they appear via the accordion; each ticket being a Y.AccordionItem, the contents of which is a non-trivial form (let's stick with a couple of drop downs and a submit button for now.

Now, my question is what is the right way to do this? I am currently doing the following (don't laugh ):

- bodyContent is a copy of a template <div> (using the template-x method from the todo list example). I insert the AccordionItem and then get the contentBox. To this I attach the JSON for the ticket.
- I attach a delegate listener to all "submit" "buttons" inside the accordion using the Y.one('...').delegate('click', f(), 'button) method - works well

(hold on to your seat belts :....)

On click I navigate up the dom to the Node that is the contentBox, retrieve the JSON data I earlier attached, navigate back *down* to the various drop downs and retrieve their data.

This works, but yuck - talk about fragile and verbose.

Ideally I would like to do something similar to the todo example - create Ticket(s) which extend Widgets and encapsulate the form. The problem is one, I haven't quite got to that understanding yet and secondly, how would I attach said custom widget to the accordion pane? All I can see is accordionItem.set('bodyContent', someHtml);

Finally - I am trying to change the height of the item label to be higher than the 25px it is currently set to - I want it to be three lines of layed out <div>s. When I do this however I see lots of repeating icons... Any hints?

Ironically, I know I could have cobbled together something that works (or rather googled and pasted) for jQuery by now but I want to do this "properly" and YUI, whilst quite "weighty" feels much more sustainable, once I finally understand it.

(ok, one more - are there any good books about YUI3?)

Thanks!

Col

Hi Iliyan,

Thanks for your help.

I have read that widget page but I still don't get it I'm afraid. IIUI then a Widget is used to encapsulate both the rendering and the events, so I would want a Widget which displayed the form *and* exposed some event with the form data so my app can process it. I don't see how I can achieve that.

To be explicit, which of the following are you suggesting:

- I extend AccordionItem
- I create my own Widget and set the AccordionItem's contentBox to by my Widget's contentBox
- I create my own Widget, capture the HTML and use setBody to that HTML

I agree that the documentation is really really good, that is why I chose to go with this rather than dojo, but there is a *lot* of it (which is good!) to process before really getting it.

Alternatively, it would *really* help if you could knock up a hello world demonstrating the accordion with forms - I am sure other people would find it really helpful as well?

Regardless - thanks for your help so far!