Myfaces Trinidad JSF: Ajax problem when sending Non US-ASCII Characters

Question

Myfaces Trinidad JSF: Ajax problem when sending Non US-ASCII Characters

3.3k views Asked by Tomas Narros At 25 February 2011 at 11:52

The Issue:

We have a Java web application, based on Apache MyFaces Trinidad. We are facing some problems when trying to partial submit (that's it: via Ajax) a form, when a field contains some special characters, such as Ñ, á, etc.

When we write a value like camión at the text field, the resulting message is Hola cami (it drops the special char, and the next one).

The application server we are runnign our code at is IBM WebSphere AS 7.0.

This behaviour has been observed on IExplorer and Firefox browsers, all run from Windows XP Professional (spanish version).

Main code snippets:

UPDATE: based on lkdg's answer (thanks), I have updated the JSP and resulting HTML code snippets.

JSP Page Code:

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>  
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>  
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr" %>  
<%@ taglib uri="http://myfaces.apache.org/trinidad/html" prefix="trh" %>  

<f:view>  
    <tr:document>  
        <trh:head title="Prueba de AJAX con todas las Cabeceras">  
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
        </trh:head>  

        <tr:form>
        <tr:panelHorizontalLayout halign="left">
            <f:facet name="separator">
                <tr:spacer width="10" height="5"/>
            </f:facet>

            <tr:inputText id="elCampo" label="Your name" value="#{commandButtonBean.name}"
                          requiredMessageDetail="Name is required"

                          />
            <tr:commandButton id="sayHello" text="Say Hello"
                              partialSubmit="true" 
                              action="#{commandButtonBean.sayHello}"
                              />
        </tr:panelHorizontalLayout>

        <tr:spacer height="15px"/>
        <tr:outputText value="#{commandButtonBean.message}" partialTriggers="sayHello" 
                       inlineStyle="font-weight: bold;"/>
        </tr:form>
    </tr:document>  
</f:view>

This is the resulting HTML output (removed some empty lines):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!--Start: org.apache.myfaces.trinidad.Document["j_id_jsp_1876237926_1"]--><html dir="ltr" lang="es-ES">
  <head>
    <meta name="generator" content="Apache MyFaces Trinidad">

    <link rel="stylesheet" charset="UTF-8" type="text/css" href="/ModuloTrinidadPilotoWeb/adf/styles/cache/bigfont-desktop-nur72r-ltr-gecko.css">
  </head>
  <!--Start: org.apache.myfaces.trinidad.Document["j_id_jsp_1876237926_1"]-->
  <body onload="_checkLoad()" onunload="_checkUnload(event)"><script type="text/javascript">var _AdfWindowOpenError='Se ha detectado un bloqueo de ventana emergente en el explorador. Estos bloqueos interfieren con el funcionamiento de esta aplicación. Desactívelo o permita elementos emergentes desde esta dirección.';</script><script type="text/javascript" src="/ModuloTrinidadPilotoWeb/adf/jsLibs/Common1_2_10.js"></script><!--Start: org.apache.myfaces.trinidad.Document["j_id_jsp_1876237926_1"]--><div id="tr_pprBlockingDiv" onclick="return _pprConsumeClick(event);" style="position:absolute;left:0;top:0;width:0;height:0;cursor:wait;" onkeydown="return false;" onkeyup="return false;" onmousedown="return false;" onmouseup="return false;" onkeypress="return false;"></div><a name="top"></a>

    <noscript>Esta p&aacute;gina utiliza JavaScript y necesita un explorador activado para JavaScript. Su explorador no est&aacute; activado para JavaScript.</noscript>
    <!--Start: org.apache.myfaces.trinidad.Head["j_id_jsp_1876237926_2"]-->
    <head>
      <title>Prueba de AJAX con todas las Cabeceras</title>

      <meta name="generator" content="Apache MyFaces Trinidad">

      <link rel="stylesheet" charset="UTF-8" type="text/css" href="/ModuloTrinidadPilotoWeb/adf/styles/cache/bigfont-desktop-nur72r-ltr-gecko.css">

           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
        </head>

    <!--Start: org.apache.myfaces.trinidad.Form["j_id_jsp_1876237926_3"]-->
    <form id="j_id_jsp_1876237926_3" name="j_id_jsp_1876237926_3" style="margin:0px" method="POST" onkeypress="return _submitOnEnter(event,'j_id_jsp_1876237926_3');" action="/ModuloTrinidadPilotoWeb/jsp/sgtc/pruebaAjax2.faces"><!--Start: org.apache.myfaces.trinidad.Panel["j_id_jsp_1876237926_4"]--><table cellpadding="0" cellspacing="0" border="0" summary=""><tr>
          <td><!--Start: org.apache.myfaces.trinidad.Input["elCampo"]--><table id="elCampo__xc_" class="af_inputText" cellpadding="0" cellspacing="0" border="0" summary=""><tr>
                <td class="af_inputText_label" nowrap><span id="elCampo::icon" style="display:none;"><a name="_msgAnc_elCampo" title="Error" class="AFErrorIconStyle">X</a></span>&nbsp;<label for="elCampo">Your name</label></td>

                <td valign="top" nowrap class="AFContentCell"><!--Start: org.apache.myfaces.trinidad.Input["elCampo"]--><input id="elCampo" name="elCampo" class="af_inputText_content" size="30" type="text"></td>
              </tr><tr>
                <td></td>

                <td class="AFComponentMessageCell"><!--Start: org.apache.myfaces.trinidad.Input["elCampo"]--><span id="elCampo::msg" class="OraInlineErrorText"></span></td>

              </tr></table></td>

          <td><!--Start: org.apache.myfaces.trinidad.Object["j_id_jsp_1876237926_5"]--><img src="/ModuloTrinidadPilotoWeb/adf/images/t.gif" alt="" width="10" height="5"></td>

          <td><script type="text/javascript">var _pprUpDatemode=false;function _adfspu(f,v,e,s,o){_pprUpdateMode=true;if(!o)o=new Object();if(e)o.event=e;if(s)o.source=s;_submitPartialChange(f,v,o);}</script><!--Start: org.apache.myfaces.trinidad.Command["sayHello"]-->
            <button id="sayHello" name="sayHello" type="button" onclick="TrPage._autoSubmit('j_id_jsp_1876237926_3','sayHello',event,1);return false;" class="af_commandButton">Say Hello</button>
          </td>
        </tr></table><!--Start: org.apache.myfaces.trinidad.Object["j_id_jsp_1876237926_8"]--><div style="margin-top:15px"></div><!--Start: org.apache.myfaces.trinidad.Output["j_id_jsp_1876237926_9"]--><span id="j_id_jsp_1876237926_9" style="font-weight: bold;"></span><input type="hidden" name="org.apache.myfaces.trinidad.faces.FORM" value="j_id_jsp_1876237926_3"><!--Start: org.apache.myfaces.trinidad.Form--><span id="tr_j_id_jsp_1876237926_3_Postscript"><input type="hidden" name="javax.faces.ViewState" value="!-4fd3ee50"><script type="text/javascript">function _j_id_jsp_1876237926_3Validator(f,s){return _validateInline(f,s);}var j_id_jsp_1876237926_3_SF={};</script></span><script type="text/javascript">_submitFormCheck();</script></form>
  </body>

  <!--Created by Apache Trinidad (Apache MyFaces Trinidad API - 1.2.10/Apache MyFaces Trinidad Impl - 1.2.10), skin:bigfont.desktop (bigfont)--></html>

The CommandButton bean code:

public class CommandButtonBean {
    public String name;
    public String message;

    public String sayHello(){
        message = "Hola " + name;
        return "";
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

}

Of course, the command button is configured at faces-config.xml (I think that this snippet is not relevant).

Attempted fixes so far:

We have checked the charset encoding at different levels (application, JVM, etc). It seems to be aligned between the differen layers.

Also, we have included at web.xml the next context parameter:

<context-param>
    <param-name>PARAMETER_ENCODING</param-name> 
    <param-value>UTF-8</param-value> 
</context-param>

We have logged what is the value passed as an argument to the setName method, for if it could be an error at writing the response. The value passed is already wrong.
We have tried to write a web Filter, to set the request charset to UTF-8 (just in case, you know). But when logging the parameter values at the filter, we got the wrong value too.
At last we removed the partialSubmit attribute of the submit button, and got the right value. But this won't really fix our problem, as we are trying to implement some inline searches and validations (we don't want to repaint the whole page).

So, when we send a normal POST message, we get the expected result, but when we try to use the Ajax approach, we loose these special characters.

And, at last, The Question:

Have you any suggestions on how to fix this issue?

Thank you very much.

Original Q&A

There are 4 answers

lkdg On 25 February 2011 at 13:56

Hi I can't reproduce your problem. Actually I don't get anything going if I try to program the jsp Page like you did. This is how my jsp's look like

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>  
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>  
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr" %>  
<%@ taglib uri="http://myfaces.apache.org/trinidad/html" prefix="trh" %>  
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>  
<f:view>  
<tr:document>  
<trh:head title="Your Title">  
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
</trh:head>  
</tr:document>  
</f:view>

The tr:document, which you don't use creates a html, body and head tag. You can use trh:head if you need it. See trinidad's documentation: Documentation tr:document

With this configuration I had no problem with an ó. I have no PARAMETER_ENCODING set in web.xml and I am using jsf1.2 trinidad 1.2.14 This is not really an answer but it probably helps.

Regards

Java Drinker On 25 February 2011 at 12:50

I've forgotten trinidad a bit, but in order for the button to affect the input text, dont you need a "partialTriggers" attribute set on the inputText component, which should have the ID of the button?

lkdg On 28 February 2011 at 13:06

it is lkdg again

I tried to reproduce your issue.

jsp:

<tr:inputText
  id="myfield"
   value="#{myBean.myname}">
</tr:inputText>
<tr:commandButton 
   id="sayHello" 
   text="Say Hello" 
   partialSubmit="true"                                
   action="#{myBean.sayHello}"/>
<tr:outputText 
   value="#{myBean.message}" 
   partialTriggers="sayHello"
   inlineStyle="font-weight: bold;"/>

bean:

private String myname;
private String message; 

public String sayHello()
{         
    message = "Hola " + myname;         
    return "";     
} 
public String getMyname() {
    return myname;
}

public void setMyname(String myname) {
    this.myname = myname;
}

public String getMessage() {
    return message;
}

public void setMessage(String message) {
    this.message = message;
}

Everything works fine with ó and ễ and whatever. jsf-1.2;trinidad1.2.14;apache tomcat6.0.29

I don't know the IBM WebSphere AS 7.0. But probably your problem has got something to do with what this guy is writing here: Displaying UTF-8 Characters in resource response

**Adam** · Accepted Answer · 2011-02-28 22:53:44

This is a known issue with trinidad&WAS: http://www.mail-archive.com/[email protected]/msg46298.html . You will have to make a small modification to two js files, you need to encode the sent characters (the solution there by Naveen Ravindra works). Edit these files:

trinidad-impl-XXX.jar\META-INF\adf\jsLibsDebug\xhr\XMLRequest.js
trinidad-impl-XXX.jar\META-INF\adf\jsLibs\xhr\XMLRequest.js

Add this new function to them (paste this to the beginning of the js:

function encodeCharacters(string) {
        string = string.replace(/\r\n/g, "\n");
    var utftext = "";
    for ( var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
            utftext += String.fromCharCode(c);
        } else if ((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
        }   
        else {  
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
        }
    }
    return utftext;
}

Change the TrXMLRequest.prototype.send function in the same js. In it change

xmlhttp.send(content); to xmlhttp.send(encodeCharacters(content)); in the debug version, and
a4.send(a3); to a4.send(encodeCharacters(a3)); in the production version.

Tested, works in WAS 7.0.0.11.

TechQA.

Myfaces Trinidad JSF: Ajax problem when sending Non US-ASCII Characters

There are 4 answers

Related Questions in JSF

Related Questions in CHARACTER-ENCODING

Related Questions in WEBSPHERE

Related Questions in MYFACES

Related Questions in TRINIDAD

Popular Questions

Popular Tags

Trending Questions