Galera é o seguinte, não sei se alguém já passou por isso mas vamos lá, estou com uma tela onde a mesma possui uns campos e (onde esses estão bloqueados), sendo que de acordo com o que o usuário digitar nos ele habil…

Re:AJUDA - Javascript em JSF (RESOLVIDO)

6 de outubro de 2010 10 respostas

dadivajah 6 de outubro de 2010

Galera é o seguinte, não sei se alguém já passou por isso mas vamos lá, estou com uma tela onde a mesma possui uns campos <h:inputText> e <h:selectManyCheckbox> (onde esses estão bloqueados), sendo que de acordo com o que o usuário digitar nos <h:inputText> ele habilita o <h:selectManyCheckbox> correspondente.

Dúvida, já tentei quase td que e jeito de fazer funfar esse trem e nada, ou seja criei uma função Javascript que lê o conteúdo do <h:inputText> para habilitar o danado <h:selectManyCheckbox> mas nada, alguém teria alguma solução pra esse caso.

Desde já obrigado!

10 Respostas

dev.rafael 6 de out. de 2010

Funções javascript não vão te ajudar pois o JSF mantém o estado disabled=“true” tb no servidor. Assim, mesmo q vc use uma função javascript no cliente p/ ativar h:selectManyCheckbox o servidor ainda vai vê-lo como desativado. O q vc precisa fazer é enviar uma requisição ajax p/ o servidor e reativar o h:selectManyCheckbox lá, e então renderizar esse componente novamente no cliente.

Poste o restante do código da view e a versão do JSF q vc está utilizando p/ q eu possa de mostrar a solução.

Priuli 6 de out. de 2010

em um aplicação jsp eu consigo, mais ou menos assim:

function onload{
document.getElementById('meuCombo').disabled = true;
var input = document.getElementById('meuInputText');

//Firefox
if(input.addEventListener){
    input.addEventListener('keydown',enableCombo,true );
    input.addEventListener('change',enableCombo,true );
}

//IE
if(input.attachEvent){
    input.attachEvent('onkeydown',verificaEnableCombo,true );
    input.attachEvent('onchange', verificaEnableCombo,true );
}


}

function verificaEnableCombo(evt){
if(document.getElementById('meuInputText').value == 'IGUAL A ISTO')
enableCombo();
}

function enableCombo(){
   document.getElementById('meuCombo').disabled = false;
}

agora no jsf… o evento pode ser na propria tag…

<h:inputText onkeyDown="verificaEnableCombo();"

se vc desabilitar o combo pelo jsf vc ira ter problemas se habilitar por javascript, (aquilo que o dev.rafael falou), eu tentaria deixar habilitado e desabilitar via javascript na tela.

dadivajah 6 de out. de 2010

Rafael seria mais ou menos assim:

<a>rich:panel</a>

<f:facet name=“header”>

<h:outputText value=“Pesquisar Instância” />

</f:facet>

<ui:decorate id=“valueFieldMunicipio” template="…/layout/editLabel3.xhtml">

<ui:define name=“label”>Munícipio</ui:define>

<rich:spacer width=“11” />

<h:inputText id=“textMunicipio” value="" size=“20” maxlength=“60” onkeyup=“javascript:habilitaFiltroMunicipioOnKeyUp(this.value);”/>

</ui:decorate>

<ui:decorate id=“valueFieldUf” template="…/layout/editLabel3.xhtml">

<ui:define name=“label”>UF</ui:define>

<rich:spacer width=“11” />

<h:selectOneMenu id=“comboUf” value="">

<f:selectItem itemLabel="" itemValue="" />

<f:selectItem itemLabel=“SP” itemValue=“1” />

<f:selectItem itemLabel=“BH” itemValue=“2” />

</h:selectOneMenu>

</ui:decorate>

<ui:decorate id=“valueFieldCodigoIbge”

template="…/layout/editLabel3.xhtml">

<ui:define name=“label”>Código do IBGE</ui:define>

<rich:spacer width=“11” />

<h:inputText id=“textCodigoIbge” value="" size=“20” maxlength=“10”/>

</ui:decorate>

Preencha no mínimo um dos campos acima

para realizar a pesquisa

</rich:panel>

<rich:spacer height=“3” />

<a>rich:panel</a>

<a>rich:tabPanel</a>

<rich:tab label=“Georeferenciamento”>

<h:panelGrid columns=“2”>

<h:panelGroup>

<a>rich:panel</a>

<rich:gmap oninit=“javascript:inicializa();” id=“map”

style=“width:550px;height:500px” gmapVar=“map”

zoom="#{gmBean.zoom}" lat="#{gmBean.latitude}"

lng="#{gmBean.longitude}" enableDoubleClickZoom=“true”

enableContinuousZoom=“true” mapType=“G_SATELLITE_MAP” />

</rich:panel>

</h:panelGroup>

<h:panelGroup>

<a:jsFunction name=“showPlace” data="#{gmBean.currentPlace}"

reRender=":zoom" oncomplete=“map.setCenter(new GLatLng(data.lat, data.lng),data.zoom)”>

<a:actionparam name=“id” assignTo="#{gmBean.currentId}"></a:actionparam>

</a:jsFunction>

<rich:panel style=“width:340px; height:520px”>

<f:facet name=“header”>

<h:outputText value=“Google Maps” />

