{$title}

After checking out the latest WACT build from CVS, integration of Ajax functionality became a whole lot easier. This is a simple example of using the Prototype and Script.aculo.us javascript libraries to implement a rich UI with WACT. First of all, the controller itself:


addParameter(new PostParameter('name'));
 		$responder->addPublicChild('search', $searchCommand);
 		
 		$this->addPublicChild('responder', $responder);
 		$this->setDefaultChildName('responder');
 		
 		$responder->addChild('searchResponse', new ViewController(new View('/results.html')));
 		
 		$this->setView(new AppView('/application.html'));
 	}
 	
 	function search(& $sender, & $request, & $responseModel){
 		$results = array(array('name' => 'Winnipeg'),
				 array('name' => 'Toronto'),
				 array('name' => 'Auckland'),
				 array('name' => 'Singapore'),
				 array('name' => 'Penang'));
		$results[] = array('name' => $request->getParameterValue('name'));
                //we're not doing any real filtering here, just sending content back to the client browser
 		$responseModel->set('results', $results);
                //returning searchResponse will redirect control to the ViewController in the new controller
                //architecture.
		return 'searchResponse';
	}
	
 }
 
 class AppView extends View{
 	function AppView($templateFile){
 		parent::View($templateFile);
 	}
 	
 	function prepareModel(& $source, & $request, & $responseModel){
		$responseModel->set('title', 'Application Controller');
		$responseModel->set('page_header', 'Demonstration of new WACT Controller Architecture');
	}
 }
 
 $app =& new Application;
 $app->start();
 
?>

Here's our HTML template (application.html)











{$title}



{$page_header}

Auto-Suggest:

The script block below automagically performs the linking of the textbox(ac1), the Ajax request and the response container(ac1update). When the value of the textbox changes, the onchange event will be triggered and the Prototype framework will compose a complete POST request to '/samples/controllers/application.php/search'. 'application.php/search' will direct the request to the CommandController named 'search' that's been registered as the child of the root PathInfoDispatchController.

The results array will be populated in results.html





{$name}

The populated template will be sent back as the response to the POST request made by the autocompleter. Once the autocompleter receives the response from the server, it will insert the unordered list into the container specified (ac1update) as innerHTML. And there you have it, Ajax goodness with WACT!