Forums

Heya. I am new at YUI(only two days since I downloaded everything), and I am trying to create a price list in a table.

Each table row represents a picture frame, and in one of the columns, I have a dropdown menu with the sizes. Certain picture frames are available only in certain sizes, so each one needs a special dropdown menu. The information is set up where the 'label' is the size(8" x 10"), and the 'value' is the price($5.00). When a size is changed, I would like the next cell over to show the price.



Unfortunately, the dropdown box just shows: "[object Object], [object Object]..."



...and I don't know how to get the updates to work.

Hi Matthew,

After reviewing your pastie code I saw a few minor items that you may want to address to help speed up your debugging. These things often crop up when cut/pasting code,
1. Your variables Size and Data aren't defined properly, you use ":" assignment and should use "=".
2. The Size variable is assigned inside of an anonymous function, "function(){ ..... }", you should remove that.
3. The price data stored in your "Data" array is defined as "Prices" but you refer to "Price" in myDS and myColumnDefs. These should be changed to "Prices" to match the data.

Those are the easy items.

The "Data" array you have created is considered to be complex data and not easily implemented in DataSource/DataTable. When using TYPE_JSARRAY the DataSource expects at some internal data level to find a simple JS array. This array should be an array of objects, where each object member (or property) name is defined as "keys" in DS and the column defs. Your "Data" array contains two object members (Frame and Prices) but "Prices" is another array of objects ... that is a no-no.

My second comment is I think you may be confusing "displaying" data in the DataTable with "editing" data in the DataTable. A lot of people get confused by YUI DataTable's "dropdown" formatter usage versus using inline cellediting "dropdown".

It really depends on what you are trying to do with you DataTable. Is your example being used for "order entry" where a user adds an order for a certain frame (i.e. BW2) and then selects a size (i.e. 4x6) and you then present a price to them? Or do you want to show what sizes / prices apply for a specific frame style?

You may want to consider re-thinking the data structures to reduce the Data array to a simple array (so DS can use it) and/or what you are doing with the dropdowns. Once you have that figured out many on this forum can help you with "formatters" versus "editors".

Todd

Hi Matthew,

Don't know if you have resolved this yet. I looked over your pastie and it seems like the JS array that your DataTable based upon is still in the wrong form. I mentioned earlier that the DataTable has to be supplied a "simple" array, meaning that one entry point leads to all singular object members. The JS array you provide to DataSource ( named "retail" ) contains two records, but the "Price" member MUST be singular, and not an array.

If your intent is to display a table of prices, then your array could be something like;

This would process fine into DataSource and will display a DataTable perfectly fine.

The dropdownOptions array of prices is usually a completely different JavaScript Array from the DataTable array. We usually setup the dropdownOptions array as a separate array (i.e. hash) within JS. It cannot be embedded within DataTable's data array.

If you checkout the YUI DataTable examples and review all of the different options for DataSource, you will see that none of them contain "complex" arrays.

Hopefully this helps a little.

Todd

Matthew,

I'm sure I am making this WAY too complicated (one of the many services I provide). The image helped convey what you are trying to do. My understanding is that your DataTable is really just meant to display prices. I assume the dropdown is intended so the user can see different prices only, for each specific frame and size. This isn't necessarily meant to serve as a "basket" or for "order processing". Is that correct ? Because there are slight differences. As for the "dt_cellediting" example, that one is a little confusing.

If every frame had exactly the same size / price combination this would be a piece of cake. You would just define a simple array (call it mySizes) that would contain the options and define a column as formatter:"dropdown" with dropdownOptions:mySizes. But if I understand correctly, each frame can have different sizes and potentially different prices per size. That is where it gets complicated.

I worked up an example from your pastie that is self-contained and handles different size/price combos for different frame sizes. It re-uses your "retail" array with some embellishments. Then use the "retail" array as a basis for creating the actual DataTable array, which is slightly different. I attach a listener to changes on the dropdown to update the "price" column on a change. The link to the source code on gist is https://gist.github.com/1098292. You should be able to drop this in and fire it off and it seems to work.

Should you want to do an order processing / shopping basket type thing that is a little more complicated, but doable.

Hope this is closer to what you were trying ...

Todd

Works great in Chrome and Firefox, but not so well in Internet Explorer. The 'Price' field never updates for some reason in IE 8... Haven't tested on IE7 nor IE9 yet...