</f:facet>

<h:outputText value=“Filtros para Município” />

<h:selectManyCheckbox id=“cboxFilterMunicipio” disabled=“true” layout=“pageDirection” label=“Filtros para Município”>

<f:selectItems id=“idItemMunicipio” value="#{gmBean.filtroMunicipio}" />

</h:selectManyCheckbox>




<h:outputText value=“Filtros para Estado” />

<h:selectManyCheckbox id=“cboxFilterEstado” value="" layout=“pageDirection” label=“Filtros para Estado”>

<f:selectItems id=“idItemEstado” value="#{gmBean.filtroEstado}" />

</h:selectManyCheckbox>




<h:outputText value=“Filtros para Região” />

<h:selectManyCheckbox id=“cboxFilterRegiao” value="" layout=“pageDirection” label=“Filtros para Região”>

<f:selectItems id=“idItemRegiao” value="#{gmBean.filtroRegiao}" />

</h:selectManyCheckbox>

<a:commandButton value=“Pesquisar” id=“idPesquisarGeo1”
onclick=“javascript:mostraEndereco();” />

</rich:panel>
</h:panelGroup>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</rich:panel>

dev.rafael 6 de out. de 2010

Ta ok kra, me manda só o código do input text e do selectManyCheckbox com os quais vc está tento problemas e, na boa, coloca entre tag [code] pq senão ninguém consegue analisar.

dadivajah 6 de out. de 2010

Opá foi mal rafael.

<<h:inputText id="textMunicipio" value="" size="20" maxlength="60" />

<h:selectManyCheckbox id="cboxFilterMunicipio" disabled="true" layout="pageDirection" label="Filtros para Município"> <f:selectItems id="idItemMunicipio" value="#{gmBean.filtroMunicipio}" /> </h:selectManyCheckbox>

dev.rafael 6 de out. de 2010

O segredo aqui é vc associar o atributo desabled do h:selectManyCheckbox a alguma condição e não simplesmente true ou false. Assim quando vc alterar o valor do h:inputText vc envia uma requisição ajax e muda essa condição do servidor.

<h:inputText id="textMunicipio" value="#{algum_mbean.textMunicipio}" size="20" maxlength="60">
  <!-- Aqui vc envia uma requisição ajax p/ o servidor td vez q o usuário digitar alguma coisa -->
  <a4j:support event="onkeyup" reRender="cboxFilterMunicipio" />
</h:inputText>

<!-- O atributo disabled fica vinculado ao tamanho do atributo do bean q está vinculado ao inputText. Assim td vez q o usuário digitar algo o servidor vai atualizar o
      componente no cliente -->
<h:selectManyCheckbox id="cboxFilterMunicipio" disabled="#{!empty algum_mbean.textMunicipio}" layout="pageDirection" label="Filtros para Município">  
  <f:selectItems id="idItemMunicipio" value="#{gmBean.filtroMunicipio}" />  
</h:selectManyCheckbox>

Infelizmente essa é a unica solução p/ o problema e ela ainda deve experimentar algum atraso caso o cliente não tenha uma conecção muito boa.

Priuli 6 de out. de 2010

Outra solução é metendo a mão no javascript e fazer o disabled por JavaScript..

<h:inputText id="textMunicipio" value="" size="20" maxlength="60" onkeyup="javascript:habilitaFiltroMunicipioOnKeyUp(this.value);" /> 


<h:selectManyCheckbox id="cboxFilterMunicipio" layout="pageDirection" label="Filtros para Município">  
                 <f:selectItems id="idItemMunicipio" value="#{gmBean.filtroMunicipio}" />  
</h:selectManyCheckbox>

Crie um arquivo js e carrega no head da sua pagina.. e lá.. crie função para desabilitar por defaul.. exemplo

function onload(){
document.getElementById('cboxFilterMunicipio').disabled = true;
}
function habilitaFiltroMunicipioOnKeyUp(input){
if(input.value=='EQUALS'){
document.getElementById('cboxFilterMunicipio').disabled = false;
}else
document.getElementById('cboxFilterMunicipio').disabled = true;
}

dev.rafael 6 de out. de 2010

Qualquer solução usando javascript é insegura pois do ponto de vista do servidor o h:selectManyCheckbox sempre está ativado mesmo q no cliente ele esteja desativado. Soluções baseadas em javascript podem facilmente ser hackeadas através de recursos como o Firebug do Firefox ou as funcionalidades de suporte a desenvolvimento de browsers como o Chrome, Opera ou IE 8>. Basta vc inspecionar o código e mudar a propriedade disabled do componente. A unica solução garantida foi esse q eu informei.

Priuli 6 de out. de 2010

Verdade… o correto mesmo é utilizar as tag do jsf, a validação via JS fica sujeito a falhas de segurança… mais caso o jsf não consiga realizar há sim outra solução que deve ser tomada e com muita cautela e a segurança ficará na mão do desenvolv. q terá q fazer-manualmente

dadivajah 7 de out. de 2010

Gostaria muito de agradecer a grande ajuda, vlw dev.rafael e Priuli, pessoas assim tornam esse forum muito bom e respeitado.

Criado 6 de outubro de 2010

Ultima resposta 7 de out. de 2010

Respostas 10

Participantes 3

10 Respostas

Topicos relacionados