8 Replies Latest reply on Nov 23, 2007 1:05 PM by diegocoronel

Wrong render with ajax

diegocoronel Nov 21, 2007 3:20 PM

Hey, i got this situation, when my commandLink is rendered by ajax they are not correct, but when i render this same commandLink without ajax its correct, my codes:

this is da page that include my commandLink

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:fpf="http://www.fpf.br/jsf"
 xmlns:c="http://java.sun.com/jstl/core">

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

 #{br.fpf.components.masterDetail.MasterDetailController.addLista(detailList)}
 #{br.fpf.components.masterDetail.MasterDetailController.initObject(type)}

 <h:panelGrid columns="1" id="panelGrid" width="100%">
 <a4j:region selfRendered="true" rendered="#{br.fpf.components.masterDetail.MasterDetailController.state == 0}">
 <ui:include src="/components/fpf_masterDetail/fpf_gridMasterDetail.xhtml" />
 </a4j:region>
 </h:panelGrid>

 <h:panelGrid columns="1" width="100%" id="panelUpdate">
 <a4j:region selfRendered="true" rendered="#{br.fpf.components.masterDetail.MasterDetailController.state == 1}">
 <ui:include src="/components/fpf_masterDetail/fpf_updateMasterDetail.xhtml" />
 </a4j:region>
 </h:panelGrid>

</ui:composition>

this is the page With my commandLink

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:fpf="http://www.fpf.br/jsf"
 xmlns:c="http://java.sun.com/jstl/core">

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

 <ui:insert name="update_form"/>
 <h:panelGrid columns="2">
 <a4j:commandLink reRender="panelGrid, panelUpdate" action="#{br.fpf.components.masterDetail.MasterDetailController.update()}">
 <fpf:fpf_button labelButton="Update" id="b1321" />
 </a4j:commandLink>
 <a4j:commandLink reRender="panelGrid, panelUpdate" action="#{br.fpf.components.masterDetail.MasterDetailController.cancelStateUpdate()}" immediate="true">
 <fpf:fpf_button labelButton="Cancelar" id="b232132" />
 </a4j:commandLink>
 </h:panelGrid>

</ui:composition>

this is the page that will render my commandLink

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:fpf="http://www.fpf.br/jsf"
 xmlns:c="http://java.sun.com/jstl/core">

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

 <fpf:fpf_grid dados="#{detailList}">
 <ui:insert name="grid" />
 <h:column>
 <a4j:commandLink reRender="panelGrid,panelUpdate" action="#{br.fpf.components.masterDetail.MasterDetailController.changeStateUpdate}">
 Editar
 <f:setPropertyActionListener value="#{item}" target="#{br.fpf.components.masterDetail.MasterDetailController.detail}" />
 </a4j:commandLink>
 </h:column>
 <h:column>
 Excluir
 </h:column>
 </fpf:fpf_grid>

</ui:composition>

this is the code with ajax render, we can see that my link opens and close and the content isnt inside the link --> thats wrong

<a id="j_id12:j_id85" href="#" name="j_id12:j_id85" onclick="A4J.AJAX.Submit('j_id12:j_id80','j_id12',event,{'parameters':{'j_id12:j_id85':'j_id12:j_id85'} ,'actionUrl':'/components/test/fpf_masterDetail/masterDetail.seam'} );return false;"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="/components/components/fpf_button/css/fpf_button.css">
</link>
<script language="JavaScript" type="text/javascript" src="/components/components/fpf_button/script/fpf_button.js">
</script>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="leftCornerb1321" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
<td id="fpf_Buttonb1321" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')">
<div id="labelButtonb1321" class="txtButton"> Update </div>
</td>
<td id="rightCornerb1321" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
</tr>
</tbody>
</table>

this is the code without ajax, i did a refresh in the page, we can see that my link open, my content is inside than my link close

<a id="j_id12:j_id34" href="#" name="j_id12:j_id34" onclick="A4J.AJAX.Submit('j_id12:j_id29','j_id12',event,{'parameters':{'j_id12:j_id34':'j_id12:j_id34'} ,'actionUrl':'/components/test/fpf_masterDetail/masterDetail.seam'} );return false;">
<head>
</head>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="leftCornerb1321" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
<td id="fpf_Buttonb1321" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')">
<div id="labelButtonb1321" class="txtButton"> Update </div>
</td>
<td id="rightCornerb1321" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
</tr>
</table>
</a>

So, is this a bug ? or i need to do something ?

1. Re: Wrong render with ajax

sergeysmirnov Nov 21, 2007 4:06 PM (in response to diegocoronel)

I do not see the form element in your code snippets
Actions

2. Re: Wrong render with ajax

diegocoronel Nov 21, 2007 4:30 PM (in response to diegocoronel)

sry, here is my main page:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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:fpf="http://www.fpf.br/jsf"
 template="/layout/template.xhtml">

<ui:define name="body">

<h:form>

 <h:messages globalOnly="true" styleClass="message"/>

 <rich:tabPanel>
 <rich:tab label="Filhos" rendered="true">
 <fpf:fpf_masterDetail detailList="#{masterDetailTest.pessoa.listaFilho}"
 type="br.fpf.test.fpf_masterdetail.Filho"
 confirmDelete="true">

 <ui:define name="grid">
 <h:column>
 #{item.nome}
 </h:column>
 </ui:define>

 <ui:define name="form">
 Nome <h:outputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:outputText>
 </ui:define>

 <ui:define name="update_form">
 Nome <h:inputText value="#{detail.instance.nome}"></h:inputText>
 </ui:define>

 </fpf:fpf_masterDetail>

 </rich:tab>
 </rich:tabPanel>

