JSNI (GWT-GWTP): jQuery does not select node in 'document ready' function after ready event fires

Question

I am trying to select a div node based on its CSS ID, and change the div's text, all with jQuery (2.2.0). My problem is that jQuery selection never seems to happen normally?

• That jQuery selection code (below, where I'm using the '$' shorthand for 'jquery' fucntion) is within a standard 'document ready' callback function so that the div with CSS ID is "supposedly" ensured to be in the DOM by the time the callback is called. That js code, and its standard JSNI $wnd syntax, resemble the Answers from JSNI GWT jquery.
• All of this jQuery js is within a GWT JSNI native method (GWT 2.7.0).
• My project is a GWTP (1.5.1) project.
• All observations are reproduced across different browser, and in both Production and Dev Modes.

I'll explain from this code how I have confirmed the JSNI native method renderTree() is called, the 'document ready' event fires, and the div with CSS ID is in the DOM...

public native void renderTree()/*-{
    $wnd.alert("renderTree");

    $wnd.$($doc).ready(function() {     
        $wnd.alert("DOM ready!");

        $wnd.$('#gramTree').text("text changed from JSNI jQuery");
    });
}-*/;

1. I call that renderTree() from the constructor of a GWT View class (and more specifically, it is a GWTP-extended ViewWithUiHandlers)
2. When the View's page loads, "renderTree" pops up in an alert window: That proves renderTree() JSNI method is called when I intend, as renderTree's first line is that $wnd.alert.
3. Immediately after that, "DOM ready!" pops up in an alert window: That proves the 'document ready' event fires and its callback is called. That is because the callback is registered to the event also in renderTree() JSNI, and the callback's first line is that $wnd.alert

4. Up until now, 1.-3. all happen as expected... But the jQuery $ selection of '#gramTree' never seems to happen, as the div with that ID never has its text change to "text changed from JSNI jQuery" (its text loads from UiBinder initially as "text initialized from UiBinder", and stays that way).

   • I expected the selection should happen as it is the 2nd line in the 'document ready' callback, and 3. proved the callback is called.
   • div with ID #gramTree sure is in the DOM because I can see it in the browser inspector, and I can see its initial text ("text initialized from UiBinder") rendered. That initial text is what is supposed to change to "text changed from JSNI jQuery" from the 'document ready' callback. The div, its CSS ID, and its initial text are declared in the GWT UiBinder for my View.

5. I can manually get the text to change at this point by manually entering on the browser console the jQuery code line that does not seem to work from the callback ($('#gramTree').text("text changed from JSNI jQuery");). Similarly, I can also get it to manually work by coding renderTree() to call from the click event of a button also on the page, and manually clicking that button at this point.

Any ideas what is going wrong here?

It seems by educated guess, given 4.-5., that something isn't working right with the 'document ready' event, or how how I am handling it?

Any ideas of things to further check on?

Thanks!

Answer 1

You should rely on View Lifecycle in order to be sure that it is attached to DOM. from GWTP ViewImpl#onAttach doc

Method called after the view is attached to the DOM. You should override this method to perform any ui related initialization that needs to be done after that the view is attached and that the presenter doesn't have to be aware of (attach event handlers for instance)

in your case, when $wnd.$('#gramTree').text("text changed from JSNI jQuery"); is called #gramTree element is not attached to DOM and not visible to jQuery.