CODEWITHSUNDEEP
javascripthtmlgwt
Ineze
Ineze

Reputation: 389

GWT won't access updated HTML by javascript

I was trying to implement a javascript time picker for my GWT app, as there aren't any good enough GWT time picker widgets out there. After successfully getting the javascript working and changing values directly on the page, when I try to get that value onto GWT, like this:

Element e = DOM.getElementById("time");

The HTML inside this element is the "old" one, that is, the HTML with which the page was started.

For instance, the initial HTML is this:

<input type="text" name="time" id="time" class="mobiscroll scroller" readonly="" value="11:23 AM"/>

And the final one is 

<input type="text" name="time" id="time" class="mobiscroll scroller" readonly="" value="09:45 PM"/>

I never get the 09:45 PM, only the 11:23 AM. I've tried accessing "time" with DOM.getElementById and RootPanel.get, but they've given me the same result.

Does anyone know what I'm doing wrong, or any way to work around this? By the way, the javascript Time Picker I'm using is mobiscroll.

Upvotes: 2

Views: 361

Answers (2)

Ineze
Ineze

Reputation: 389

Ok, I've managed to get this to work. My field was being created on GWT with the HTML widget, since I couldn't find a way to inject the id, class and other parameters that mobiscroll needed to identify the input and work with it.

However, I found out that you can do this:

time_text.getElement().setId("time");
time_text.getElement().setClassName("mobiscroll");

And that basically solved my problem, because now GWT can access the time_text TextBox without any problems by time_text.getText(); and the javascript has the needed values to identify my input.

This ended up being a silly problem, and I apologize if my question wasn't clear enough.

Upvotes: 1

Scott Bailey
Scott Bailey

Reputation: 363

If you're using UiBinders with GWT the usual way you would do this is by tagging the element with ui:field="name" in your ui.xml file, then access the element's state in your owning widget using an annotated @UiField element.

For example:

public final class DatePickerWidget extends Composite {

  @UiField InputElement input;
  @UiField Button saveButton;

  @Inject
  DatePickerWidget() {
    initWidget(binder.createAndBindUi(this));
  }

  @UiHandler("saveButton")
  void handleSendClick(ClickEvent event) {
    input.getValue();
  }

  private static final Binder binder = GWT.create(Binder.class);
  interface Binder extends UiBinder<Widget, DatePickerWidget> {}
}

And a UI.xml file:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder
   xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
   xmlns:ui="urn:ui:com.google.gwt.uibinder">

  <ui:style>
    .button-style {
        background: blue;
    }
  </ui:style>

  <gwt:HTMLPanel>
    <input ui:field="input"/>
    <gwt:Button ui:field="saveButton" styleName="{style.button}" />
  </gwt:HTMLPanel>

</ui:UiBinder>

If you'd like to make a more reusable date-time picker widget, you might also consider having your widget implement HasValue. Implementing this interface will provide users of the widget with events whenever contents change.

Upvotes: 0

Related Questions