-
1. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
ilya_shaikovsky Aug 24, 2010 5:31 AM (in response to derekmd)at first
<span> <rich:inplaceInput id="#{id}" value="#{value}" showControls="true" editEvent="ondblclick" layout="block" label="#{label}" required="#{required}">
layout=block means that inplace will use div markup. And this is not valid to place block elements inside inline ones in html. So could cause different glitches after ajax updates.
-
2. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
derekmd Aug 24, 2010 6:52 PM (in response to ilya_shaikovsky)I attempted removing layout="block" to revert back to inline but the AJAX behaviour didn't change. The RichFaces error icon still appears appended in the root of the generated DOM's <body> even after the resubmitted AJAX call successfully goes through.
-
3. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
ilya_shaikovsky Aug 25, 2010 2:39 AM (in response to derekmd)if some elements getting encoded via ajax in the wrong places - it's probably caused by the fact that you have some other non -valid code in your page markup and it's tried to be corrected by filters. check generated html with w3c validator.
-
4. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
derekmd Aug 25, 2010 3:18 PM (in response to ilya_shaikovsky)Here is a simplified example:
{code:xml}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j" xmlns:tcp="http://www.phenogenomics.ca/jsf" contentType="text/html"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>inplaceInput validation icon test</title> <link href="/stylesheet/theme.css" rel="stylesheet" type="text/css" /> <a4j:loadStyle src="resource:///stylesheet/theme.xcss"/> </head> <body> <h:form name="mouselineForm" id="mouselineForm"> <s:div id="contactEmail_div"> <rich:inplaceInput id="contactEmail" value="#{mouselineHome.instance.contactEmail}" showControls="true" editEvent="ondblclick" layout="block" required="true"> <a4j:support event="onviewactivated" action="#{mouselinePage.save}" limitToList="true" reRender="contactEmail_div" /> <s:validate /> </rich:inplaceInput> <s:message for="contactEmail" /> </s:div> </h:form> </body> </html></f:view>{code}This generates this XHTML (the only W3C compliance warning is on the input's autocomplete="false" attribute):
{code:xml}<!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"> <head> <script src="/a4j/g/3_3_3.CR1/org/ajax4jsf/framework.pack.js" type="text/javascript"></script> <script src="/a4j/g/3_3_3.CR1/org/richfaces/ui.pack.js" type="text/javascript"></script> <link class="component" href="/a4j/s/3_3_3.CR1org/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <link class="component" href="/a4j/s/3_3_3.CR1org/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" media="rich-extended-skinning" rel="stylesheet" type="text/css" /> <link class="component" href="/a4j/s/3_3_3.CR1/org/richfaces/skin.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <script id="org.ajax4jsf.queue_script" type="text/javascript">if (typeof A4J != 'undefined') { if (A4J.AJAX) { with (A4J.AJAX) {if (!EventQueue.getQueue('org.richfaces.queue.global')) { EventQueue.addQueue(new EventQueue('org.richfaces.queue.global',null,null)) };}}};</script> <link class="component" href="/a4j/s/3_3_3.CR1META-INF/skins/laguna.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script> <link class="user" href="/a4j/s/3_3_3.CR1stylesheet/theme.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <link type="text/css" href="/openFacesResources/org/openfaces/renderkit/default-2.0.css" rel="stylesheet"/> <script src="/openFacesResources/org/openfaces/util/util-2.0.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>inplaceInput validation icon test</title> <link href="/stylesheet/theme.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="mouselineForm" name="mouselineForm" method="post" action="/mouseline/Mouseline.seam" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="mouselineForm" value="mouselineForm" /> <div id="mouselineForm:contactEmail_div"> <div class="rich-inplace rich-inplace-input rich-inplace-view " id="mouselineForm:contactEmail" style="zoom: 1; "> <input autocomplete="off" class="rich-inplace-field" id="mouselineForm:contactEmailtempValue" style="clip:rect(0px 0px 0px 0px)" type="text" value="example@email.com" /> <input autocomplete="off" id="mouselineForm:contactEmailvalue" name="mouselineForm:contactEmail" type="hidden" value="example@email.com" /> <div class="rich-inplace-input-controls-set" id="mouselineForm:contactEmailbar" style="display:none;"> <div class="rich-inplace-shadow" id="mouselineForm:contactEmailbtns_shadow"> <table border="0" cellpadding="0" cellspacing="0" class="rich-inplace-shadow-size"> <tbody> <tr> <td class="rich-inplace-shadow-tl"><img alt="" height="1" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="10" /></td> <td class="rich-inplace-shadow-tr"><img alt="" height="10" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="1" /></td> </tr> <tr> <td class="rich-inplace-shadow-bl"><img alt="" height="10" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="1" /></td> <td class="rich-inplace-shadow-br"><img alt="" height="1" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="10" /></td> </tr> </tbody> </table> </div> <div id="mouselineForm:contactEmailbuttons" style="position:relative; width: 1px"> <input class="rich-inplace-control " id="mouselineForm:contactEmailok" onmousedown="this.className='rich-inplace-control-press '" onmouseout="this.className='rich-inplace-control '" onmouseover="this.className='rich-inplace-control '" onmouseup="this.className='rich-inplace-control '" src="/a4j/g/3_3_3.CR1org.richfaces.renderkit.html.images.SaveControlIcon/DATB/eAHzOBTNlsLw!!9!ABMwBM0_" type="image" /> <input class="rich-inplace-control " id="mouselineForm:contactEmailcancel" onmousedown="this.className='rich-inplace-control-press '" onmouseout="this.className='rich-inplace-control '" onmouseover="this.className='rich-inplace-control '" onmouseup="this.className='rich-inplace-control '" src="/a4j/g/3_3_3.CR1org.richfaces.renderkit.html.images.CancelControlIcon/DATB/eAETFZ!-!!9!AAlNA8E_" type="image" /> </div> <script type="text/javascript">var inplaceInput = new Richfaces.InplaceInput('mouselineForm:contactEmail',{'events':{'onviewactivated':function(event){A4J.AJAX.Submit('mouselineForm',event,{'similarityGroupingId':'mouselineForm:j_id4','parameters':{'mouselineForm:j_id4':'mouselineForm:j_id4'} } )}} ,'attributes':{'editEvent':'ondblclick','showControls':true} } );</script> </div> example@email.com </div> <span id="mouselineForm:j_id5" style="display: none;"></span> </div> <input type="hidden" name="javax.faces.ViewState" value="j_id8" /> </form> </body> </html>{code}
An error condition on changing contactEmail such as a left blank for the required field or entering an invalid email address generates this XHTML:
{code:xml}<!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"> <head> <script src="/a4j/g/3_3_3.CR1/org/ajax4jsf/framework.pack.js" type="text/javascript"></script> <script src="/a4j/g/3_3_3.CR1/org/richfaces/ui.pack.js" type="text/javascript"></script> <link class="component" href="/a4j/s/3_3_3.CR1org/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <link class="component" href="/a4j/s/3_3_3.CR1org/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" media="rich-extended-skinning" rel="stylesheet" type="text/css" /> <link class="component" href="/a4j/s/3_3_3.CR1/org/richfaces/skin.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <script id="org.ajax4jsf.queue_script" type="text/javascript">if (typeof A4J != 'undefined') { if (A4J.AJAX) { with (A4J.AJAX) {if (!EventQueue.getQueue('org.richfaces.queue.global')) { EventQueue.addQueue(new EventQueue('org.richfaces.queue.global',null,null)) };}}};</script> <link class="component" href="/a4j/s/3_3_3.CR1META-INF/skins/laguna.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script> <link class="user" href="/a4j/s/3_3_3.CR1stylesheet/theme.xcss/DATB/eAF72c2jGbp8hjQAEMYDWQ__" rel="stylesheet" type="text/css" /> <link type="text/css" href="/openFacesResources/org/openfaces/renderkit/default-2.0.css" rel="stylesheet"/> <script src="/openFacesResources/org/openfaces/util/util-2.0.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>inplaceInput validation icon test</title> <link href="/stylesheet/theme.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="mouselineForm" name="mouselineForm" method="post" action="/mouseline/Mouseline.seam" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="mouselineForm" value="mouselineForm" /> <div id="mouselineForm:contactEmail_div"> <div class="rich-inplace rich-inplace-input rich-inplace-view " id="mouselineForm:contactEmail" style="zoom: 1; " title="must be a well-formed email address">
<script type="text/javascript">//<![CDATA[ O$.addLoadEvent(function(){O$.addMessageById('mouselineForm:contactEmail', 'must be a well-formed email address', 'must be a well-formed email address', 'error');new O$._FloatingIconMessageRenderer('mouselineForm:dfm1', 'mouselineForm:contactEmail', '/openFacesResources/org/openfaces/component/validation/error_icon-2.0.gif', -4, -4, 'o_floatingIconMessage', {}, false, false, true, true).update();
})
//]]>
</script> <input autocomplete="off" class="rich-inplace-field" id="mouselineForm:contactEmailtempValue" style="clip:rect(0px 0px 0px 0px)" type="text" value="example@" /> <input autocomplete="off" id="mouselineForm:contactEmailvalue" name="mouselineForm:contactEmail" type="hidden" value="example@" />
<div class="rich-inplace-input-controls-set" id="mouselineForm:contactEmailbar" style="display:none;"> <div class="rich-inplace-shadow" id="mouselineForm:contactEmailbtns_shadow"> <table border="0" cellpadding="0" cellspacing="0" class="rich-inplace-shadow-size"> <tbody> <tr> <td class="rich-inplace-shadow-tl"><img alt="" height="1" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="10" /></td> <td class="rich-inplace-shadow-tr"><img alt="" height="10" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="1" /></td> </tr> <tr> <td class="rich-inplace-shadow-bl"><img alt="" height="10" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="1" /></td> <td class="rich-inplace-shadow-br"><img alt="" height="1" src="/a4j/g/3_3_3.CR1images/spacer.gif" style="border:0" width="10" /></td> </tr> </tbody> </table> </div> <div id="mouselineForm:contactEmailbuttons" style="position:relative; width: 1px"> <input class="rich-inplace-control " id="mouselineForm:contactEmailok" onmousedown="this.className='rich-inplace-control-press '" onmouseout="this.className='rich-inplace-control '" onmouseover="this.className='rich-inplace-control '" onmouseup="this.className='rich-inplace-control '" src="/a4j/g/3_3_3.CR1org.richfaces.renderkit.html.images.SaveControlIcon/DATB/eAHzOBTNlsLw!!9!ABMwBM0_" type="image" /> <input class="rich-inplace-control " id="mouselineForm:contactEmailcancel" onmousedown="this.className='rich-inplace-control-press '" onmouseout="this.className='rich-inplace-control '" onmouseover="this.className='rich-inplace-control '" onmouseup="this.className='rich-inplace-control '" src="/a4j/g/3_3_3.CR1org.richfaces.renderkit.html.images.CancelControlIcon/DATB/eAETFZ!-!!9!AAlNA8E_" type="image" /> </div> <script type="text/javascript">var inplaceInput = new Richfaces.InplaceInput('mouselineForm:contactEmail',{'events':{'onviewactivated':function(event){A4J.AJAX.Submit('mouselineForm',event,{'similarityGroupingId':'mouselineForm:j_id4','parameters':{'mouselineForm:j_id4':'mouselineForm:j_id4'} } )}} ,'attributes':{'editEvent':'ondblclick','showControls':true} } );</script> </div> example@
</div> <span id="mouselineForm:j_id5" style="display: none;"></span> </div> <input type="hidden" name="javax.faces.ViewState" value="j_id8" /> </form>
<script xmlns="http://www.w3.org/1999/xhtml">A4J.AJAX._scriptEvaluated=true;</script>
<img id="mouselineForm:dfm1" src="/openFacesResources/org/openfaces/component/validation/error_icon-2.0.gif" style="position: absolute; z-index: 700; left: -4px; top: -4px; " alt="must be a well-formed email address" title="must be a well-formed email address" /> </body> </html>{code}
The problem is after resubmitting the inplaceInput with the correct example@mail.com value, the AJAX does trigger and the bean successfully persists, but the final <img id="mouselineForm:dfm1"... /> tag still appears in the DOM!
-
5. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
ilya_shaikovsky Aug 26, 2010 7:51 AM (in response to derekmd)seems you simplified code too much. using seam 2.2.0 RF 3.3.3 and this code:
<h:form name="mouselineForm" id="mouselineForm"> <s:decorate> <s:div id="contactEmail_div"> <rich:inplaceInput id="contactEmail" value="#{userBean.name}" showControls="true" editEvent="ondblclick" layout="block" required="true"> <a4j:support event="onviewactivated" limitToList="true" reRender="contactEmail_div" /> <s:validate /> </rich:inplaceInput> <s:message for="contactEmail"/> </s:div> </s:decorate> </h:form>
I'm still not getting the float image you mentioning and see just message which added and removed fine.
-
6. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
derekmd Dec 23, 2010 5:11 PM (in response to ilya_shaikovsky)...4 months pass...
It's definitely an OpenFaces problem where it's using filters to place additional functionality on top of JSF component validation. The issue is their error icon code assumes a POST of the full page will be made so A4J support offered by RichFaces causes confusing results (e.g., error icon still appearing after validation succeeded.) I've created an OpenFaces forum post in an attempt to clear up the issue but I doubt support for RichFaces' AJAX will be taken into consideration.
-
7. Re: Hide Validation Error Icon After Successful Subsequent AJAX Call
derekmd Feb 16, 2011 9:46 PM (in response to ilya_shaikovsky)FYI, the problem is due to OpenFaces' validation not properly supporting AJAX. A feature request has been created for this issue: http://requests.openfaces.org/browse/OF-80
It can be temporarily fixed by disabling the validation error icon on client-side using the below tag inside your <a4j:form>:
{code:xml}<o:clientValidationSupport clientValidation="off" useDefaultServerValidationPresentation="false"/>{code}
POST requests will still show the icon and <h:message> errors will still display after AJAX reRender.