8 Replies Latest reply on Sep 21, 2007 4:31 AM by Martin Taal

    How to get to the ajax4jsf client log?

    Martin Taal Newbie

      Hi,
      I have some trouble in getting spring web flow and ajax4jsf working. Using the simple echo example the submit to the bean works but the outputtext is not rerendered. I can set breakpoints in the client java script code but have difficulty seeing the error. I see however that ajax4jsf makes log.debug and log.error calls. Were do these end up, I mean where can I find the log?

      Btw, are there special configuration issues which I need to take into account when combining spring web flow and ajax4jsf?

      Thanks!

      gr. Martin

        • 1. Re: How to get to the ajax4jsf client log?
          Sergey Smirnov Master

          There is no special configuration issue. I do not think you need to debug the javascript. Ajax4jsf has been written to avoid such activity.

          Let's find the source of your problem step by step.
          First, let's upgrade to RichFaces 3.1.0. Do not forget to remove a ajax4jsf.jar from your classpath. RichFaces 3.1.0 already include this code.

          • 2. Re: How to get to the ajax4jsf client log?
            Martin Taal Newbie

            Hi Sergey,
            Thanks for the quick response!

            3.1.0 is my first try with richfaces/ajax4jsf so there was no other ajax lib before. The example works fine if I run the page outside of a spring web flow. So without starting a flow but with the rest of the configuration exactly the same, so web.xml, faces-config,xml, the jars in the lib dir are all the same for both cases. So it is not a richfaces issue afaics.

            Therefore my post is more about how I can find out what the problem is then bothering you with a swf problem. I also posted on the swf forum but got no reply there (yet).

            I debugged through the request send by the keyup and it all seemed fine. The bean.text property was set with the new value and jsf retrieved this new value. Only when rendering the old value is again used. When I open the page again the new value is shown, so it is set in the bean.

            gr. Martin

            • 3. Re: How to get to the ajax4jsf client log?
              Ilya Shaikovsky Master

              put please a4j:log on the page to get client side info about request. And paste code snippet if you'll not able to allocate the problem.

              • 4. Re: How to get to the ajax4jsf client log?
                Martin Taal Newbie

                Hi,
                Here is the output from the a4j:log, at the end it says something about no ajax response header, could that be an issue?

                gr. Martin

                NEW AJAX REQUEST !!! with form :j_id14
                debug[19:53:17,093]: Append hidden control j_id14 with value [j_id14] and value attribute [j_id14]
                debug[19:53:17,094]: Append text control j_id14:j_id16 with value [asdeghaaaabc] and value attribute [asdeghaaaab]
                debug[19:53:17,095]: Append hidden control javax.faces.ViewState with value [H4skipA==] and value attribute [H4sIskip==]
                debug[19:53:17,095]: parameter j_id14:j_id17 with value j_id14:j_id17
                debug[19:53:17,096]: Start XmlHttpRequest
                debug[19:53:17,098]: Reqest state : 1
                debug[19:53:17,099]: QueryString: AJAXREQUEST=_viewRoot&j_id14=j_id14&j_id14%3Aj_id16=asdeghaaaabc&javax.faces.ViewState=H4sIskipJh1T
                %2FweizxlKtRcAAA%3D%3D&j_id14%3Aj_id17=j_id14%3Aj_id17&
                debug[19:53:17,105]: Reqest state : 1
                debug[19:53:17,212]: Reqest state : 2
                debug[19:53:17,215]: Reqest state : 3
                debug[19:53:17,235]: Reqest state : 3
                debug[19:53:17,236]: Reqest state : 3
                debug[19:53:17,237]: Reqest state : 3
                debug[19:53:17,237]: Reqest state : 4
                debug[19:53:17,238]: Reqest end with state 4
                debug[19:53:17,238]: Response with content-type: application/xhtml+xml;charset=utf-8
                debug[19:53:17,239]: Full response content: <?xml version="1.0" encoding="utf-8"?>
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
                <html xmlns="http://www.w3.org/1999/xhtml" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:c="http://java.sun.com/jsp/jstl/core" xml:lang="en" lang="en">
                <head>
                <link rel='stylesheet' type='text/css' href='/org.elver.ui.web/a4j_3_1_0css/panel.xcss/DATB/eAFjlbr0AAAC6gHS.faces' /><link rel='stylesheet' type='text/css' href='/org.elver.ui.web/a4j_3_1_0css/spacer.xcss/DATB/eAFjlbr0AAAC6gHS.faces' /><script type='text/javascript' src='/org.elver.ui.web/a4j_3_1_0org.ajax4jsf.javascript.AjaxScript.faces'></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Elver UI Generation</title>
                <link rel="stylesheet" type="text/css" href="../css/base.css" />
                <link rel="stylesheet" type="text/css" href="../css/form-grid.css" />
                <link rel="stylesheet" type="text/css" href="../css/control.css" />
                </head>
                <script language="javascript">
                //<![CDATA[
                
                A4J.AJAX.onError = function(req,status,message) {
                 alert(message);
                };
                
                //]]>
                </script>
                <body>
                 <table align="center" style="height: 100%; width: 100%;">
                 <tr>
                 <td width="100%">
                 <table style="height: 119px">
                 <tr>
                 <td valign="middle" align="center" bgcolor="#8CA1B4" nowrap="nowrap" height="119"><img src="../gfx/1.gif" width="30" /> <img src="../gfx/logo.jpg" width="73" /> <img src="../gfx/1.gif" width="30" /></td>
                 <td width="100%" bgcolor="#8CA1B4" align="left"><img src="../gfx/header/grey/top8.jpg" height="119" /></td>
                 </tr>
                 </table>
                 </td>
                 </tr>
                 <tr>
                 <td height="25" bgcolor="#8CA1B4" class="content-small" align="left" width="100%"><img src="../gfx/1.gif" width="142" height="7" border="0" />Elver UI Generation TEST | <a href="http://www.elver.org" class="nav">Elver.org</a></td>
                 </tr>
                 <tr>
                 <td height="1" bgcolor="#ffffff"></td>
                 </tr>
                 <tr>
                 <td height="100%" width="100%">
                 <table cellpadding="0" cellspacing="0" style="height: 100%;">
                 <tr>
                 <td width="142" bgcolor="#C2D1DA" valign="top">
                <form id="j_id3" name="j_id3" method="post" action="/org.elver.ui.web/pages/BookGrid.faces" enctype="application/x-www-form-urlencoded">
                <input type="hidden" name="j_id3" value="j_id3" />
                
                 <table cellpadding="0" cellspacing="0">
                 <tr>
                 <td width="10" bgcolor="#C2D1DA" height="10"></td>
                 <td width="122" bgcolor="#C2D1DA"></td>
                 <td width="10" bgcolor="#C2D1DA"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20" class="heading">music</td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20">
                <script type="text/javascript" language="Javascript">
                //<![CDATA[
                function dpf(f) {var adp = f.adp;if (adp != null) {for (var i = 0;i < adp.length;i++) {f.removeChild(adp);}}};function apf(f, pvp) {var adp = new Array();f.adp = adp;var ps = pvp.split(',');for (var i = 0,ii = 0;i < ps.length;i++,ii++) {var p = document.createElement("input");p.type = "hidden";p.name = ps;p.value = ps[i + 1];f.appendChild(p);adp[ii] = p;i += 1;}};function jsfcljs(f, pvp, t) {apf(f, pvp);var ft = f.target;if (t) {f.target = t;}f.submit();f.target = ft;dpf(f);};
                //]]>
                </script>
                <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:0:j_id7:0:j_id9,j_id3:j_id5:0:j_id7:0:j_id9,entityName,Artist','');}return false" class="nav">Artist</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:0:j_id7:1:j_id9,j_id3:j_id5:0:j_id7:1:j_id9,entityName,Album','');}return false" class="nav">Album</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:0:j_id7:2:j_id9,j_id3:j_id5:0:j_id7:2:j_id9,entityName,Country','');}return false" class="nav">Country</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:0:j_id7:3:j_id9,j_id3:j_id5:0:j_id7:3:j_id9,entityName,Genre','');}return false" class="nav">Genre</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:0:j_id7:4:j_id9,j_id3:j_id5:0:j_id7:4:j_id9,entityName,Song','');}return false" class="nav">Song</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#C2D1DA" height="10"></td>
                 <td width="122" bgcolor="#C2D1DA"></td>
                 <td width="10" bgcolor="#C2D1DA"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20" class="heading">library</td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:1:j_id7:0:j_id9,j_id3:j_id5:1:j_id7:0:j_id9,entityName,Book','');}return false" class="nav">Book</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:1:j_id7:1:j_id9,j_id3:j_id5:1:j_id7:1:j_id9,entityName,Library','');}return false" class="nav">Library</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 <td width="122" bgcolor="#E5EBEF" height="20"><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['j_id3'],'j_id3:j_id5:1:j_id7:2:j_id9,j_id3:j_id5:1:j_id7:2:j_id9,entityName,Writer','');}return false" class="nav">Writer</a></td>
                 <td width="10" bgcolor="#E5EBEF" height="20"></td>
                 </tr>
                 <tr>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 <td width="122" bgcolor="#C2D1DA" height="1"></td>
                 <td width="10" bgcolor="#E5EBEF" height="1"></td>
                 </tr>
                 <tr>
                 <td width="100%" bgcolor="#E5EBEF" height="3" colspan="3"></td>
                 </tr>
                 <tr>
                 <td colspan="3" width="100%" bgcolor="#C2D1DA" height="100%"></td>
                 </tr>
                 </table><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sskipA==" />
                </form></td>
                 <td width="1" bgcolor="#ffffff"></td>
                 <td valign="top" style="padding: 20px; vertical-align: top;">
                <form id="j_id14" name="j_id14" method="post" action="/org.elver.ui.web/pages/BookGrid.faces" class="form" enctype="application/x-www-form-urlencoded">
                <input type="hidden" name="j_id14" value="j_id14" />
                <div class="dr-pnl rich-panel " id="j_id14:j_id15"><div class="dr-pnl-h rich-panel-header " id="j_id14:j_id15_header">Simple Echo</div><div class="dr-pnl-b rich-panel-body " id="j_id14:j_id15_body"><input type="text" name="j_id14:j_id16" value="asdeghaaaabc" onkeyup="A4J.AJAX.Submit('_viewRoot','j_id14',event,{'parameters':{'j_id14:j_id17':'j_id14:j_id17'} ,'actionUrl':'/org.elver.ui.web/pages/BookGrid.faces'} )" size="50" /><span id="j_id14:rep">asdeghaaaabc</span></div></div><img class="dr_spr rich-spacer " height="30" id="j_id14:j_id19" src="/org.elver.ui.web/a4j_3_1_0images/spacer.gif.faces" width="1" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sskipA==" />
                </form>
                
                 </td>
                 </tr>
                 </table><div id="logConsole" style="width:400;height:200;overflow:auto;"><script type="text/javascript">
                //<![CDATA[
                LOG.LEVEL = LOG.ALL;
                //]]>
                </script></div>
                 </td>
                 </tr>
                 <tr>
                 <td valign="middle" align="center" bgcolor="#85A1B4">
                 <table>
                 <tr>
                 <td width="100%" height="15" class="content-small"><a href="http://www.elver.org/license.html" class="nav">Copyright
                 © 2007 elver.org</a> - All rights reserved.</td>
                 </tr>
                 </table>
                 </td>
                 </tr>
                 </table>
                </body>
                </html>
                debug[19:53:17,240]: Header Ajax-Response not found, search in <meta>
                debug[19:53:17,240]: search for elements by name 'meta' in element #document
                debug[19:53:17,247]: getElementsByTagName found 1
                debug[19:53:17,248]: Find <meta name='null' content='text/html; charset=utf-8'>
                debug[19:53:17,248]: Header Ajax-Expired not found, search in <meta>
                debug[19:53:17,249]: search for elements by name 'meta' in element #document
                debug[19:53:17,255]: getElementsByTagName found 1
                debug[19:53:17,255]: Find <meta name='null' content='text/html; charset=utf-8'>
                warn[19:53:17,256]: No ajax response header
                debug[19:53:17,256]: Header Location not found, search in <meta>
                debug[19:53:17,257]: search for elements by name 'meta' in element #document
                debug[19:53:17,263]: getElementsByTagName found 1
                debug[19:53:17,264]: Find <meta name='null' content='text/html; charset=utf-8'>
                debug[19:53:17,264]: replace all page content with response
                debug[19:53:17,264]: call getElementById for id= org.ajax4jsf.oncomplete


                • 5. Re: How to get to the ajax4jsf client log?
                  Sergey Smirnov Master

                  could you post a code snippet of the problematic part of the page.

                  I see the whole page in Ajax response. It is not OK if you use partial update

                  • 6. Re: How to get to the ajax4jsf client log?
                    Martin Taal Newbie

                    Here is the part. I was lazy so I added a text property to the dataTableScrollerBean to support the echo example. Btw, also the scrollableTable does not work in spring web flow, but works fine outside of a spring flow.

                    <h:form styleClass="form">
                    <rich:panel header="Simple Echo">

                    <h:inputText size="50" value="#{dataTableScrollerBean.text}" >

                    <a4j:support event="onkeyup" reRender="rep"/>

                    </h:inputText>

                    <h:outputText value="#{dataTableScrollerBean.text}" id="rep"/>
                    </rich:panel>
                    <h:messages/>

                    <rich:spacer height="30" />
                    </h:form>

                    gr. Martin

                    • 7. Re: How to get to the ajax4jsf client log?
                      Ilya Shaikovsky Master

                      ok.. let us know about your configuration. I mean JSF/Facelets and other libraries and their configuration.

                      • 8. Re: How to get to the ajax4jsf client log?
                        Martin Taal Newbie

                        Hi,
                        I think I have found a solution or workaround (I am not sure which of these it is). For anyone having the same issue, here is my solution:

                        Problem:
                        When an ajaxrequest is send to the server it is also picked by Spring web flow (by their own implementation of a jsf phaselistener). Afaics based on the request web flow also forces/creates a response which one way or another replaces the ajax response. I am not sure how this occurs or why the ajax response 'disappears'.

                        Solution (or workaround):
                        The solution I have chosen is to prevent spring web flow from generating any response for an ajax request. The other parts (initialize flow execution etc.) is still executed. To implement this I have overridden the prepareResponse method of the swf FlowPhaseListener. You need your own phaselistener for this which needs to replace the jsf flow listener in the faces-config.xml.

                         protected void prepareResponse(JsfExternalContext context, FlowExecutionHolder holder) {
                         if (AjaxRendererUtils.isAjaxRequest(context.getFacesContext())) {
                         // don't let web flow do anything!
                         return;
                         }
                         super.prepareResponse(context, holder);
                         }
                        


                        Again I am not sure if this is really the best solution out there. For me it seems logical that swf should not act on ajax requests.

                        By overriding the prepareresponse other swf behavior stays the same (mainly restore and save flowexecution). I use a single key flow executor so the flow key stays stable for me. I am not sure if in another approach the flow key will change for each subsequent java request.

                        I hope this helps. If my solution has (hidden) drawbacks then ofcourse I am very interested to hear those!

                        gr. Martin