AutoScrolling на странице JSF/Primefaces

Question

Я использую простые страницы и JSF2.0 для создания страницы.

На странице у меня есть две панели, когда я нажимаю на кнопку «Click-me» на одной панели, она отображает вторую панель на той же странице, что я хочу, когда я нажимаю кнопку «Click-me», страница также должна автоматически прокручиваться и должна выводить второй заголовок панели перед пользователем. В настоящее время пользователю необходимо вручную прокрутить вниз, чтобы увидеть вторую панель. Код, как показано ниже

XHTML Page

<h:form id="form1"> 
    <p:panel header="Panel One" id="PanelOne" > 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" > 

      <h:outputText value="First Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="" ></h:outputText> 
       <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}"> 
       </p:commandButton> 

     </h:panelGrid> 
    </p:panel> 

    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}"> 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" > 

      <h:outputText value="First Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

     </h:panelGrid> 
    </p:panel> 

</h:form> 

Managed Bean, как показано ниже

@ManagedBean 
@ViewScoped 
public class AutoScrollBean { 

private boolean renderPanelTwo; 

public boolean isRenderPanelTwo() { 
    return renderPanelTwo; 
} 

public void setRenderPanelTwo(boolean renderPanelTwo) { 
    this.renderPanelTwo = renderPanelTwo; 
} 

public void clickAction() { 
    System.out.println("Inside Method"); 
    setRenderPanelTwo(true); 
} 

}

EDIT:

<p:focus /> 

Используя вышеприведенную команду фокуса, curosr переходит в первое поле ввода и это поле ввода отображается пользователю после автоматического прокрутки, но я хочу показать пользователя из заголовка панели NOT из первого поля ввода.

Answer 1

Я сделал это с помощью JavaScript и испытано в IE только как мое требование не требуется вся совместимость с браузерами, поэтому я не тестировался на другой браузер.

Функция нужно JavaScript, чтобы поместить в заголовок: секции (ч головки), если вы используете структуру шаблона в JSF2.0

<script type="text/javascript"> 
    function ScrollPage(location) { 
     window.location.hash=location; 
    } 
</script> 

Создайте якорь в страницу, где вы хотите, чтобы прокрутить или якорь страница

<a id="anchorSecondPanel"> 

при нажатии командной кнопки вызвать эту функцию на OnComplete события

oncomplete="ScrollPage('anchorSecondPanel')" 

Полный модифицированный код для xhtml приведен ниже

<h:form id="form1"> 
    <p:panel header="Panel One" id="PanelOne" > 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" > 

      <h:outputText value="First Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="" ></h:outputText> 
       <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}" oncomplete="ScrollPage('FeatureMainPanel')"> 
       </p:commandButton> 

     </h:panelGrid> 
    </p:panel> 

    <a id="anchorSecondPanel"> 
    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}"> 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" > 

      <h:outputText value="First Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

     </h:panelGrid> 
    </p:panel> 

</h:form> 

Answer 2

Ну, просто добавьте javascript в свой xhtml.

<script>   
    function scroll() 
    { 
     var grid = $("#form1\\:PanelTwo .panelGrid");  
     $('html, body').animate({ 
      scrollTop : grid.offset().top 
     },4000);     
    }   
</script> 

И называют это, когда вы нажимаете кнопку:

<p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}" oncomplete="scroll()" > 

Это будет делать scrolltrick