Como vocês podem ver a seleção é feita via ajax dentro do componente : <p:autoComplete id="autoCompleteCidades" completeMethod="#{cidadeMB.autoCompleta}" forceSelection="true" m…

Como rolar (dar scroll) o <p:selectOneListBox> para a seleção quando o valor é escolhido?

Como vocês podem ver a seleção é feita via ajax dentro do componente <p:autoComplete>:

<p:autoComplete id="autoCompleteCidades" completeMethod="#{cidadeMB.autoCompleta}"
                                        forceSelection="true" minQueryLength="2" queryDelay="800">
                            <p:ajax event="itemSelect" listener="#{cidadeMB.handleSelecaoDeCidade}"
                                    update=":tabViewSistema:tabViewCadastro:formGeralCidades:panelGeralCidadesDireita,
                                             :tabViewSistema:tabViewCadastro:formGeralCidades:panelGeralCidadesEsquerda"/>
                        </p:autoComplete>
                        <p:spacer height="4" width="100%"/>

                        <!-- LISTA SELECTONE -->
                        <p:selectOneListbox id="scrollCidade" style="height: 310px; width: 100%;" value="#{cidadeMB.cidadeSelecionada}">
                            <f:selectItems value="#{cidadeMB.listaLazyNomeDeCidades}"/>
                            <p:ajax global="true" update="panelGeralCidadesDireita" listener="#{cidadeMB.pegaCidade}"
                                    onsuccess="editarCidades.enable(); removerCidades.enable();"/>
                        </p:selectOneListbox>

Quando o selectOneListBox é atualizado, a seleção é atualizada corretamente também. Mas a seleção não é visível porque ultrapassa os limites da caixa e não rola para que a posição seja visível. Como eu faço isso via primefaces ou javascript?

Obrigado a todos.

1 Resposta

Vin_ius_Abreu_de_Fra 29 de mai. de 2012

Tentei no oncomplete usar o código JQuery que dá scroll:

<p:autoComplete id="autoCompleteCidades" completeMethod="#{cidadeMB.autoCompleta}"
                                        forceSelection="true" minQueryLength="2" queryDelay="800">
                            <p:ajax event="itemSelect" listener="#{cidadeMB.handleSelecaoDeCidade}"
                                    update=":tabViewSistema:tabViewCadastro:formGeralCidades:panelGeralCidadesDireita,
                                             :tabViewSistema:tabViewCadastro:formGeralCidades:panelGeralCidadesEsquerda"
                                             oncomplete="$('#tabViewSistema:tabViewCadastro:formGeralCidades:scrollCidade').animate({scrollTop: $('li:contains(#{cidadeMB.cidadeSelecionada})').offset().top}, 2000);"/>
                        </p:autoComplete>

Mas dá o seguinte erro: “Syntax error, unrecognized expression: tabViewCadastro”. É como se não tivesse pegando o ID do componente.
Alguém sabe como resolvo? Valeu

1 Resposta

Topicos relacionados