sourcforge > sotacs
 

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}&nbsp;{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&nbsp;Name&nbsp;&nbsp;: </td><td><b>{1}</b></td></tr>
			<tr><td>Last&nbsp;Name&nbsp;&nbsp;: </td><td><b>{2}</b></td></tr>
			<tr><td>Age&nbsp;&nbsp;: </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);
	}
}