Hello,
I believe that your expectation about what should be happening here is not correct.
Think about the flow of events... When you change a combo box, you construct the query string and then submit that to your myAction Action. This Action prepares the data, sets the collections in request and forwards to a JSP.
What does that JSP do at this point? I'm betting it renders the entire page that you see initially, which isn't what you want.
When you use XMLHttpRequest, you aren't looking to refresh an entire page, just a portion of it. To do this, you generally will want to return just a snippet of HTML, or XML, or other data structure that you will deal with client-side (i.e., parse and create HTML on-the-fly with). It is left to you to determine which serves your purpose best.
Let's assume you want what is generally the simpler approach... what that would entail is your JSP rendering JUST the HTML that represents your <select> elements. Then, in your page you would have them all wrapped in a <span> or <div>, and upon returning, in processStateChange(), you would set innerHTML of that <span> or <div> to what you got back from the server, which is what your JSP rendered. This is precisely what my example does.
I *think* what you are expecting to happen here is that since you have put the collections in request that your JSP will know how to deal with them, and indeed that is true. But, remember that the JSP is processed server-side and returns plain HTML (generally). In the case of a normal flow of events, the browser would then display that HTML, but when using XMLHttpRequest, it is not displayed (because it might not be displayable in any way that makes sense!), it is instead returned to memory on the client, and then your event handler is called, at which point you do whatever you need to do with it. It is up to *you* to write the code to handle what the server returns <shamelessSelfPromotion>or use my AjaxTags and let it do the "heavy lifting", such as it is!</shamelessSelfPromotion>
I notice in your version of processStateChange() you in fact have a comment saying explicitly that you do nothing. That's why you see nothing happen... that is precisely the place you need to update your display, and that is soley your responsibility (unless using AjaxTags). It might be as simple as setting innerHTML as in my example, or you might construct a whole new DOM and display it, or something in between.
Let me know if you need further assistance :)
-- Frank W. Zammetti Founder and Chief Software Architect Omnytex Technologies http://www.omnytex.com
ahmet hassan wrote:
Hi all, I try to use XmlHttpRequest, but I can't successfully.I have a form which is composed of 5 select boxes and on each of them, I have onchange = "submitData()" ( taken from Zammetti's sample :)).Every combo data changes each time one changes.Anyway below the code:
<tr> <td class="cell02">Kurum Kodu : </td> <td class="cell02"> <html:select property="memberID"onchange="submitData()"> <html:option value="Tüm"/> <html:options collection = "MEMBERS_OF_INVESTOR"property="memberID"labelProperty="memberID"/>
</html:select> </td>
script is:
var req; var which;
function submitData() {
// Construct a CSV string from the entries. Make
sure all fields are
// filled in first.
m =
document.accountStateReportForm.memberID.value;
s =
document.accountStateReportForm.subAccountNo.value;
a =
document.accountStateReportForm.accountNo.value;
alert(a);
i =
document.forms.accountStateReportForm.isinType.value;
if (m == "" || s == "" || a == "" || i == "" ) {
alert("Please fill in all fields first");
return false;
}
csv = m + "," + s + "," + a + "," + i ;
// Ok, so now we retrieve the response as in all
the other examples,
// except that now we append the CSV onto the URL
as a query string,
// being sure to escape it first.
retrieveURL("fillCombosAccountStateReportReg.do?csv="
+ escape(csv));
}
function retrieveURL(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.send();
}
}
}
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
<%-- I do nothing here
document.getElementById("accCombo").innerHTML =
req.responseText; --%>
} else {
alert("Problem: " + req.statusText);
}
}
}
I send form data to myAction, I prepare them and I set
the collections data to request.
request.setAttribute("MEMBERS_OF_INVESTOR", members);
request.setAttribute("ACCOUNTS_OF_INVESTOR_MEMBER",accs);
request.setAttribute("SUB_ACCOUNTS_OF_INVESTOR_MEMBER",allSubAccountsCol);
request.setAttribute("ISINS_OF_INVESTOR_MEMBER",allIsinsCol);
return mapping.findForward("success");//REturns to the
same jsp.
But the combos don't change..?Eg:I see accounts combo
is the same before I set new values to request and
forward to my jsp.
<html:select property = "accountNo" onchange="fillCombos(this, 0)">
<html:option value="Tüm"/>
<c:forEach var="a"
items="${ACCOUNTS_OF_INVESTOR_MEMBER}">
value="<c:out value="${a.accNo}"/>"><c:out
value="${a.accNo}"/></option>
</c:forEach>
<%--<html:options collection =
"ACCOUNTS_OF_INVESTOR_MEMBER" property="accNo"
labelProperty="accNo"/> --%>
</html:select> Thanks for help ? Regards;
Özgür OKTAN
--- "Frank W. Zammetti" <[EMAIL PROTECTED]> wrote:
Sure! :)
Basically view the entire server portion as one
piece... at the end of
whatever it is that it does, it's returning HTML
(whether it's a complete
page, as usual, or just a snippet, like with Ajax
techniques usually). Whether that HTML is written directly to response in
an Action or a JSP
processes (which is writing out to response
essentially remember), it's
the same thing.
The fifth example in my webapp from the article shows this, albeit very simplistically... the Action just constructs a string from the parameters submitted, then shoves that string into a request attribute... the then forwards to a JSP, which basically does nothing but outputs the string and returns the resultant "page" (the page in this case being nothing but the string).
Imagine what the table sorting example would look like with this approach... all the outputting of HTML would be removed, we would instead do:
request.setAttribute("sortedPresidentsList", sortedPresidentsList);
...and we'd just do a normal forward to some JSP... in the JSP we might do:
<% ArrayListhm =
(ArrayList)request.getAttribute("sortedPresidentsList");
%> <table border="1" align="center" cellpadding="2" cellspacing="0"> <tr> <th
onClick="retrieveURL('example2RenderTable.do?sortField=firstName');"
onMouseOver="style.background='#c0c0c0';" onMouseOut="style.background='';">First Name</th> <th
onClick="retrieveURL('example2RenderTable.do?sortField=middleName');"
onMouseOver="style.background='#c0c0c0';" onMouseOut="style.background='';">Middle Name</th> <th
onClick="retrieveURL('example2RenderTable.do?sortField=lastName');"
onMouseOver="style.background='#c0c0c0';" onMouseOut="style.background='';">Last Name</th> <th
onClick="retrieveURL('example2RenderTable.do?sortField=firstYearInOffice');"
onMouseOver="style.background='#c0c0c0';" onMouseOut="style.background='';">First Year In Office</th> <th
onClick="retrieveURL('example2RenderTable.do?sortField=lastYearInOffice');"
onMouseOver="style.background='#c0c0c0';" onMouseOut="style.background='';">Last Year In Office</th> </tr> <% for (Iterator it = sortedPresidentsList.iterator(); it.hasNext();) { HashMap hm = (HashMap)it.next(); %> <tr> <td><%=(String)hm.get("firstName")%></td> <td><%=(String)hm.get("middleName")%></td> <td><%=(String)hm.get("lastName")%></td> <td><%=(String)hm.get("firstYearInOffice")%></td> <td><%=(String)hm.get("lastYearInOffice")%></td> </tr> <% } %> </table>
Most people would tend to do with with taglibs, but you get the picture :)
-- Frank W. Zammetti Founder and Chief Software Architect Omnytex Technologies http://www.omnytex.com
On Mon, May 2, 2005 3:20 pm, Rick Reumann said:
Frank W. Zammetti wrote the following on 5/2/2005
2:53 PM:
I think most people would tell you to forward to
a JSP to generate what
really amounts to just a snippet of HTML...
I'm confused though, you can do that? In other
words you can make an
XMLHttpRequest from one JSP that goes to an Action
and in the Action you
can forward to another JSP to write the response
and the original JSP
that called the XMLHttpRequest somehow pulls this
into the innerHTML?
Do you have an example of this?
I'm looking at your table sort and I don't want
all the complex display
and write out of the table to take place in a Java
class. I'd like to do
this in the JSP but not sure how that fits into
the Ajax cycle.
-- Rick
---------------------------------------------------------------------
To unsubscribe, e-mail:
[EMAIL PROTECTED]
For additional commands, e-mail:
[EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Discover Yahoo! Stay in touch with email, IM, photo sharing and more. Check it out! http://discover.yahoo.com/stayintouch.html
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
