Twitter Hovercards in GWT PagingScrollTable

Question

How do you implement Twitter Hovercards in GWT PagingScrollTable?

The Hovercard links work fine when, say, I add new Label("@ded") to a HorizontalPanel. However the Twitter JavaScript function doesn't seem to apply when I put "@ded" into a PagingScrollTable row.

I'm a JavaScript newbie.

In response to Igor's request, here's some more details. According to the Twitter docs I put a couple of scripts into the <head> of my HTML file:

<script src="http://platform.twitter.com/anywhere.js?id=myId&v=1"
        type="text/javascript"></script>
<!-- Twitter @Anywhere Hovercards -->
<script type="text/javascript">
    twttr.anywhere(function (T) {
        T.hovercards();
    });
</script>

Then the Hovercards work as described above, except in a GWT PagingScrollTable. For example, I've implemented an AbstractColumnDefinition whose getCellValue() method returns "@ded". The "@ded" appears in the table, but it doesn't seem to be recognized by the scripts---the "ded" part is not underlined as it is outside the table (the Twitter doc shows an example of working Hovercards).

Looking at it with a web inspector, I see that new Label("@ded") appears as

<div class="gwt-Label">
    "@"
    <a class="twitter-anywhere-user" href="http://twitter.com/ded">ded</a>
</div>

but in the last row of my table I see

        <tr style="background:#fafafa;" class>
            <td class>@ded</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

And I've found an error in the logs when I page the table and try to invoke the second script as JSNI, but only when the rows are loaded from cached data:

04:15:51.280 [ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (ReferenceError): Can't find variable: twttr  
 line: 3  
 sourceId: 4675433328  
 expressionBeginOffset: 209  
 expressionCaretOffset: 214  
 expressionEndOffset: 214   
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:195)    
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
    ...

Could you elaborate more? Maybe a screenshot of both situations and some source code? — Igor Klimer, Aug 12 '10 at 06:39
Interesingly, the demos don't work in Opera ;) Anyway, is that the precise output of your last row of your table? Because there shouldn't be any "alone" `class` attributes. As for the exception (Can't find variable: twttr) - when is it thrown? Always? Or only when you use the PagingScrollTable? And I presume you put Twitter's JS code only in your host HTML page? (and not in your UiBinder templates, etc) — Igor Klimer, Aug 13 '10 at 11:35
@Igor Yes, the solitary "class" looks odd, but that seems to be the way the Safari Web Inspector displays an empty value; in FireBug you see @ded. The two scripts are in the of my single HTML page. I'm not using UiBinder. — Glenn, Aug 13 '10 at 16:17
@Arthur: I noted in the second paragraph that the Hovercards work in a Label in a HorizontalPanel (which is an HTML table), and I gave the view of the working tag from Web Inspector in the second code block above. I also checked that they work in a in the HTML file. — Glenn, Aug 13 '10 at 16:22
@Igor Your question about when the Exception is thrown is a good one. It is only thrown when the table is loaded with cached data (for those who don't know, PagingScrollTable uses a CachedTableModel that stores rows before and after the visible rows), not when new rows are downloaded. — Glenn, Aug 13 '10 at 16:26
The `Can't find variable: twttr` exception would point to problems with the way GWT handles JSNI (not that you are using it here) - you have to reference the host HTML page via `$wnd` because GWT's code is run in a iframe (to prevent namespace clashes). I'm not a JS expert (that's why I chose GWT ;)) and it's a long shot, but try with `$wnd.T.hovercards();` - maybe `PagingScrollTable` does some crazy stuff behind the scenes ;) Also, what happens if you dynamically add a `Label` (or something similar that works for you) - does it get its hovercard? — Igor Klimer, Aug 13 '10 at 17:04
@Igor: The Label in the HorizontalPanel mentioned in the second paragraph is dynamically added and works fine. Having worked with PagingScrollTable for a while, I can confirm that it does crazy stuff; I haven't figured out this particular crazy stuff, yet. Unfortunately, $wnd.T.hovercards() makes no difference. — Glenn, Aug 14 '10 at 04:55
Eh, I meant `$wnd.twttr.anywhere`. But either way, I remember someone from the GWT team mentioning on one of the GWT presentations on Google IO that the `PagingScrollTable` was full of bugs and more of a "testing field" then a production ready widget. Have you tried the new data presentation widgets in GWT 2.1? (http://code.google.com/webtoolkit/doc/latest/ReleaseNotes.html) I don't know at which stage they are atm, but there are samples available - maybe it's worth investigating, since it's unlikely that `PagingScrollTable` will be further developed. — Igor Klimer, Aug 14 '10 at 11:33

Twitter Hovercards in GWT PagingScrollTable

0 Answers0