Basic Customization > User Interface Customization > Customizing HTML Clients Using the Windchill JSP Framework > Customizing Generic Aspects of JSP Pages > Customizing the UI with Ajax > Solution > Making an Ajax Call in Windchill
  
Making an Ajax Call in Windchill
You can make your own Ajax request to the server for data whenever the techniques described above do not meet your needs.
Element
Type
Description
requestHandler.doRequest
Javscript
A Javascript “class” with methods for making Ajax requests
getElementHtml
Javascript
Javascript function that can update part of the page. Uses the requestHandler to fetch the new html from the server.
Procedure – Making an Ajax Call
To make Ajax calls in Windchill, use the requestHandler.doRequest() JavaScript method. You provide this method with the URL to call on the server and other optional parameters, if desired. It returns a response, which is a JavaScript XMLHttpRequest object.
The following example shows how this method is used in Windchill to reset a hidden field in the DOM called “itemTypeInstanceId” when the user changes the value in the object type picker of an object creation wizard.
<script>
.
.
.
var params = ‘pickerVal=’ + elementVal; // elementVal is the new value of the type picker
var options = {
asynchronous: false,
parameters: params
};
var url = “netmarkets/jsp/components/resetItemTypeInstanceId.jsp”;
var response = requestHandler.doRequest(url, options);
var newTypeInstanceId = response.responseText;
element = document.getElementById(currentObjectHandle +
“itemTypeInstanceId”);
element.value = newTypeInstanceId;
.
.
.
</script>
In this case, the “pickerVal” parameter is passed to the jsp in the request parameters. The jsp makes a call to a server method to compute a new TypeInstanceIdentifier for the object and passes it back in the response:
<%
String pickerChoice = request.getParameter("pickerVal");
String typeInstanceIdentifier =
createBean.getNewTypeInstanceIdStringForNewItem(pickerChoice);
out.clearBuffer();
out.write(tiid);
out.flush();
%>
By default, doRequest() will make an asynchronous request so that page processing is not blocked while waiting for a response. If you want the request to be synchronous you must set asynchronous to false in the options passed to the method, as shown above.
If the request is to be asynchronous, you will need to provide a JavaScript function to call when the response is received successfully in the options parameter to doRequest(). For example:
var options={
asynchronous: true,
parameters: 'oid=' + oid,
onSuccess: function(response) {
var response = response.responseText;
var json = response.evalJSON();
var locationValue = json.locationValue;
var folderOid = json.folderOid;
setFolder(window, locationValue, folderOid);
}
};
In the example above, the jsp that is invoked calls a Java tag that writes a JSON object to the response.
<req:getFolderAndContactByOidTag oidString="${param.oid}" />
Rather than define the onSuccess function inline, you can just specify the name of a function to be called:
onSuccess: handleResponse,
In addition to an onSuccess callback, you can optionally specify a onFailure callback function. If you do not specify an onFailure callback, the error response will just be logged to the JavaScript console.