</h:form>
</ui:define>
</ui:composition>

3. Re: Wrong render with ajax

sergeysmirnov Nov 21, 2007 4:37 PM (in response to diegocoronel)

you need to use a4j:form if you use link inside re-rendered area

See http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf for explanation why so.
Actions
4. Re: Wrong render with ajax

ilya_shaikovsky Nov 22, 2007 4:13 AM (in response to diegocoronel)

And if you think that some coorections that was made by filter - is wrong - just check your "ok" code with Tidy html validator.
Actions

5. Re: Wrong render with ajax

diegocoronel Nov 22, 2007 7:44 AM (in response to diegocoronel)

so, i tried with ajax form and htmlCommandLink, but im still with this situation,

with reRender my content is not inside the link

<a id="j_id12:j_id149" href="#" onclick="return _JSFFormSubmit('j_id12:j_id149','j_id12',null,{} )"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> --> should it close here ?

<link rel="stylesheet" type="text/css" href="/components/components/fpf_button/css/fpf_button.css">
</link>
<script language="JavaScript" type="text/javascript" src="/components/components/fpf_button/script/fpf_button.js">
</script>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="leftCornerb2" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')" onmouseout="goDim('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')"/>
<td id="fpf_Buttonb2" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')" onmouseout="goDim('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')">
<div id="labelButtonb2" class="txtButton"> Cancelar </div>
</td>
<td id="rightCornerb2" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')" onmouseout="goDim('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')"/>
</tr>
</tbody>
</table>

and with refresh my content is inside the link

<a id="j_id12:j_id47" href="#" onclick="return _JSFFormSubmit('j_id12:j_id47','j_id12',null,{} )"> --> here its correct, not closing
<head>
</head>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="leftCornerb1" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')" onmouseout="goDim('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')"/>
<td id="fpf_Buttonb1" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')" onmouseout="goDim('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')">
<div id="labelButtonb1" class="txtButton"> Salvar </div>
</td>
<td id="rightCornerb1" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')" onmouseout="goDim('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')"/>
</tr>
</table>
</a>

and my main page with ajax form,

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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:fpf="http://www.fpf.br/jsf"
 template="/layout/template.xhtml">

<ui:define name="body">

<a4j:form>

 <h:messages globalOnly="true" styleClass="message"/>

 <rich:tabPanel>
 <rich:tab label="Filhos" rendered="true">
 <fpf:fpf_masterDetail detailList="#{masterDetailTest.pessoa.listaFilho}"
 type="br.fpf.test.fpf_masterdetail.Filho"
 confirmDelete="true">

 <ui:define name="grid">
 <h:column>
 #{item.nome}
 </h:column>
 </ui:define>

 <ui:define name="form">
 Nome <h:outputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:outputText>
 </ui:define>

 <ui:define name="update_form">
 Nome <h:inputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:inputText>
 </ui:define>

 <ui:define name="detail_form">
 Nome <h:outputText value=""></h:outputText>
 </ui:define>

 <ui:define name="delete_form">
 Nome <h:outputText value=""></h:outputText>
 </ui:define>

 <ui:define name="insert_form">
 Nome <h:inputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:inputText>
 </ui:define>

 </fpf:fpf_masterDetail>

 </rich:tab>
 </rich:tabPanel>

</a4j:form>
</ui:define>
</ui:composition>

so, is there another workaround ?

PS: ty for your answers... :)

6. Re: Wrong render with ajax

diegocoronel Nov 22, 2007 7:45 AM (in response to diegocoronel)

sry, i forgot to show my page with htmlCommandLink

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:fpf="http://www.fpf.br/jsf"
 xmlns:c="http://java.sun.com/jstl/core">

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

 <ui:insert name="insert_form"/>
 <h:panelGrid columns="2">

 <a4j:htmlCommandLink reRender="panelGrid, panelInsert" action="#{br.fpf.components.masterDetail.MasterDetailController.cadastrar()}">
 <fpf:fpf_button labelButton="Salvar" id="b1" />
 </a4j:htmlCommandLink>
 <a4j:htmlCommandLink reRender="panelGrid, panelInsert" action="#{br.fpf.components.masterDetail.MasterDetailController.cancelStateUpdate()}" immediate="true">
 <fpf:fpf_button labelButton="Cancelar" id="b2" />
 </a4j:htmlCommandLink>
 </h:panelGrid>

</ui:composition>

7. Re: Wrong render with ajax

diegocoronel Nov 22, 2007 4:05 PM (in response to diegocoronel)
i tried with
<a4j:htmlCommandLink reRender="panelGrid, panelInsert" action="#{br.fpf.components.masterDetail.MasterDetailController.cadastrar()}"> Salvar </a4j:htmlCommandLink>

and it works, is this a facelets problem or richfaces ? or my problem ;)?
Actions
8. Re: Wrong render with ajax

diegocoronel Nov 23, 2007 1:05 PM (in response to diegocoronel)

should i open a jira issue ?
Actions

Go to original post