How to get the value of a textbox adjoining a button with gwt query

Question

I have a custom widget like this, it's basically a couple of text boxes and buttons along with them.

<g:VerticalPanel>
    <b:Label>Lower Limit</b:Label>
    <b:TextBox ui:field="lowerLimit" addStyleNames="lowerLimitTextBox"></b:TextBox>
    <b:Button icon="COPY" addStyleNames="copyAll copyAllLower">Copy To All</b:Button>
</g:VerticalPanel>

<g:VerticalPanel>
    <b:Label>Upper Limit</b:Label>
    <b:TextBox ui:field="upperLimit" addStyleNames="upperLimitTextBox"></b:TextBox>
    <b:Button icon="COPY" addStyleNames="copyAll copyAllUpper">Copy To All</b:Button>
 </g:VerticalPanel>

There are many of these widgets on a page. When a button is clicked I want to be able to select the text box to it's left and copy that value to all the corresponding widgets.

I can select the buttons but don't know how to select the textbox to it's immediate left. Can anyone help with this.

I'm adding the jQuery-selectors tag as the selector might be similar to that of GwtQuery.

Answer 1

Well, first you have to know how a VerticalPanel is rendered so as you can figure out where is the text box in the dom.

VerticalPanel is rendered as a table, and each widget is positioned into a structure: <tr><td>widget</td></tr>

In your case you can use closest() and prev() to get the previous tr of your button:

$(button).closest("tr").prev();

Then use find() to get the input inside the previous tr

$(button).closest("tr").prev().find("input")

So using the gquery ability of finding Widgets, the code for each button in your UI could look like:

  button.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
      TextBox box = $(button).closest("tr").prev().find("input").widget();
      for (TextBox b :  $(".gwt-TextBox").widgets(TextBox.class) ) {
        b.setValue(box.getValue());
      }
    }
  });

Although if you wanted to use gquery to enhance all buttons at once, everything is much simpler:

  $(".gwt-Button").click(new Function(){
    public void f() {
      String value = $(this).closest("tr").prev().find("input").val();
      $(".gwt-TextBox").val(value);
    }
  });