1

main.xhtml 页面包含：

    <script src="#{applicationBean.resourcePath}/admin/js/jquery.min.js"></script>
    <script src="#{applicationBean.resourcePath}/admin/js/jquery.actual.min.js"></script>
    <script src="#{applicationBean.resourcePath}/admin/bootstrap/js/bootstrap.min.js"></script> 

    <!-- smart resize event -->
    <script src="#{applicationBean.resourcePath}/admin/js/jquery.debouncedresize.min.js"></script>
    <!-- js cookie plugin -->
    <script src="#{applicationBean.resourcePath}/admin/js/jquery.cookie.min.js"></script>
    <!-- js ui -->
    <script src="#{applicationBean.resourcePath}/admin/js/jquery-ui.custom.min.js"></script>
    <!-- tooltips -->
    <script src="#{applicationBean.resourcePath}/admin/lib/qtip2/jquery.qtip.min.js"></script>
    <!-- jBreadcrumbs -->
    <script src="#{applicationBean.resourcePath}/admin/lib/jBreadcrumbs/js/jquery.jBreadCrumb.1.1.min.js"></script>
    <!-- sticky messages -->
       <script src="#{applicationBean.resourcePath}/admin/lib/sticky/sticky.min.js"></script>           
    <!-- common functions -->


     <script src="#{applicationBean.resourcePath}/admin/lib/validation/jquery.validate.min.js"></script>


     <script src="#{applicationBean.resourcePath}/admin/lib/tinymce/tiny_mce/tiny_mce.js"></script>     






<script>
    $.ajax({            
                            type: 'POST',   
                            url: '#{request.contextPath}/view/user/'+ page +'.xhtml',

                            success: function(data) {   
                                $('#main_content').html(data);

                            }   
                        });
<script>

正如您在上面看到的，我可以将 xhtml 页面（如下面的页面）包含到 main.xhtml

xhtml 页面中的行（确切顺序）

    <!-- datatable -->
    <script
        src="#{applicationBean.resourcePath}/admin/lib/datatables/jquery.dataTables.min.js"></script>
    <script
        src="#{applicationBean.resourcePath}/admin/lib/datatables/extras/Scroller/media/js/Scroller.min.js"></script>

    <link rel='stylesheet'
        href='#{applicationBean.resourcePath}/admin/css/ui.dynatree.css' />

    <!-- validation -->
    <script
        src="#{applicationBean.resourcePath}/admin/lib/validation/jquery.validate.min.js"></script>

    <!-- sticky messages -->
    <script
        src="#{applicationBean.resourcePath}/admin/lib/sticky/sticky.min.js"></script>

    <script
        src="#{applicationBean.resourcePath}/admin/bootstrap/js/bootstrap.min.js"></script>


    <script
        src='#{applicationBean.resourcePath}/admin/js/jquery.dynatree.js'
        type='text/javascript'></script>
    <script type='text/javascript'
        src='http://localhost:9090/app/dwr/util.js'></script>
    <script type='text/javascript'
        src='http://localhost:9090/app/dwr/engine.js'></script>
    <script type='text/javascript'
        src='http://localhost:9090/app/dwr/interface/ldapService.js'></script><script src='#{applicationBean.resourcePath}/admin/js/custom/organization.js'></script>

来自organization.js 的一行

treeDiv.dynatree('destroy');

我希望没有错误，因为“有时”它可以工作，但有时会给出“'treeDiv.dynatree' is not a function”

在 Chromium 中，我可以在 developer tools> network 中看到一个链接，然后单击它可以查看源代码：

jquery.dynatree.js?_=1377244144331
4

2 回答 2

1

这可能是由于放置 javascript 文件的错误顺序引起的问题。

先打电话jquery.dynatree.js，然后organization.js像下面这样。

<script
        src='#{applicationBean.resourcePath}/admin/js/jquery.dynatree.js'
        type='text/javascript'></script>

<script src='.../organization.js'type='text/javascript'></script>

从您更新的问题：

“有时”它有效，但有时给出“'treeDiv.dynatree' 不是函数”

可能是其他一些js文件引起的问题。

于 2013-08-23T08:02:39.160 回答
1

如果我正确理解了您的架构（我不确定我是否正确），那么您的单页应用程序位于main.xhtml. 该应用程序使用 AJAX 加载看似完整的 XHTML 文档，然后在父页面中插入 HTML：

$('#main_content').html(data);

无论此类内页包含的依赖于用于初始化的文档加载事件的 JavaScript 代码，都可能无法按预期工作。

例如，您 load organization.js，其中包含以下内容：

treeDiv.dynatree('destroy');

...触发：

'treeDiv.dynatree' 不是函数

这意味着当该行代码运行时，treeDiv变量尚未正确初始化。

于 2013-08-23T09:17:55.127 回答