gwtjquery-selectorsgwtquerygquery

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


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.


Solution

  • 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);
        }
      });