Lesson 5: Script the data grid

Now that you have declared the grid, you can write the necessary JavaScript that loads the data from our MovieService Java object, and to bind that data to the grid.

To script the data grid:

Create the populateGrid JavaScript function declared in the previous lesson:
In the Source view of ShowMovies.jsp, add the following code inside the <head> tag :
```
<script type="text/javascript">
// Issue an asynchronous request to the server for data
function populateGrid() {
	dojo.xhrGet({
url: "/web2Project/RPCAdapter/httprpc/MovieService/getMovieList",
		load: fillGrid,
		error: handleError,
		handleAs: 'json'
		});
}
</script>
```
The populateGrid function contains one function call that represents the core functionality of your application. dojo.xhrGet executes an asynchronous request to the URL specified by url. When the response from the URL is returned, the function specified by load is called and the response is passed to that function. error is called if there is a problem during the processing of the response. handleAs determines how the response is structured. In this tutorial, the RPC Adapter returns the data as JSON.

Tip: To save time when typing the URL for the dojo.xhrGet calls that invoke the RPC Adapter services, right-click the service method in the Page Data view and click Copy Service URL to Clipboard. You can then paste the URL after url:.
Create the load function declared in populateGrid:
In the Source view of ShowMovies.jsp, add the following code inside the <script> tag that you added in the first step of this lesson:
```
// Process the response to the asynchronous request
function fillGrid(data, ioArgs)
{
	var newData = {
			identifier: "title",
			items: data.result
	};
			
	var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
	var grid = dijit.byId("grid.DataGrid");
	grid.setStore(dataStore);
	}
```
The code you just wrote binds the data to the model of the grid. By calling setData the Dojo grid is automatically populated with the data returned from the asynchronous request. The RPC Adapter JSON result sets are always structured with a top-level object called result; therefore, the reference to the result set is data.result.
In the <script> tag that holds the dojo.require statements, add the requirements for the ItemFileReadStore package dojo.require("dojo.data.ItemFileReadStore");
Create the handleError function declare in populateGrid:
In the Source view of ShowMovies.jsp, add the following code inside the <script> tag that you added in the first step of this lesson:
```
function handleError() {
		alert("An error occurred while invoking the service.");
}
```

ShowMovies.jsp source looks like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page
	language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<html>
<head>
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";

@import "dojo/dijit/themes/nihilo/nihilo.css";

@import "dojo/dijit/themes/dijit.css";

@import "dojo/dojox/grid/resources/Grid.css";

@import "dojo/dojox/grid/resources/nihiloGrid.css";
</style>

<script type="text/javascript" src="dojo/dojo/dojo.js"
	djConfig="isDebug: false, parseOnLoad: true"></script>

<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>

<script type="text/javascript">
// Issue an asynchronous request to the server for data
function populateGrid() {
	dojo.xhrGet({
		url: "/web2Project/RPCAdapter/httprpc/MovieService/getMovieList",
		load: fillGrid,
		error: handleError,
		handleAs: 'json'
		});
}
// Process the response to the asynchronous request
function fillGrid(data, ioArgs)
{
	var newData = {
			identifier: "title",
			items: data.result
	};
			
	var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
	var grid = dijit.byId("grid.DataGrid");
	grid.setStore(dataStore);
}

function handleError() {
	alert("An error occurred while invoking the service.");
}
</script>

<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body class="nihilo">
<div class="heading">Movies Grid</div>
<button dojotype="dijit.form.Button" label="Load Movies"
	onClick="populateGrid"></button>
<table dojotype="dojox.grid.DataGrid" id="grid.DataGrid"
	autoWidth="true">
	<thead>
		<tr>
			<th field="title">Name</th>
			<th field="actor">Actor</th>
		</tr>
	</thead>
</table>
</body>
</html>

To test the Web page:

In the Enterprise Explorer view, right-click MovieService.jsp, then select Run As > Run on Server. The Run On Server window opens.
In the servers list, select WebSphere Application Server v7.0, then click Finish.

ShowMovies.jsp opens in a browser.

When you click Load Movies, the grid is populated with the data without refreshing the Web page. The request for the data and the update of the Grid were made asynchronously.

The grid is updated with data without refreshing the Web page.

Lesson 5: Script the data grid

Lesson checkpoint