Yes, your second example is the (mostly) correct way to handle this. The first one won't work, because you are creating an element and applying the #button() method to the contents of the element. You then copy the HTML of the contents into the DataTable, but - here's where it breaks - javascript attaches event handlers to elements, not HTML code, so you are copying the HTML but not the handlers. It's better to insert the HTML into the table, draw the table, and then attach handlers to the elements.
The only significant change I would make to your second example is to trigger the #button() method call inside a 'ready' event handler for the table; that way you can be certain that the table is finished drawing before you begin messing with its contents. It may also be worth noting that your $(btnDiv).html() call only returns the button element, not the div itself, though if you add other things to btnDiv, then the point is moot. On Friday, April 27, 2012 12:06:43 PM UTC-4, Kerchival wrote: > > asgallant, > > Thanks for taking the time to look into this. I think I discovered a > solution, although I'm still hazy about the reasons. I'm going to include a > mock up of the non-working code and one of a working example. Hopefully > this will help someone else down the road. > > First: the context for my code is a custom app that displays records and > lets the end user modify or delete them (using buttons). Depending on > certain features of each record, different buttons are inserted into the > row. For example, a read-only line might have a button for viewing details > but not one for editing. To accomplish this, I render the Google Viz table > and then loop through the table, inserting the buttons using jQuery. > > After playing with it, I think I have an idea of what's going on, but I'm > not sure I could explain it very precisely. In essence, the first example > inserts all of the relevant HTML code and CSS classes, and the button comes > out looking correct but lacking it's "button-ness." This means it does not > have the appropriate mouse-over handling. In the second example, the HTML > and CSS are inserted into the table, but the application of "button-ness" > doesn't happen until after the table has been rendered. In this way, the > jQuery UI .button() function is interacting with something that has already > been added to the DOM. > > ------------------------------------------------------ > > Example 1: NOT WORKING - button code and .button() method from jQuery UI > is used in the DataTable.setValue() function: > > jsfiddle example (http://jsfiddle.net/beej/fyYCz/10/) > > > var btnDiv = $('<div></div>'); > $(btnDiv).append( > $('<button id="myButton">Click</button>').button({ > icons: { > primary: 'ui-icon-gear' > }, > text: false > }) > ); > > data.setValue(0, 0, $(btnDiv).html()); > > table.draw(view, { > allowHtml: true, > showRowNumber: true > }); > > > Example 2: Functioning as expected. 1) Insert button HTML, 2) Render > table, 3) Apply .button() method > > jsfiddle (http://jsfiddle.net/beej/Wuwg8/4/) > > > var btnDiv = $('<div></div>'); > $(btnDiv).append( > $('<button id="myButton">Click</button>') > ); > > data.setValue(0, 0, $(btnDiv).html()); > > table.draw(view, { > allowHtml: true, > showRowNumber: true > }); > > $('#myButton').button({ > icons: { > primary: 'ui-icon-gear' > }, > text: false > }); > > > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/t0nPQ8IHABwJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
