PrimeFaces阿贾克斯导航与浏览器历史记录/包括hashtag [英] PrimeFaces Ajax Navigation with Browser History/Hashtag

问题描述

我实现了一个Web应用程序是一个单页的设计。基本上加载一个页面，然后用AJAX更新的核心内容。在code是如下：

I have implemented a web application which is a one-page-design. Which basically loads a single page then updates with AJAX the central content. The code is the following:

    <h:body>

        <pe:layout id="page" fullPage="true">


            <!-- West -->
            <pe:layoutPane id="west" position="west" >
                <f:facet name="header">Main Menu</f:facet>

                <h:form id="form1">

                    <p:panelMenu id="panelMenu">


                        <p:submenu label="Persons">

                            <p:menuitem value="Person List" update=":centerpanel"
                                actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}">                           
                            </p:menuitem>

                        </p:submenu>



                    </p:panelMenu>
                </h:form>
            </pe:layoutPane>

            <!-- Center -->
            <pe:layoutPane id="content" position="center">

                <h:panelGroup id="centerpanel" layout="block">
                    <ui:include id="include" src="#{layout.navigation}" />

                </h:panelGroup>

            </pe:layoutPane>
        </pe:layout>
</h:body>

这基本上是工作，但我想启用浏览器的导航，以及。例如像： http://ticketmonster-jdf.rhcloud.com/ 与URL上的井号标签。因此，使用后退/前进按钮，我可以去等效选项。 任何想法如何做到这一点？

This basically works, but I want to enable browser navigation as well. For example like: http://ticketmonster-jdf.rhcloud.com/ with the hashtags on the url. So using the back/forward button I can go to the equivalent option. Any idea how to do this?

推荐答案

我创建了一个博客文章，解释如何得到这个使用jQuery烧烤，根据你的问题的工作。

I have created a blog post explaining how to get this to work using jQuery BBQ, based on your question.

使用jQuery的烧烤，你可以跟踪的状态，历史和书签允许动态的同时，通过AJAX和/或DHTML修改网页..只要点击链接，请使用浏览器的背部和下一个按钮，重新加载页面..

With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page..

首先，我们应该包括 jQuery的烧烤。

First we should include jQuery BBQ.

<h:outputScript library="js" name="jquery.ba-bbq.min.js" /> 

现在考虑我们的菜单（我们所有的导航规则）

Now consider we have the menu (with all our nav rules)

  <p:submenu label="Meat">
     <p:menuitem outcome="/meat/steak.xhtml" value="Steak" />
     <p:menuitem outcome="/meat/burger.xhtml" value="Burger" />
     <p:menuitem outcome="/meat/chicken.xhtml" value="Chicken" /> 
     <p:menuitem outcome="/meat/kebab.xhtml" value="Kebab" /> 
  </p:submenu>

然后集中含量

Then the centered content

 <pe:layoutPane id="content" position="center">

     <h:panelGroup id="centerpanel" layout="block">
        <ui:include id="include" src="#{mainBean.currentNav}" />
     </h:panelGroup>

  </pe:layoutPane>

在包括的反映currentNav点击。

the include reflects the currentNav clicked.

现在定义的 remoteCommand 的形式里面

<p:remoteCommand name="updateNav" 
                 actionListener="#{mainBean.updateNav()}"  
                 update=":centerpanel"/>

根据包括hashtag这remoteCommand将更新我们的currentNav。

This remoteCommand will update our currentNav based on the hashtag.

创建您的JS文件或包含以下code到文档准备

Create your JS file or include the following code into the document ready

$(document).ready(function() {

   $('.ui-menuitem-link').click(function(event) {
       event.preventDefault();
       var currentNav = $(this).attr('href').
                        substr($(this).attr('href').indexOf("/faces") + 6)
       window.location.hash = '#' + currentNav;

   })

   $(window).bind('hashchange', function(e) {

    var url = $.param.fragment();
    updateNav([{name: 'currentNav', value: url}]); //remoteCommand Call

   })

   $(window).trigger('hashchange');

 });

基本上我们首先处理我们点击菜单项，设置窗口的哈希值。

Basically first we handle our clicks on the menu items, setting the hash of the window.

那么，我们定义窗口的hashchange的事件，使用jQuery烧烤的帮助。

then we define an event of the hashchange of the window, using the help of jQuery BBQ.

ManagedBean 的

public void updateNav() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    currentNav = (String) map.get("currentNav");
}

有关完整的code，请看看我的新职位的问题产生。

For a complete code, please see my newly post created for the question.

Primefaces散列导航使用jQuery烧烤

和同样的例子可在 github上。

希望它帮助。

这篇关于PrimeFaces阿贾克斯导航与浏览器历史记录/包括hashtag的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！