VisualEvent and DataTables

ruzz

Hi Allan

Firstly, congrats on VE - excellent little tool. I've just begun playing with it and noticed something odd/wrong/buggy:

When you have a DT with an event attached to each of the DT's TRs, the VE highlighting (blue in this case since they're HTML/TR dblclick handlers) obscures the events attached to the TDs and elements inside the TDs (buttons, imgs etc). The blue block extends right across the table...

Visually, I can see the various icons (up/down arrows, "c" etc) on the TDs and their children, but mousing over them reveals nothing at all because of the problem stated above.

Said another way, it's like the cascade (in the CSS sense) is backwards - at the very least, the innermost (i.e. most specific/local) element should appear uppermost (TD "above" TR). Here, I believe, the TR is "above" a TD.

Hope I made that clear!

ruzz

allan

Hi ruzz,

Good point! I've never been particularly happy with how Visual Event deals (or doesn't it could be said!) with what are effectively layered events. The reason for the layering is basically the order in which the events are read by Visual Event - this could be the order the events were assigned by a JS library, the way they are cached, or the library type itself. It would be nice to be able to parse through the DOM and layer the events on a child / nesting basis - but it might require a few more clock cycles, and we would then be left with the problem of how to get to the TR element events under the TD!

So what I've done is to add a double click event handler to the event element (the transparent colour) which will hide the event. So just double click on a block to hide it and get access to the ones below. You can press the space key to restore all event blocks to visibility.

Regards,
Allan

ruzz

Thanks Allan - if that was in the documentation I missed it. Sorry.

So, yes, that works - sort of. It certainly clears away the large blue TR block. However, when the events (your icons, I mean) are densely packed inside smaller TDs and their contents, when I dblclick to remove one, the dblclick can sometimes affect (bubbling maybe?) more than the icon receiving the original dblclick and a whole bunch can suddenly disappear. Were they to disappear from the same TD, I'd kind of understand - but they actually disappear from each TD in the same column from each row. I know. Strange!

I've tried a number of times to get a handle on exactly what is happening - but it seems almost random as to the exact pattern of failure (a real pain I know - you need precise repetition steps). And no I can't share the URL - intranet stuff.

Only thing I can say is, this is roughly the setup:

1 - datatable set to 100% width - dblclick handler applied to TRs.
2 - one large TD (95% width of table) followed by...
3 - two more TDs - tiny... of course with 5% to work with - images/buttons as content - these are jQuery.button() buttons (so all the events that $.button() would apply). In VE you should see a lot of "c" icons plus a few arrows etc.

Of course, the problem is compounded by each and every row in the table (and hence why, probably, it's hard to repeat the exact steps since maybe the layering of events icons over and over differs a little from row to row?)

Anyway - this is not going to make planes fall from the sky ;) I just get the distinct impression you actually enjoy the problem solving and feedback (sicko) ;)

ruzz

allan

Hi ruzz,

Yeah I like a challenge :-). The double click feature wasn't documented (and actually still isn't), I just added it this morning based on your post.

I've put up an example here: http://datatables.net/dev/events.html - it has dblclick events on the TR elements and click events on the TD elements. It seems that Visual Event is doing more or less what I would expect here. Load Visual Event and then double click to remove a cell, then double click again and you remove the TR, then one more double click - and nothing...

The reason for this, and more general why bubbling shouldn't be an issue here is that the elements used by Visual Event are all absolutely positioned - therefore there is nothing for it to bubble up to, the events just stop there. Beyond that, there is the canvas element in the background which will swallow all events, stopping them from getting to the page when Visual Event is active.

It should be that the only way to trigger an event while Visual Event is active is through the 'trigger event' option in the pop-ups (although obviously mousemove etc will still fire and not get swallowed).

One thing that would mess this up is if any element has a z-index higher than 55000, which is what Visual Event takes for the layout.

Regards,
Allan

ruzz

Hi Allan

this mate, http://datatables.net/dev/events.html is an event "desert" compared to mine ;) Let me figure out how put a pic up some place so you can see what I'm dealing with - and trust me, I can dblclick one 'c' and a whole bunch will (sometimes) disappear.

ruzz

ruzz

Allan - sorry for the delay... got busy with other things.

Anyway, the pics I promised:

Before VE activation: http://ruzz.fileave.com/dt-no-ev.JPG

After: http://ruzz.fileave.com/dt-ev.JPG

Like I said before, "densely packed". Randomly, when clicking to remove one of those "c" icons a bunch of them with disappear.

ruzz

allan

Haha! That's awesome - nice one :-)

My guess as to what is happening is that and when you remove one element (you remove the element's display, not just a single event handler) - you are going to be removing a whole lot of events, which will cause a reflow and the display update. Hence the clump of them disappearing.

I'm thinking what for this kind of situation the best way of handling it would be to display the events in a table (possibly per element?) and allow them to be sorted through that way. Not a bad idea for a new version of Visual Event... Even cooler would be a 3D display where you could see the events layered upon their target element...

Regards,
Allan

ruzz

Allan said : > the best way of handling it would be to display the events in a table (possibly per element?) and allow them to be sorted through that way

Yep. I'd also suggest you consider that what you're doing with VE is supplying a panel of key info currently missing from Firebug.

That might help guide your thinking ;)

ruzz

allan

Heh - it had crossed my mind, and would probably make some things easier (like supporting each individual library). It would be a good addition to something like Firebug... The one advantage of being a bookmarklet is that it's cross browser :-).

Allan