GWT Detect DOM changes or modifications

Question

What am I trying to do?

I have an existing page (generated by system automatically and I don't have any control on it) in which I am injecting GWT code to modify the behaviour of the page after it loads based on certain columns and augment the functionality of the page. For example after adding my GWT code, cells in one of the table columns become clickable and when the user clicks it, additional information is displayed to the user in a pop-up panel. All that is working fine.

What is the issue?

The generic page in which I am injecting my code has paginated table which shows 15 rows at a time. Now, when I load/refresh the page, my GWT code kicks in and sinks events in the specific column which adds functionality (described above) to the cells. However, when the user uses the left and right buttons to navigate the paginated result, the page does not refresh as it is an asynchronous call. The specific column in the new set of 15 rows is now without the sunk events as the GWT code does not know that the page changed.

I am trying to find a way to tell my GWT code that page has changed and it should sink events to the cells of specific column for the new 15 rows but unable to find any method or mechanism to help me capture a DOM/Document change event. I tried doing this but did not help:

new ChangeHandler(){

            @Override
            public void onChange(ChangeEvent event) {
                Window.alert("Something Changed");

            }

It is possible I am missing something very obvious. Posting this question to know if there is an easy way to figure out DOM changes in GWT. Have searched for DOM/Document change/mutation/ etc. without luck.

If anyone knows how to detect DOM changes in GWT would really appreciate otherwise would go ahead writing native code using native mutation observers.

Answer 1

You can try something like this:

First get the input elements with:

InputElement goOn   = DOM.getElementById("IdOfGoOnButton").cast();
InputElement goBack = DOM.getElementById("IdOfGoBackButton").cast();

Next add a native EventHandler:

Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
  @Override
  public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
    if (event.getTypeInt() == Event.ONCLICK) {
      if (event.getNativeEvent()
               .getEventTarget() != null) {
        Element as = Element.as(event.getNativeEvent()
                                     .getEventTarget());
        if (as.getTagName()
              .toLowerCase()
              .equals("input")) {
          InputElement clickedElement = as.cast();
          if (clickedElement.getId().equals(goOn.getId()) ||
              clickedElement.getId().equals(goBack.getId())) {
            // one of the paging button is pressed
          }
        }
      }
    }
  }
});

Hope that helps.