struts-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Frank W. Zammetti" <fzli...@omnytex.com>
Subject Re: ajax proj
Date Sun, 08 May 2005 20:52:42 GMT
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" <fzlists@omnytex.com> 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:
>>
>>user-unsubscribe@struts.apache.org
>>
>>>For additional commands, e-mail:
>>
>>user-help@struts.apache.org
>>
>>>
>>
>>
> ---------------------------------------------------------------------
> 
>>To unsubscribe, e-mail:
>>user-unsubscribe@struts.apache.org
>>For additional commands, e-mail:
>>user-help@struts.apache.org
>>
>>
> 
> 
> 
> 
> 		
> 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: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
> 
> 
> 
> 
> 




---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Mime
View raw message