How to get to the ajax4jsf client log?| JBoss.org Content Archive (Read Only)

1. Re: How to get to the ajax4jsf client log?

sergeysmirnov Sep 20, 2007 12:10 PM (in response to mtaal)

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?

mtaal Sep 20, 2007 12:45 PM (in response to mtaal)

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 Sep 20, 2007 1:36 PM (in response to mtaal)

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?

mtaal Sep 20, 2007 1:55 PM (in response to mtaal)

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?

sergeysmirnov Sep 20, 2007 3:08 PM (in response to mtaal)

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?

mtaal Sep 20, 2007 3:17 PM (in response to mtaal)

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 Sep 21, 2007 4:29 AM (in response to mtaal)

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?

mtaal Sep 21, 2007 4:31 AM (in response to mtaal)

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