CODEWITHSUNDEEP
javascript
merveotesi
merveotesi

Reputation: 2183

Wrong JavaScript Including

A main.xhtml page contains:

    <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>

As you can see above i can include xhtml pages(like below page) into main.xhtml

Lines from an xhtml page (exact order)

    <!-- 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>

A line from organization.js

treeDiv.dynatree('destroy');

I expect no error, because "sometimes" it works, but sometimes gives "'treeDiv.dynatree' is not a function"

In Chromium i can see a link in developer tools> network, and click it and can view source:

jquery.dynatree.js?_=1377244144331

Upvotes: 1

Views: 199

Answers (2)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146410

If I understand your architecture correctly (I'm not sure I do) you have a single-page application located at main.xhtml. That application makes use of AJAX to load what appears to be a complete XHTML document and then inserts the HTML in the parent page:

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

Whatever JavaScript code such inner page contains that depends on the document load event for initialisation might not work as expected.

For instance, you load organization.js, which contains this:

treeDiv.dynatree('destroy');

... which triggers:

'treeDiv.dynatree' is not a function

That means that when that line of code runs the treeDiv variable has not been properly initialised.

Upvotes: 1

Praveen
Praveen

Reputation: 56501

This maybe an issue caused due to wrong order of placing javascript files.

Call jquery.dynatree.js first then organization.js like below.

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

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

From your updated question:

"sometimes" it works, but sometimes gives "'treeDiv.dynatree' is not a function"

There maybe an issue caused by some other js files.

Upvotes: 1

Related Questions