This is my jsp page (which is a modal page to another jsp page ) which contains a table, a form, a javascript and ajax .
<%# include file="/WEB-INF/includes/taglibs.jsp" %>
<script type="text/javascript"
src="${pageContext.request.contextPath}/ajax/prototype.js"></script>
<script type="text/javascript" xml:space="preserve">
function invoke(form, event, container) {
var params = Form.serialize(form, {submit:event});
new Ajax.Updater(container, form.action, {method:'post', parameters:params});
}
</script>
<display:table name="actionBean.currentAidApplicantYear.comments" id="result" class="maui">
<display:column property="lastUpdatedBy" title="Last Updated By" sortable="true"/>
<display:column property="lastUpdatedTimestamp" title="Last Updated Date"
format="{0,date,MM/dd/yyyy HH:mm}" sortable="true"/>
<display:column property="comment" title="Memo"/>
</display:table>
<div class="actionBar" style="margin-top: 20px; text-align: center;">
<stripes:form beanclass="${actionBean.class}" id="addMemoForm" method="POST">
<tags:labelAndValue label="Comment" name="comment" >
<stripes:textarea id="commentTextArea" name="comment.comment" cols="75"/>
</tags:labelAndValue>
<stripes:submit name="saveCommentAjax" value="Add Memo"
onclick="invoke(this.form, this.name, 'result');"/>
<stripes:hidden name="id" />
</stripes:form>
</div>
And this is part of the action bean which extends another class which in turn implements ActionBean, ValidationErrorHandler
Public class CommentsTab extends AbstractAidApplicantTab {
private AidApplicantYearComment comment;
public AidApplicantYearComment getComment() {
return comment;
}
public void setComment(AidApplicantYearComment comment) {
this.comment = comment;
}
public Resolution saveCommentAjax(){
String result = String.valueOf(comment.getComment());
comment.save();//build up the comment object
//by this time the comment object will save the string comment, user who updates it and a //time stamp. Those are the three variables that are displayed on the jsp table.
return new StreamingResolution("text/html",new StringReader(result));}
//here instead of returning just a string “result” I prefer to return a comment object or //the three values I wanted to display on a table. How can I do that?
When the submit button is clicked I use an ajax to call an action bean’s method to do some operation and the function returns a streaming resolution (StreamingResolution("text/html",new StringReader(result));). Once I get the response I wanted to refresh the table without refreshing the page. However, in order to do that I have to get an object (a comment object) from the response not a text (or may be an array of Strings which might contain the values of the object)
Any help would be appreciated. Thank you
Use a JavaScriptResolution, or (better IMHO),
transform your Comment object into a JSON String (using one of the myriads of free Java JSON encoders available),
return that JSON String as a StreamingResolution
use the native JSON functions in the browser (if you target recent browsers) or a JS library containing a JSON parsing function to transform the JSON string into a JavaScript object.
Related
Problem: Sometimes you will want to access a component from javascript with
getElementById, but id's are generated dynamically in JSF, so you
need a method of getting an objects id. I answer below on how you can do this.
Original Question:
I want to use some code like below. How can I reference the inputText JSF component in my Javascript?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>
Update: this post Client Identifiers in JSF2.0 discusses using a technique like:
<script type="javascript" >
function myFunc() {
alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
}
</script>
<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
Suggesting that the attribute id on the inputText component
creates an object that can be accessed with EL using #{myInptTxtId},
in the above example. The article goes on to state that JSF 2.0 adds
the zero-argument getClientId() method to the UIComponent class.
Thereby allowing the #{myInptTxtId.clientId} construct suggested
above to get the actual generated id of the component.
Though in my tests this doesn't work. Can anyone else confirm/deny.
The answers suggested below suffer from drawback that the above
technique doesn't. So it would be good to know if the above technique
actually works.
You need to use exactly the ID as JSF has assigned in the generated HTML output. Rightclick the page in your webbrowser and choose View Source. That's exactly the HTML code which JS sees (you know, JS runs in webbrowser and intercepts on HTML DOM tree).
Given a
<h:form>
<h:inputText id="emailAddresses" ... />
It'll look something like this:
<form id="j_id0">
<input type="text" id="j_id0:emailAddress" ... />
Where j_id0 is the generated ID of the generated HTML <form> element.
You'd rather give all JSF NamingContainer components a fixed id so that JSF don't autogenerate them. The <h:form> is one of them.
<h:form id="formId">
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
This way the form won't get an autogenerated ID like j_id0 and the input field will get a fixed ID of formId:emailAddress. You can then just reference it as such in JS.
var input = document.getElementById('formId:emailAddress');
From that point on you can continue using JS code as usual. E.g. getting value via input.value.
See also:
How to select JSF components using jQuery?
Update as per your update: you misunderstood the blog article. The special #{component} reference refers to the current component where the EL expression is been evaluated and this works only inside any of the attributes of the component itself. Whatever you want can also be achieved as follows:
var input = document.getElementById('#{emailAddress.clientId}');
with (note the binding to the view, you should absolutely not bind it to a bean)
<h:inputText binding="#{emailAddress}" />
but that's plain ugly. Better use the following approach wherein you pass the generated HTML DOM element as JavaScript this reference to the function
<h:inputText onclick="show(this)" />
with
function show(input) {
alert(input.value);
}
If you're using jQuery, you can even go a step further by abstracting them using a style class as marker interface
<h:inputText styleClass="someMarkerClass" />
with
$(document).on("click", ".someMarkerClass", function() {
var $input = $(this);
alert($input.val());
});
Answer: So this is the technique I'm happiest with. Doesn't require doing too much weird stuff to figure out the id of a component. Remember the whole point of this is so you can know the id of a component from anywhere on your page, not just from the actual component itself. This is key. I press a button, launch javascript function, and it should be able to access any other component, not just the one that launched it.
This solution doesn't require any 'right-click' and see what the id is. That type of solution is brittle, as the id is dynamically generated and if I change the page I'll have to go through that nonsense each time.
Bind the component to a backing bean.
Reference the bound component wherever you want.
So here is a sample of how that can be done.
Assumptions: I have an *.xhtml page (could be *.jsp) and I have defined a backing bean. I'm also using JSF 2.0.
*.xhtml page
<script>
function myFunc() {
var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")
alert("The email address is: " + inputText.value );
}
</script>
<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
BackBean.java
UIInput emailAddyInputText;
Make sure to create your getter/setter for this property too.
Id is dynamically generated, so you should define names for all parent elements to avoid j_id123-like ids.
Note that if you use jQuery to select element - than you should use double slash before colon:
jQuery("my-form-id\\:my-text-input-block\\:my-input-id")
instead of:
jQuery("my-form-id:my-text-input-block:my-input-id")
In case of Richfaces you can use el expression on jsf page:
#{rich:element('native-jsf-input-id')}
to select javascript element, for example:
#{rich:element('native-jsf-input-id')}.value = "Enter something here";
You can view the HTML source when this is generated and see what the id is set to, so you can use that in your JavaScript. As it's in a form it is probably prepending the form id to it.
I know this is not the JSF way but if you want to avoid the ID pain you can set a special CSS class for the selector. Just make sure to use a good name so that when someone reads the class name it is clear that it was used for this purpose.
<h:inputText id="emailAddresses" class="emailAddressesForSelector"...
In your JavaScript:
jQuery('.emailAddressesForSelector');
Of course you would still have to manually manage class name uniqueness.
I do think this is maintainable as long as you do not use this in reusable components. In that case you could generate the class names using a convention.
<h:form id="myform">
<h:inputText id="name" value="#{beanClass.name}"
a:placeholder="Enter Client Title"> </h:inputText>
</h:form>
This is a small example of jsf. Now I will write javascript code to get the value of the above jsf component:
var x = document.getElementById('myform:name').value; //here x will be of string type
var y= parseInt(x,10); //here we converted x into Integer type and can do the
//arithmetic operations as well
I have a thymeleaf index.html where I access my model attribute in a standard way:
<body>
<th:block th:text="${myModel}"></th:block>
</body>
Now I'm execute an ajax request and get another html part from my controller and set it to my index.html.
#GetMapping(value="/part")
public String getPart(Model model) {
model.addAttribute("somePart", "hello partial html!");
return "part";
}
The ajax request and the page rendering works as expected. But in this part of the html I'm not able to access my previous set ${myModel}. Is there a way to achieve that?
First sorry I am using my phone.
XHR requests don't behave the same as regular Http requests in Spring MVC. It's a little difficult to get a model attribute with Ajax because Ajax doesn't expect a view (where the model injects its data). You have 2 choices to solve your problem.
1- The easiest way, add directly your data in the response body, annotate your handler with '#ResponseBody' and return the data you want not a view name.
2- A bit twisted, your handler method should return a 'ModelAndView' but Ajax will receive the full view, when I say "full view" I mean all the text inside the view where you want to render your model.
I'll edit this answer to add some codes if you don't see what I mean.
CODE
I did the test :
#GetMapping( "/part" )
public ModelAndView getPart( Map<String, String> model ) {
model.put( "somePart", "hello partial html!" );
return new ModelAndView( "part", model ); // part = the view name
}
The view code part.html:
<div>
<h1>This is the view containing the model : ${somePart} </h1>
<p>With other information....</p>
<p>Please note that this view doesn't contain neither "head" nor "body" tags</p>
</div>
Ajax call : EDIT 2
$(function(){
var myModel = "${myModel}"; //get the value of your previous model
$.get("part",function(data){
$("div.show-part-view").html(data);//in index.html add a div tag with class="show-part-view"
$("p.my-model").html(myModel); // in the part.html view add <p class="my-model">...
});
In index.html add the <div class="show-part-view">...</div> where you want.
Result :
https://i.stack.imgur.com/iGzgg.jpg
He is currently working on code that has to filter the data in the table. Ajax will call the link and gets the response (json) results with answer. However, I came across a problem. I have to somehow render tables and I do not want to do this by append etc.
Can I somehow again generate views or blade file?
The default view is DefController#index but ajax use url which controller is DefController#gettabledata.
public function gettabledata($id){
return response()->json(Def::find($id)->getallmy->all());
}
You can put the part in your template corresponding to the table in a separate .blade.php file, and #include that in your main layout.
main.blade.php :
<html>
...
<body>
<div class="table-container">
#include('table')
</div>
</body>
...
And
table.blade.php:
<table>
#foreach($rows as $row)
<tr>
<td> $row->title ... </td>
</tr>
#endforeach
</table>
In this way you can use a simple jQuery $('div.table-container').load(url) and on your server just render and respond that part as an html string. return view('table', $data)
Javascript:
function refreshTable() {
$('div.table-container').fadeOut();
$('div.table-container').load(url, function() {
$('div.table-container').fadeIn();
});
}
The answer is yes, you can. Webinan certainly pointed you in the right direction. This approach is slightly different.
First things first, you need a seperate view for the table. A very basic example for the HTML markup:
<div class="table-container">
#include('partials.table') // this view will be async loaded
</div>
We start by making a call to the server with jQuery (can be done with Javascript too) using the shorthand ajax function: var $request = $.get('www.app.com/endpoint');. You can also pass along any data to your controller on the backend.
Now on the serverside, within your controller, render and return the table view:
class EndpointController extends Controller
{
/**
* Returns a rendered table view in JSON format.
*
* #param Request $request
* #return \Illuminate\Http\JsonResponse
*/
public function ajax(Request $request)
{
$html = view('partials.table', compact('view'))->render();
return response()->json(compact('html'));
}
}
If everything worked out, the done callback will be triggered. Simply grab the html variable and set it as the content of the table's container.
function renderTable() {
var $request = $.get('www.app.com/endpoint'); // make request
var $container = $('.table-container');
$container.addClass('loading'); // add loading class (optional)
$request.done(function(data) { // success
$container.html(data.html);
});
$request.always(function() {
$container.removeClass('loading');
});
}
Hope this helps!
To update and change page content without reloading the page in Laravel 5.4 i do the following:
First create the blade view in the "views" folder called "container.blade.php" it will contain the following code (in this case a select box that is rendering a list of abilities from the package Bouncer (but you can use the #foreach on any Laravel collection you like):
<select>
{{ $abilityList = Bouncer::role()::where('name','admin')->first()->getAbilities()->pluck('name') }}
#foreach ( $abilityList as $ab )
<option value="{{ $ab }}">{{ $ab }}</option>
#endforeach
</select>
Add this to you main blade file (e.g. home.blade.php) making sure to use a div with an id you can reference:
<div id="abilityListContainer">
#include('container')
</div>
Now on your main blade file (e.g. home.blade.php) add a button that will trigger the function that will communicate with the Laravel controller:
<input type="button" value="reload abilities" onClick="reloadAbilities()"></input>
Then add the javascript for this function, this loads the generated html into your div container (note the "/updateAbility" route next to ".get" - this is a Laravel route which we will set up in the next step):
var reloadAbilities = function()
{
var $request = $.get('/updateAbility', {value: "optional_variable"}, function(result)
{
//callback function once server has complete request
$('#abilityListContainer').html(result.html);
});
}
Now we set up the Laravel route for this action, this references our controller and calls the function "updateAbilityContainer". So edit your /routes/web/php file to have the following route:
Route::get('updateAbility', array('as'=> 'updateAbility', 'uses'=>'AbilityController#updateAbilityContainer'));
Finally in app/Http/Controllers make the file "abilityController.php" (you can also use "php artisan make:controller abilityController"). Now add this function to process the changes, generate the html and return it to the javascript function (note you may also have to use the namespaces as well):
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
class AbilityController extends Controller
{
public function updateAbilityContainer()
{
// use this if you need to retrieve your variable
$request = Input::get('value');
//render and return the 'container' blade view
$html = view('container', compact('view'))->render();
return response()->json(compact('html'));
}
}
Thats it, your blade "container" will now reload when you click the button and any changes to the collection you are rendering should update without reloading the page.
Hopefully this fills in some blanks left in the other answers. I hope it works for you.
Problem: Sometimes you will want to access a component from javascript with
getElementById, but id's are generated dynamically in JSF, so you
need a method of getting an objects id. I answer below on how you can do this.
Original Question:
I want to use some code like below. How can I reference the inputText JSF component in my Javascript?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>
Update: this post Client Identifiers in JSF2.0 discusses using a technique like:
<script type="javascript" >
function myFunc() {
alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
}
</script>
<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
Suggesting that the attribute id on the inputText component
creates an object that can be accessed with EL using #{myInptTxtId},
in the above example. The article goes on to state that JSF 2.0 adds
the zero-argument getClientId() method to the UIComponent class.
Thereby allowing the #{myInptTxtId.clientId} construct suggested
above to get the actual generated id of the component.
Though in my tests this doesn't work. Can anyone else confirm/deny.
The answers suggested below suffer from drawback that the above
technique doesn't. So it would be good to know if the above technique
actually works.
You need to use exactly the ID as JSF has assigned in the generated HTML output. Rightclick the page in your webbrowser and choose View Source. That's exactly the HTML code which JS sees (you know, JS runs in webbrowser and intercepts on HTML DOM tree).
Given a
<h:form>
<h:inputText id="emailAddresses" ... />
It'll look something like this:
<form id="j_id0">
<input type="text" id="j_id0:emailAddress" ... />
Where j_id0 is the generated ID of the generated HTML <form> element.
You'd rather give all JSF NamingContainer components a fixed id so that JSF don't autogenerate them. The <h:form> is one of them.
<h:form id="formId">
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
This way the form won't get an autogenerated ID like j_id0 and the input field will get a fixed ID of formId:emailAddress. You can then just reference it as such in JS.
var input = document.getElementById('formId:emailAddress');
From that point on you can continue using JS code as usual. E.g. getting value via input.value.
See also:
How to select JSF components using jQuery?
Update as per your update: you misunderstood the blog article. The special #{component} reference refers to the current component where the EL expression is been evaluated and this works only inside any of the attributes of the component itself. Whatever you want can also be achieved as follows:
var input = document.getElementById('#{emailAddress.clientId}');
with (note the binding to the view, you should absolutely not bind it to a bean)
<h:inputText binding="#{emailAddress}" />
but that's plain ugly. Better use the following approach wherein you pass the generated HTML DOM element as JavaScript this reference to the function
<h:inputText onclick="show(this)" />
with
function show(input) {
alert(input.value);
}
If you're using jQuery, you can even go a step further by abstracting them using a style class as marker interface
<h:inputText styleClass="someMarkerClass" />
with
$(document).on("click", ".someMarkerClass", function() {
var $input = $(this);
alert($input.val());
});
Answer: So this is the technique I'm happiest with. Doesn't require doing too much weird stuff to figure out the id of a component. Remember the whole point of this is so you can know the id of a component from anywhere on your page, not just from the actual component itself. This is key. I press a button, launch javascript function, and it should be able to access any other component, not just the one that launched it.
This solution doesn't require any 'right-click' and see what the id is. That type of solution is brittle, as the id is dynamically generated and if I change the page I'll have to go through that nonsense each time.
Bind the component to a backing bean.
Reference the bound component wherever you want.
So here is a sample of how that can be done.
Assumptions: I have an *.xhtml page (could be *.jsp) and I have defined a backing bean. I'm also using JSF 2.0.
*.xhtml page
<script>
function myFunc() {
var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")
alert("The email address is: " + inputText.value );
}
</script>
<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
BackBean.java
UIInput emailAddyInputText;
Make sure to create your getter/setter for this property too.
Id is dynamically generated, so you should define names for all parent elements to avoid j_id123-like ids.
Note that if you use jQuery to select element - than you should use double slash before colon:
jQuery("my-form-id\\:my-text-input-block\\:my-input-id")
instead of:
jQuery("my-form-id:my-text-input-block:my-input-id")
In case of Richfaces you can use el expression on jsf page:
#{rich:element('native-jsf-input-id')}
to select javascript element, for example:
#{rich:element('native-jsf-input-id')}.value = "Enter something here";
You can view the HTML source when this is generated and see what the id is set to, so you can use that in your JavaScript. As it's in a form it is probably prepending the form id to it.
I know this is not the JSF way but if you want to avoid the ID pain you can set a special CSS class for the selector. Just make sure to use a good name so that when someone reads the class name it is clear that it was used for this purpose.
<h:inputText id="emailAddresses" class="emailAddressesForSelector"...
In your JavaScript:
jQuery('.emailAddressesForSelector');
Of course you would still have to manually manage class name uniqueness.
I do think this is maintainable as long as you do not use this in reusable components. In that case you could generate the class names using a convention.
<h:form id="myform">
<h:inputText id="name" value="#{beanClass.name}"
a:placeholder="Enter Client Title"> </h:inputText>
</h:form>
This is a small example of jsf. Now I will write javascript code to get the value of the above jsf component:
var x = document.getElementById('myform:name').value; //here x will be of string type
var y= parseInt(x,10); //here we converted x into Integer type and can do the
//arithmetic operations as well
I am creating a GUI using dojo slider. Beside the slider there is a text box which will be used to display the current value of the slider.
What I want is that each time the slider is slided, the current value of the slider appears on the text box. Next, this value will be used in further calculation and the result will be displayed on another textbox.
What I have been doing is: inside the dojo slider, I call a javascript function which passes the current value of the slider.
Inside the javascript function, I want to pass the argument of the function into a java code inside the function. The argument will be used by the java code to do a calculation.
My problem is that I could not pass the argument to the java code. My question is how can I do that?
Below is the coding I have written:
<head>
<script type="text/javascript">
dojo.require("dijit.form.Slider");
dojo.require("dijit.form.TextBox");
dojo.ready(function(){
var slider = new dijit.form.HorizontalSlider({
name: "slider",
value: dojo.byId("walluvalueinit").value,
minimum: 0,
maximum: 1,
discreteValues:11,
intermediateChanges: true,
style: "width:300px;",
onChange: function(value){
dojo.byId("walluvalue").value = value;
changewalluvalue(value); //CALLING FUNCTION changewalluvalue()
}
}, "slider");
});
</script>
</head>
<body class="claro">
<jsp:useBean id="beanAnalysis" class="bean.Analysis" scope="application"/>
<script>
function changewalluvalue(value){
<%
ExteriorUnheatedGroundLossCalculation eug = new ExteriorUnheatedGroundLossCalculation();
//MORE CALCULATIONS
//SET U VALUES PROPERTY IN ExteriorUnheatedGroundLossCalculation
eug.setWallUValue(value); //THE ARGUMENT "value" SHOULD BE PASSED HERE
====more java code=====
%>
}
</script>
<form id="form1" name="form1" method="post" action="">
<tr>
<td width="150">Wall U Value</td>
<td width="411" align="center" valign="middle"><div id="slider"></div></td>
<td width="154" align="center" valign="middle"><label for="walluvalueinit"></label>
<input type="text" name="walluvalueinit" id="walluvalueinit" value="${beanAnalysis.wallUValue}"/></td>
<td width="152" align="center" valign="middle"><label for="walluvalue"></label>
<input type="text" name="walluvalue" id="walluvalue" /></td>
</tr>
<td colspan="2" align="center">Transmission Loss</td>
<td align="center" valign="middle"><label for="transmissionlossinit"></label>
<input type="text" name="transmissionlossinit" id="transmissionlossinit" value="${beanAnalysis.transmissionLoss}"/></td>
<td align="center" valign="middle"><label for="transmissionloss"></label>
<%--CALCULATION RESULT WILL BE DISPLAYED HERE--%>
<input type="text" name="transmissionloss" id="transmissionloss" /></td>
</form>
</body>
It's likely you'll need to use AJAX to pass the value to your Java code. I guess Dojo has some utilities for that. You'll also need to instrument your Java code to deal with the requests and to perform the actual logic.
It won't work because client-side JavaScript in a JSP cannot call server side Java methods. You have two options: (1) implement your calculation in JavaScript instead, or (2) do an Ajax call to a server-side service that performs the calculation.
Your calculation code should be a regular servlet, designed specifically to do the logic/calculations you require. JSP pages are best for providing HTML and/or direct renderable content.
Remember, once the page is served, any javascript on the page is executed on the client/browser. You no longer have direct access to Java structures. You must use AJAX to communicate back to the server. Have the servlet you invoke return a JSON object containing the results of the calculation.
On the client-side, use dojo.xhr (Get or Post version) and set the handleAs property to 'json'. For example:
dojo.xhrGet({
// URL to servlet that will do computation for us on the server
url: url_to_calc_servlet,
// Tell Dojo to handle return value as a JSON string, so dojo will
// auto-convert it into an Object.
handleAs: 'json',
// Specify request parameters to servlet as an object of
// name/value pairs.
content: {
sliderValue: XXX
},
// Define callback function for dojo to call when servlet returns
load: function(response) {
// response will be the object your servlet returned
// ... access response data and update page accordingly...
}
});
Check the Dojo documentation for more information about dojo.xhr.