Grails: How do I make a g:textfield to load some data and display it in other g:textfield??

Question

I have two g:textfields in the first one I should write a number lets say 12 and in the g:textfield next to it it should load the predetermined name for number 12.

The first one is named 'shipper' and the other 'shipperName' Whenever I write the code 12 in the 'shipper' txtfield, it should return the name of the shipper in the 'shipperName' box.

Thanks in advance!

Examples:

If I write the number 12 it should return USPS

And every number should have a different 'shipperName'

Thanks again!

Answer 1

That's quite easy if you'll use jQuery. Check out the event handlers ("blur" is the one you want which occurs when the user leaves the numerical box).

For example:

$("#shipper").blur(function() { 
    $("#shipperName").load(
        "${createLink(controller: 'shipper', action: 'resolveShipper')}?id=" +
        $("#shipper").val()
    );
});

The $(this).val() at the end is the value of the input field the user just left.

And the "ShipperController.resolveShipper" action would look something like this:

def resolveShipper = {
    render text: Shipper.get(params.id).name, contentType: "text/plain"
}

There are other things you might want to do, like automatically filling in the shipperName field as the user types without leaving the edit field, probably after a delay. However the event handler stays the same, just the event is changing (from "blur" to "change" or something like this)

Answer 2

To relate two strings, it's easiest to use an object to create a dictionary/ map, as shown below;

$('#input1').bind('keyup',function() {
     var map = {
         "1":"One",
         "2":"Fish",
         "3":"Bar"
     };

     $('#input2').val(map[$(this).val()]);
});

You can see this in action here: http://www.jsfiddle.net/dCy6f/

If you want the second value only to update when the user has finished typing into the first input field, change "keyup" to "change".