[Primefaces / JSF - jQuery] Atualizando pickList utilizando jQuery

Front-end
#1

Ola galera,

Estou com um problema aqui, pois estou tentando atualizar os valores de uma pickList.

Gostaria de discutir, se alguém souber como fazer, uma maneira para eu avançar nisso.

O que ocorre é que tenho 2 pickList.

1a. picklist: Tenho objetos do tipo Tarefa
2a. picklist: Tenho objetos do tipo Atividades

Cada objeto Tarefa, tem varios objetos Atividades. (@OneToMany)

Então o que estou tentando fazer (sem sucesso até o momento) é: quando selecionado um objeto do tipo Tarefa na picklist 1 carregasse todas as suas atividades correspondente na picklist 2.

O codigo que estou utilizando e sua explicação logo a seguir:

[code]


<p:fieldset legend=“Panneau Taches”>

<p:commandButton id=“updatePL” process=“pojoPickListActivite” style=“display:none"
action=”#{projetMediatorMB.pickListActivites}" update=“pojoPickListActivite” /> 
					<p:pickList id="pojoPickListTache" var="tache" value="#{projetMediatorMB.tachesDual}" itemValue="#{tache}"
						itemLabel="#{tache.nomTache}" converter="tacheConverter" filterMatchMode="contains" showSourceControls="true"
						showTargetControls="true" showSourceFilter="true" showTargetFilter="true" showCheckbox="true">

						<f:facet name="sourceCaption">Taches Effacé</f:facet>
						<f:facet name="targetCaption">Taches Ajoutées</f:facet>

						<p:ajax event="transfer" listener="#{projetMediatorMB.onTransferTaches}" update="msg" />
						
						<p:column> #{tache.nomTache} </p:column>

					</p:pickList>
				</p:fieldset>
			</div>
			</form>
			<!-- ##################Activites################ -->
			<div id="divActivites" style="width: 45%; float: right;">
				<p:fieldset legend="Panneau Activites">
					<p:pickList id="pojoPickListActivite" var="activite" value="#{projetMediatorMB.activitiesDual}" 
						itemValue="#{activite}" converter="activiteConverter" itemLabel="#{activite.nomActivite}"
						filterMatchMode="contains" showSourceControls="true" showTargetControls="true"
						showSourceFilter="true" showTargetFilter="true" showCheckbox="true">

						<f:facet name="sourceCaption">Activités Effacé</f:facet>
						<f:facet name="targetCaption">Activités Ajoutées</f:facet>

						<p:ajax event="transfer" listener="#{projetMediatorMB.onTransferActivites}" update="msg" />
						
						<p:column> #{activite.nomActivite} </p:column>
    					
					</p:pickList>
				</p:fieldset>
			</div>[/code]

Basicamente, o que gostaria de fazer é: quando selecionado um objeto na pickListTache, ele atualizaria o objeto Tache no ProjetMediatorMB e isso permitiria então de adicionar os objetos da atividade que desejo na outra pickList.

Tentei criar um script em jQuery, de acordo com a indicação de um amigo, porém ele não funciona (talvez por erro meu) e nem acionado ele é.
Ja olhei no firebug e esta tudo ok, sem mensagem de erro. Simplesmente ele não é chamado.

O commandButton seria para ser disparado, apos ser selecionado um elemento da pickListTache. O botão seria responsavel para processar o valor do objeto Tache no ProjetMediatorMB e atualizar a pickList, porém ele não processa (não estou sabendo como fazer).

Gostaria de sugestões/discutir se estou fazendo da forma certa, como deveria ser feito…

Estou aprendendo muito aqui no forum.

Muito obrigado a todos pela paciência.

Abraço

#2

Pelo que entendi está querendo selecionar dados de um pickList A e trazer os resultados para o pickList B!

Faço da seguinte forma utilizando Primefaces.


pagina.xhtml
<h:outputLabel value="#{rotulo['usuario.unidade']}" />
				        <p:pickList value="#{usuarioMBean.listModelUnidadeCadastro}" var="unidadeCadastro" converter="UnidadeTipo1EntityConverter"   
	                                   itemLabel="#{unidadeCadastro.nome}"  
	                                   itemValue="#{unidadeCadastro}" >
	                                   
	                    	<p:ajax event="transfer" listener="#{usuarioMBean.onTransferUsuario}" update="pickListLocalCadastro" />
	                    </p:pickList>
	                       
	                    <h:outputLabel value="#{rotulo['usuario.local']}" />
				        <p:pickList id="pickListLocalCadastro" value="#{usuarioMBean.listModelLocalCadastro}" var="localCadastro" converter="LocalEntityConverter"    
                                   itemLabel="#{localCadastro.nomeLocal}"  
                                   itemValue="#{localCadastro}">
                    	</p:pickList>

E ficando assim no Manager Bean.


/**
 * Manager Bean responsável pelo CRUD da entidade UsuarioEntity.
 * 
 * @author Eduardo Galego.
 */
