Question

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'不是一个函数”

在Chromium中，我可以看到开发者工具中的链接＆gt;网络，然后单击它，可以查看源：

jquery.dynatree.js?_=1377244144331

Answer 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文件引起的问题。

Answer 2

如果我正确理解您的架构（我不确定），您可以在main.xhtml找到单页应用程序。该应用程序使用AJAX加载看似完整的XHTML文档，然后在父页面中插入HTML：

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

这样的内页包含的JavaScript代码依赖于初始化的文档加载事件可能无法正常工作。

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

treeDiv.dynatree('destroy');

...触发：

'treeDiv.dynatree'不是函数

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

错误的JavaScript包括

2 个答案: