HTMLPane content problems

[blazej]

Hi,

I have code that sets up an HTMLPane with a <span> and a <canvas> inside:

    final Label label = new Label( "Please click here to REFRESH the graphic" );
    label.addClickHandler( new ClickHandler() {
      @Override
      public void onClick( final ClickEvent event )
      {
        drawCanvas();
      }
    } );
    addMember( label );

    final HTMLPane pane = new HTMLPane();
    pane.setWidth100();
    pane.setHeight( 200 );
    pane.setContents( "<span id='kiwispan'>This is fake text</span><br><canvas id='kiwicanvas' style='border: solid 1px;'></canvas>" );
    addMember( pane );

When I run the app, both dynamic elements appear in the browser. However, when I click the REFRESH label to draw on the canvas, document.getElementById() returns null (I get "(TypeError): Cannot read property 'id' of null").

The same code executes properly when I run it from Chrome's debug console.

Why is this happening?

  /**
   * A test Javascript function to draw on HTML5 canvas, based on
   * http://diveintohtml5.org/canvas.html.
   */
  public static native void drawCanvas() /*-{
    var span = document.getElementById( "kiwispan" );
    alert( span.id );
  }-*/;