CSCI 6962: Server-side Design and Programming

AJAX Tools in JSF and ASP

AJAX in JSF

• JavaScript automatically generated for AJAX calls• Editable components can be “AJAX enabled”

– Changes to component value directly change liked bean member variables without page submit

– Equivalent to using request.send to send parameters• Other components can be “re-rendered” with current

bean values without page refresh– Equivalent to using request.responseText and JavaScript to

change value

The <f:ajax Tag

• Placed inside component tag to AJAX enable:

<h:component…> <f:ajax event=“component event” execute=“scope of ajax” render=“component list”/></h:component>

<f:ajax Synatax

• Causes server-side AJAX call when occurs in browser• Anything that has an onEvent in JavaScript

– click: mouse clicked on component– focus: mouse enters component– blur: mouse clicked outside component– keydown: key pressed in text component– keyup: key released in text component– …

<f:ajax Render

• Defines which components update their corresponding member variables via AJAX– @this: Just this component (default)– @form: All components on same form (good for buttons)– @all: All components on page– @none

• Defines which components have their client-side value updated from bean– AJAX-enabled get called for linked member variable– Can be space-separated list of component ids

Simple Example• Output field echoes greeting for name in input field when

used clicks away

Simple Example• Output field echoes greeting for name in input field when

used clicks away• Input field AJAX enabled• Fires on blur event (when focus outside textfield)

– Changes name property of bean• Output field linked as render property

– Gets greeting property of bean

Button Events

• Use @form scope to include all components• Can use default click event

Validation• AJAX renders <h:message tag for error message

– Can be list of tags to validate multiple fields

• Can still define action for button– Redirected to that page if no errors– No redirection if any field invalid

Timer Events

• No built-in timers in JSF (yet)• Must manually create JavaScript timer as before

– “run” function called every second

Timer Events

• Hack: JavaScript function causes event on some JSF AJAX-enabled object– Refer to it using the id of the component and the form it

is on– Call its default event (click for buttons)

Timer Events

– Can make “invisible” by setting display style to “none– Give component and form id so JavaScript can access – Hidden component can render non-hidden fields

AJAX in ASP

• Done with controls in ASP– AJAX Extensions toolbox

• ScriptManager: Generates client-side scripts– Before other AJAX controls, one per page– Asynchronous server access

• UpdatePanel: Area on screen for AJAX controls– Events inside panel use AJAX instead of postback

AJAX in ASP

• Example: Asynchronous “greeting” label– Controls inside UpdatePanel

AJAX in ASP• Code behind called without causing postback

• JavaScript functions automatically included

Validation and AJAX

• Put control and its validator inside UpdatePanel– Validation done client-side

• Must use Response.Redirect to transfer to next page– Since code being run on client, Server.Transfer will not work

Timer Events in ASP

• Timer: causes postbacks at regular intervals– Interval property: Number of ms between postbacks– Put inside UpdatePanel for asynchronous postbacks

Timer Events in AJAX

• _Tick event called in code behind