点击 p:commandButton 后 Primefaces gmap 不显示（ReferenceError: google is not defined ）答案

【问题标题】：Primefaces gmap doesn't show after click on p:commandButton (ReferenceError: google is not defined )点击 p:commandButton 后 Primefaces gmap 不显示（ReferenceError: google is not defined ）
【发布时间】：2014-04-23 18:07:37
【问题描述】：

我在更新页面后看到 gmap。如果我不更新页面，我会在 chrome 控制台中收到错误

Uncaught ReferenceError: google is not defined index.xhtml:1
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

<h:body>
    <ui:composition template="/WEB-INF/template/layout_template.xhtml">
        <ui:define name="windowTitle">
            Admin Panel
        </ui:define>
        <ui:define name="content">
            <h:form>            

            <div class="panel panel-default">
                <div class="panel-heading">Map</div>
                <div class="panel-body">
                    <p:gmap type="roadmap" center="50.00, 28.00" zoom="8" style="width: 1000px; height: 400px;"/>
                </div>
            </div>
            </h:form>

            <!--<h:outputScript name="app/google-map-loader.js" library="js" target="head"/>-->
            <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
            </script>
        </ui:define>
    </ui:composition>

</h:body>
</html>

我的页脚模板

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

<body>
<ui:composition>
    <div class="bottom-nav footer"> 2013 &copy; by Me</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <h:outputScript name="lib/bootstrap.min.js" library="js" target="body"/>
    <h:outputScript name="app/smooth-sliding-menu.js" library="js" target="body"/>
</ui:composition>
</body>
</html>

我在文档中读到

但我不想将 gmap 脚本放在主模板的头部。是否可以在没有重定向的情况下使其工作。是否可以在子模板的头部添加脚本

【问题讨论】：

您可以随时执行/调用 JavaScript 方法，无需重定向即可实现。对于第二个问题，您可以在子模板中使用h:outputScript。
@SujanSivagurunathan 我无法将外部网址放入 h:outputScipt
<script src="http://maps.google.com/maps/api/js?sensor=true|false"></script> 应该在由表单包裹的子模板中工作。怎么了？
@SujanSivagurunathan 我得到 'Uncaught ReferenceError: google is not defined'。
在加载 gmap 之前尝试加载脚本。将脚本标签放在 gmap 之前。

标签： jsf jsf-2 primefaces

【解决方案1】：

我找到了解决这个问题的方法。在上一页我有 p:commandButton

<p:commandButton value="Login" action="#{loginBean.navigateToDashboard()}" ajax="false"
                                 styleClass="btn btn-default btn-block"/>

我没有 ajax="false" 属性，但页面已更改，我不知道为什么。现在，使用非 ajax 提交我没有遇到任何问题。

【讨论】：