JSF: fazer aparecer um select, quando mudado o valor de um outro select (AJAX)

25 de novembro de 2008 4 respostas

felipe_azv 25 de novembro de 2008

Oi pessoal, eu to querendo fazer, mas estou meio travado.
E tenho um select que , quando muda para um determinado valor, aparece outro select, mas eu só estou conseguindo fazer isso com um submit
Eu gostaria de fazer aparecer ou sumir o select via ajax, sem ter que atualizar a página.

meu código ta assim, no jsp:

<a4j:form ajaxSubmit="false">
...
<h:selectOneMenu id="numType" value="#{form1.form1.numType}" onchange="submit()">
                                <f:selectItems value="#{formType.formTypesAvailableSelectOne}" /> 
                            </h:selectOneMenu>
                            
                            <h:outputText id="outputText_numInputType" value="Tipo de Campo" rendered="#{form1.form1.numType == 3}"/>
                            <h:selectOneMenu id="numInputType" value="#{form1.form1.numInputType}" rendered="#{form1.form1.numType == 3}">
                                 <f:selectItem itemValue="1" itemLabel="Checkbox"/> 
                                 <f:selectItem itemValue="2" itemLabel="Radiobutton"/> 
                                 <f:selectItem itemValue="3" itemLabel="Textfield"/> 
                            </h:selectOneMenu>
...
</a4j:form>

Quando a variável numType é 3, aí aparece o select e o outputText, mas só com o ajaxSubmit=False, do form.
Da pra fazer isso sem atualizar a página?

valeu!

4 Respostas

humberto.lima 25 de nov. de 2008

Tu tem que dizer qual parte do codigo será atualizada quando for usar ajax, o nome do atributo é reRender. Acho q vc deve agrupar de alguma forma o que precisa ser atualizado.

[]´s

Humberto Lima

markinho 25 de nov. de 2008

Olá,

tente a tag a4j:support!
Nela temos o event que é quando aciona o ajaz exemplo onchange!
Nela temos também a tag reRender, ou seja aqui vc coloca o id dos que vc quer que renderize após o evento!

Ex:

<a4j:form ajaxSubmit="false">
...
                           <h:selectOneMenu id="numType" value="#{form1.form1.numType}" >
                                <f:selectItems value="#{formType.formTypesAvailableSelectOne}" /> 
                                <a4j:support event="onchange" reRender="outputText_numInputType, numInputType" />
                            </h:selectOneMenu>
                            
                            <h:outputText id="outputText_numInputType" value="Tipo de Campo" rendered="#{form1.form1.numType == 3}"/>
                            <h:selectOneMenu id="numInputType" value="#{form1.form1.numInputType}" rendered="#{form1.form1.numType == 3}">
                                 <f:selectItem itemValue="1" itemLabel="Checkbox"/> 
                                 <f:selectItem itemValue="2" itemLabel="Radiobutton"/> 
                                 <f:selectItem itemValue="3" itemLabel="Textfield"/> 
                            </h:selectOneMenu>
...
</a4j:form>

Espero ter ajudado!

Abrass!

felipe_azv 26 de nov. de 2008

Aew pessoal, valeu pela ajuda. Eu consegui fazer funcionar o código.
Agora quando eu seleciono uma determinada opção do select, o outro select aparece e quando eu altero o valor do primeiro select para um outro determinado valor, ele faz o segundo desaparecer, e sem refresh!

eu utilizei a propriedade o a4j:support e também o a4j:ajaxRendered , ai funcionou certinho.

o código ficou assim:

<a4j:form>
...

<h:selectOneMenu id="numType" value="#{form1.form1.numType}">
    <f:selectItems value="#{formType.formTypesAvailableSelectOne}" /> 
    <a4j:support event="onchange" reRender="outputText_numInputType, numInputType" /> 
</h:selectOneMenu>

<a4j:outputPanel ajaxRendered="true"> 
    <h:outputText id="outputText_numInputType" value="Tipo de Campo" rendered="#{form1.form1.numType == 3}"/>
</a4j:outputPanel>
<a4j:outputPanel ajaxRendered="true"> 
   <h:selectOneMenu id="numInputType" value="#{form1.form1.numInputType}" rendered="#{form1.form1.numType == 3}">
       <f:selectItem itemValue="1" itemLabel="Checkbox"/> 
       <f:selectItem itemValue="2" itemLabel="Radiobutton"/> 
       <f:selectItem itemValue="3" itemLabel="Textfield"/> 
   </h:selectOneMenu>
</a4j:outputPanel>  
...
</a4j:form>

eu coloquei um para cada componente por causa da formatação da tabela. Mas um pros dois funciona normal também.

[]'s

gr_marco 11 de nov. de 2009

Olá a todos…
Tenho exatamente a situação descrita acima funcionando, porém, não consigo submeter o valor do campo renderizado dentro a4j:outputPanel.
Alguém tem alguma ideia?
Todos os campos da tela são submetidos normalmente, somente o campo interno ao outputpanel não é… Quando eu retiro o a4j:outputPanel, o valor é submetido, mas é renderizado quando eu carrego a view…
Alguma sugestão?

Abrax

Criado 25 de novembro de 2008

Ultima resposta 11 de nov. de 2009

Respostas 4

Participantes 4

4 Respostas

Topicos relacionados