Combining three AjaxTextFields with a JavaScript Handler
This example consists of three AjaxTextields :
First Name, Last Name and Phone Number
Each of them acts similarly to the single AjaxTextField of the previous example.
But now, selecting one of the text fields, the other two fields are filled simultaneously with
their correspondig data.
This is accomplished by '?'-postfixing the types in the renderer parameter
and adding a simple JavaScript handler.
The '?'-postfix means: Don't insert the data on select but delegate the action to
the JavaScript handler
(detailed description).
(TelephoneBook.java, TelephoneBookEntry and phonebook.txt are some helper classes / ressource, that are used in the examples to AjaxTextField)
Note
This is static documentation.
You can see this example live
JSHandler.html
<form jwcid="@Form" listener="listener:onSubmit">
First Name :
<input type="text" jwcid="first@sotacs:AjaxTextField" value="ognl:''"
size="10" jsHandler="select"
items="items:byFirstName" renderer="normal?,more!,singleResult?" />
Last Name :
<input type="text" jwcid="name@sotacs:AjaxTextField" value="ognl:''"
size="10" jsHandler="select"
items="items:byName" renderer="normal?,more!,singleResult?" />
Phone :
<input type="text" jwcid="phone@sotacs:AjaxTextField" value="ognl:''"
size="10" jsHandler="select"
items="items:byPhone" renderer="normal?,more!,singleResult?" />
</form>
<table jwcid="@If" condition="ognl:false" >
<tr jwcid="normal@Any">
<td>{0}</td><td>{1} {2}</td>
</tr>
<tr jwcid="more@Any">
<td colspan="2"><span style="color: green;">{0} more results...</span></td>
</tr>
<tr jwcid="singleResult@Any">
<td><table>
<tr><td colspan="2" style="background: white;font-size:18pt;" align="center">
<b>{0}</b></td></tr>
<tr><td>First Name : </td><td><b>{1}</b></td></tr>
<tr><td>Last Name : </td><td><b>{2}</b></td></tr>
<tr><td>Age : </td><td><b>{3}</b></td></tr>
</table></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function select(fields){
document.getElementById('phone').value = fields[0];
document.getElementById('first').value = fields[1];
document.getElementById('name').value = fields[2];
}
</script>
JSHandler.java
public abstract class JSHandler extends BasePage {
private void getEntries(TelephoneEntryField field, ItemWriter writer, String prefix) {
prefix = prefix.trim();
if(prefix.length() == 0) return;
List<TelephoneBookEntry> results =
TelephoneBook.getInstance().getEntries(field, prefix);
if(results.size() == 1){
//singleResult
TelephoneBookEntry entry = results.get(0);
writer.writeTypedItem("singleResult",
entry.getTelephone(), entry.getFirstName(), entry.getName(), ""+entry.getAge());
return;
}
int z = 0;
for (TelephoneBookEntry entry : results) {
if(z++ == 6){
writer.writeTypedItem("more",String.valueOf(results.size() - 6));
return;
}
writer.writeTypedItem("normal",entry.getTelephone(), entry.getFirstName(), entry.getName());
}
}
public void byPhone(ItemWriter writer, String prefix) {
getEntries(TelephoneEntryField.PHONE, writer, prefix);
}
public void byName(ItemWriter writer, String prefix) {
getEntries(TelephoneEntryField.NAME, writer, prefix);
}
public void byFirstName(ItemWriter writer, String prefix) {
getEntries(TelephoneEntryField.FIRSTNAME, writer, prefix);
}
}