@ManagedBean
@ViewScoped
public class UsuarioMBean {
/**
     * Evento disparado para popular o pick list de local.
     * @param event Evento.
     */
    public void onTransferUsuario(TransferEvent event) {
        UsuarioEntity usuario = getUsuarioEntitySession();

        List<UnidadeTipo1Entity> unidadesTarget = listModelUnidadeCadastro.getTarget();
        List<UnidadeTipo1Entity> unidadesSource = listModelUnidadeCadastro.getSource();

        List<UnidadeTipo1Entity> unidadesTransf = (List<UnidadeTipo1Entity>) event.getItems();

        List<LocalEntity> listTarget = new ArrayList<LocalEntity>();
        List<UnidadeTipo1Entity> unidadeConsulta = new ArrayList<UnidadeTipo1Entity>();
        List<UnidadeTipo1Entity> unidadeRemove = new ArrayList<UnidadeTipo1Entity>();

        for (UnidadeTipo1Entity unidade : unidadesTransf) {
            if (unidadesTarget.contains(unidade)) {
                unidadeRemove.add(unidade);
            }

            if (unidadesSource.contains(unidade)) {
                unidadeConsulta.add(unidade);
            }
        }

        for (UnidadeTipo1Entity unidade : unidadesTarget) {
            if (!unidadeConsulta.contains(unidade)) {
                unidadeConsulta.add(unidade);
            }
        }

        for (UnidadeTipo1Entity unidade : unidadeRemove) {
            if (unidadeConsulta.contains(unidade)) {
                unidadeConsulta.remove(unidade);
            }
        }

        try {
            for (UnidadeTipo1Entity unidade : unidadeConsulta) {
                List<LocalEntity> listaSource = usuarioBC.listarLocalPorUsuarioEUnidade(usuario, unidade);
                addToList(listTarget, listaSource);
            }

        } catch (BCException e) {
            logger.error("Erro ao criar lista de locais para cadastro{}: ", e);
        }

        listModelLocalCadastro = new DualListModel<LocalEntity>(listTarget, new ArrayList<LocalEntity>());
  
    }
}
#3

sfing,

Desculpe, você entendeu errado. Não quero fazer a transferência de objetos de uma pickList para outra.
O que você fez é popular pickListB - quando você muda objeto da source/target ou target/source da pickListA, por isso você usa o event=“transfer” do ajax.

O que quero fazer é: PEGAR o objeto Tarefa SELECIONADO na pickListA (atualizar o managedBean com o seu valor) e atualizar a pickListB,correspondente a objetos Atividades.

Para isso, creio que deveria haver um event=“selectItem” para o pickList da mesma forma que tem para o p:selectOneListbox.

Qualquer coisa só deixar comentário e obrigado por tentar ajudar.

#4

andrielc,

O que eu faço é exatamente o que pretende, no exemplo que mostrei. Ao selecionar a unidade no pickList A é disparado um evento, e verifico quais unidades estão no TARGET e apartir destas unidades, busco local da base de dados e populo o pickList B com os locais.

#5

sfing,

Ok, vou testar e ja atualizo aqui.

Levantei essa questão pois de acordo com a linha do seu codigo:

<p:ajax event=“transfer” listener="#{usuarioMBean.onTransferUsuario}" update=“pickListLocalCadastro” />

O Ajax dispara o evento somente quando é transferido elementos do tipo unidadeCadastro de uma lista target/source, source/target da pickListA.

Mas em todo caso vou seguir sua dica e testar.

Em breve posto aqui no forum. Até mais e obrigado pela explicação.

#6

Ah, Ok.

Entendi o que você fez,

Você pegou o objeto da Sessão do usuario. Isso é impossivel para eu fazer, não tenho ligação nenhuma entre o que estou fazendo e o usuario da Session.

Veja como o sistema é modelado para você ter uma noção do por que não funcionar.

Essa pagina que desenvolvo é responsavel para atualização e criação de um ProjetoMediador, OK… vamos la.

O modelo do meu sistema para a gestão e criação de Projetos é composto da seguinte maneira :

Projeto -> Tarefas -> Atividades -> Fases.

[list]Cada objeto Tarefa compõe uma Lista de objetos Atividade.[/list]
[list]Cada objeto Atividade compõe uma Lista de objetos Fases.[/list]

Ok, nessa pagina, devo fazer o seguinte:
Buscar o objeto Projeto com status “oferta” no banco e carregar os dados dele para possiveis atualização como : tipo de projeto, mudança de status, data de inicio do projeto, numero de horas alugadas para o projeto.

Como também, nessa parte eu devo selecionar Tarefas para esse Projeto Especifico.
E também, nessa parte devo selecionar Atividades de CADA Tarefa (quais eu quero para o meu Projeto, ou não).

Somente no momento em que eu mudar o status do projeto “oferta” para “venda” eu vou criar as “Fases”… A administração de cada Fase sera feita em outra tela que esta pronta.

Para administrar tudo isso, criei um ProjetoMediador.

Ele é responsavel por fazer as ligações entre os ID’s do Projeto com cada Tarefa, Atividade (selecionados) e Fases.
E portanto não é possivel eu fazer um:

Pois quem deve ser selecionado e atualizado, é o objeto Tarefa e ele não possui nenhuma sessão, por isso a idéiade usar javaScript com um button para forçar a ação de atualização de um objeto no ManagedBean do ProjetMediador.

Ficou claro pra você ?

Qualquer duvida, ou idéia, pode comentar, fazendo favor.

#7