Event Bubbling in Visualization Table

[Kerchival]

Greetings all. I'm using a Google Visualization table in a custom web app. I've inserted buttons into each row to let the user edit or delete that line. When this button is clicked, a custom dialog appears.

My problem: I'd like to style the onMouseOver for the buttons, but the Google Visualization API is catching this event (it can be tracked using the Dev Tools in Chrome). From what I understand about event Bubbling/Capturing, it seems like Visualization API is capturing the onMouseOver, handling it, and stopping its progress.

Is there a way to disable or work around this behavior? Many thanks.

[asgallant]

I use mouseover events all the time in the Viz API tables with no problems.  How are you declaring the event handler?

[Ben Jacobs]

The handling for the button's mouse over is being handled by the jQuery UI .button() method. I'm not sure of the exact method or timing that the API uses for its event binding, but I will look into it. 

[asgallant]

I don't think timing should play into it, as events bubble from the inner elements to containers, so the 'onmouseover' event should bubble from button -> td -> tr.  If you can post your code or a link to the page, I'll take a look and see what I can find.

[Ben Jacobs]

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
        });

[asgallant]

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.

[Ben Jacobs]

Many thanks. Using the 'ready' event is very good advice and I'm going to implement that right away. 

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.

This is correct. The .html() method in jQuery only returns the contents of the element but no the element itself. btnDiv is a throw-away container for the button element, which is what actually interests me.

On Fri, Apr 27, 2012 at 9:35 AM, asgallant <drew_g...@abtassoc.com> wrote:

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.

--
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 google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.