Question

我在ui：include组件中放置一个Primeface p：gmap时出现问题。我使用的是最后一个版本的primeface，mojarra和Tomcat 8。

这是我的布局组件，我尝试渲染我的谷歌地图：

<p:layoutUnit id="main_content" position="center" >
        <ui:include src="#{pageManagingBean.page}.xhtml" /> 
    </p:layoutUnit>

在同一页面我有一个按钮，当我点击这个：

    <p:menuitem value="Display referencies Map" actionListener="#{pageManagingBean.setPage('gmapdata')}" icon="ui-icon-disk" update=":main_content" ajax="true"/>

使用p：gmap在页面中更改pageManagingBean.page的值，并且无需重新加载整个页面，ui：include应该在中心布局中加载gmap，这是gmapdata.xhtml：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">


    <h:head>
        <title>Google Map Displayed</title>
         <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
    </h:head>    
    <h:body>


        <h1>Google Map</h1>

        <f:view contentType="text/html">
        <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%" widgetVar="gmap"  />
    </f:view>

    </h:body>

</html>

当我点击菜单项时，中心布局没有显示任何内容，但是如果我更改p:menuitem ajax="true"中的ajax="false"所有工作正常并且gmap显示在正确的位置，那么为什么gmap don＆＃39 ; t渲染在ajax但没有工作正常吗？

修改

这个问题不仅是页面gmap的渲染，也是我尝试在布局的那一部分加载ajax的其他页面的渲染，例如，我有一个页面，其中包含应该显示的工作表相同的机制，但仅在我强加ajax = false并随后更新整个页面时显示。

更新

我做了几次测试，因此用gmap构成了页面，

<h:head>

    <script src="http://maps.google.com/maps/api/js?sensor=false" 
              type="text/javascript"></script>
    </h:head>
    <h:body>



        <f:view contentType="text/html">
            <h1>Google Map</h1>
            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBIRD"
                    style="width:600px;height:400px" />
        </f:view>
    </h:body>

</html>

并将ui:include包含在<h:form id="main_content">标记中，感谢p:menuItem...update="main_content" 标记中的内容会添加到包含ui : include的页面，但不会呈现地图，但如果我手动输入ui : include，我的主页中的标记<gmap>：首先打开地图是为了渲染（映射在gmap中，而不是我手动编写的），但是当通过<p:menuItem>的常规函数在ajax中更新布局时，两个地图（gmap手动添加并由{{1加载] }}消失。显然一切都工作设置ajax = false。我无法解释这个问题

Answer 1

我不确定，但它可能与google地图脚本的位置相关

我的情况不同，我有一个使用ui的模板：inser ui：composition，ui：define，ui：include ...

我的模板：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <ui:insert name="resources">
        <ui:include src="/template/resources.xhtml"/>
    </ui:insert>

    <title>MyApp</title> 

    <ui:insert name="scripts"/>

    <link rel="icon" type="image/png" href="resources/img/favicon.png"/>
</h:head> 

<h:body>

    <f:view contentType="text/html">

        <ui:insert name="header">
            <ui:include src="/template/header.xhtml"/>
        </ui:insert>

        <ui:insert name="menu">
            <ui:include src="/template/menu.xhtml"/>
        </ui:insert>

        <ui:insert name="content"/>

        <ui:insert name="footer">
            <ui:include src="/template/footer.xhtml"/>
        </ui:insert>
    </f:view>
</h:body>
</html>

当我用g：map构建页面时，我做

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
            template="/template/template.xhtml"
            xmlns:p="http://primefaces.org/ui">

    <ui:define name="scripts">
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/>
    </ui:define>

    <ui:define name="content">
        <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%" widgetVar="gmap"/>
    </ui:define>
</ui:composition>

因为必须在头部加载脚本

当你使用ajax更新main_content时，头脑中会发生什么？

我认为你必须把脚本放在头部，形成一个beginig，这样无论如何都要用脚本加载页面。

修改

如果使用前向导航，则可能会出现问题，因为primefaces不支持

http://primefaces.org/faq.html

你必须在commandLink或commandButton的action属性中用“？faces-redirect = true”连接视图id

更新

通常有一个Javascript函数来初始化地图此函数（通常称为initialize（））调用页面的load事件

https://developers.google.com/maps/documentation/javascript/events

执行ajax请求时，应调用此函数初始化地图

我尝试执行你的代码但我有一个jquery错误：“TypeError：b未定义”jquery.js.xhtml：1：30 它似乎是一个javascript问题，我不知道如何解决它

Answer 2

更新表单标记：<h:form prependId="false" id="main_content">。在我的情况下，当我保持prependId =＆＃34; false＆＃34;。

时它会起作用

PrimeFaces Gmap无法在ui：include标签中呈现

2 个答案: