I have a problem with DataTables and Excel. I use pdf and print function, it works well but Excel not. I have this message in the browser (with F12):
> Uncaught TypeError: f.parseXML is not a function
at a (buttons.html5.min.js:26)
at _Api.action (buttons.html5.min.js:26)
at v (dataTables.buttons.min.js:16)
at HTMLButtonElement.<anonymous> (dataTables.buttons.min.js:17)
at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)
My javascript:
<script type="text/javascript">
$(document).ready(function () {
var table = $('#summary').DataTable({
dom: 'Bfrtip',
buttons: ['excel', 'csv', 'pdf', 'print']});
});
</script>
My base.html.twig
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
{% block stylesheets %}{% endblock %}
</head>
<body>
<script type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/dataRender/datetime.js"></script>
<div class="container">
{% block body %}{% endblock %}
</div>
{% block javascripts %}{% endblock %}
</body>
</html>
The button appears but it doesn't work. I'm working with Chrome. I searched but I did not find the solution.
Thank you in advance.
You are using the slim version of jQuery which does not support the parseXML function. Use the normal version instead. For version 3.3.1 it will be:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
For all current versions go to https://code.jquery.com/jquery/ and choose the "minified" version of jQuery Core (and NOT the "slim minified" version).
Related
This question already has answers here:
TypeError: $(...).modal is not a function with bootstrap Modal
(14 answers)
Closed 1 year ago.
Possibly I did wrong script order,I am trying make a dynamic pop up modal, which will fetch data on click. my scripts are :
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome Intigration -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/responsive.css')}}">
<link rel="stylesheet" href="{{asset('css/fundraisers.css')}}">
<!-- <link rel="stylesheet" href="{{asset('css/support.css')}}"> -->
#yield('head-script')
<!-- must include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
{{-- for sweetalert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
integrity="sha512-
AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script type="text/javascript" src="{{asset('js/languageChange.js')}}"></script>
<script src="{{ asset('js/share.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<title>Mortfund</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap"
rel="stylesheet">
Laravel Body tag goes here ------
<script src="{{ url('js/authentication.js') }}"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
</script>
<script src="{{asset('js/script.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">
</script>
<script src="{{asset('js/jquery.countup.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script>
I excluded html and body tags to reduce the amount of code, which is not good for a posting in stack overflow. If you have any question please ask me.
Because you loaded JQuery thrice :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You need to load JQuery once in a page, If you loaded JQuery more than once then you will face error, Why do I need to load jquery twice
Hello
I trying init bootstrap-year-calendar , i have no idea why its not working.
In this case i downloaded files but i was trying with npm with same effect.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap-year-calendar.css">
</head>
<body>
<h1>Hello, world</h1>
<div data-provide="calendar"></div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="bootstrap-year-calendar.js"></script>
<script>
$('#calendar').calendar();
</script>
</html>
You have to call the function after the dom content load finish. So try this
$( document ).ready(function() {
$('#calendar').calendar();
});
In jquery-3.3.1.slim.min.js not function fadeIn.
try use
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
I'm attempting to integrate datatables with bootstrap 4 and there are some major conflicts. I am getting the page navigation and the buttons in the style of bootstrap 4 but my table looks like a general HTML table with random bolded borderlines. I believe that my styles are getting overridden somewhere but I can't for the life of me figure out where...
imgur link here https://imgur.com/a/2nkm4F0
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.2.2/css/autoFill.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.3.2/css/keyTable.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.4/css/scroller.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.bootstrap4.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/dataTables.autoFill.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/autoFill.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.3.2/js/dataTables.keyTable.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.4/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
I make sure that there is only 1 import of jquery 3.3.1 and 1 import of bootstrap's css and bootstrap.min.js.
EDIT: HTML for the table that I am using.
<div id="similar-results" class="tabcontent">
<h3>Similar Documents</h3>
<table border="1" class="dataframe table display" id="example">
From the Bootstrap documentation on tables:
Due to the widespread use of tables across third-party widgets like
calendars and date pickers, we’ve designed our tables to be opt-in.
Have you added the .table class to your <table> element?
I have set up this form. My jQuery and heading tags is as follows:
<head>
<title>Contact - The Old Thatch Inn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy|Yesteryear|Exo+2" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('form').validate();
});
</script>
</head>
The html5 required field shows up instead of anything else. See the site here: http://adonnelly759.students.cs.qub.ac.uk/thatch/sample.php
Issues here is with jQuery conflict because of multiple jQuery libraries. I have removed last external script and I can see error messages right under each fields.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<!-- MODIFICATION HERE -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
**getting this error "Uncaught TypeError: Object # has no method 'tree' "
at this "$('#tree1').tree" code line
Refer this eg http://mbraak.github.com/jqTree/
the same code works on other page but it contains only
1.jqtree.css
2.div id=tree1 div
3. and three jquery file jquery-1.8.0.js, tree.jquery.js and prism.js
4. contains the fumction code written in script tag below
<head>
<title>Ksa Maps</title>
<link href="../Css/Site.css" rel="stylesheet" type="text/css" />
<link href="../Css/advancedtable.css" rel="stylesheet" type="text/css" />
<link href="../Css/AdvTblStyle.css" rel="stylesheet" type="text/css" />
<link href="../Css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<link href="../Css/CityFilter.css" rel="stylesheet" type="text/css" />
<link href="../Css/ddsmoothmenu.css" rel="stylesheet" type="text/css" />
<link href="../Css/dcmegamenu.css" rel="stylesheet" type="text/css" />
<link href="../Js/autoCombo/tryy.css" rel="stylesheet" type="text/css" />
<link href="../Js/autoCombo/demos.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<link href="../jquery.confirm/jquery.confirm.css" rel="stylesheet" type="text/css" />
<!-- Tree-->
<link href="../Css/jqtree.css" rel="stylesheet" type="text/css" />
<!--<link href='http://fonts.googleapis.com/css?family=Corben:bold&v1' rel='stylesheet' type='text/css'>-->
<!-- Tree-->
</head>
<body>
<div id="tree1"></div>
<script src="../Js/autoCombo/jquery-1.8.0.js" type="text/javascript"></script>
<!-- tree -->
<script src="../Js/prism.js" type="text/javascript"></script>
<script src="../Js/tree.jquery.js" type="text/javascript"></script>
<!-- tree -->
<script src="../Js/autoCombo/jquery.ui.core.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.button.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.position.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../Js/JQuery.js" type="text/javascript"></script>
<script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../Js/picnet.table.filter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true"></script>
<script src="../Js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="../Js/advancedtable.js" type="text/javascript"></script>
<script src="../Js/ddsmoothmenu.js" type="text/javascript"></script>
<script src="../Js/poiScript.js" type="text/javascript"></script>
<script src="../Js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="../Js/jquery.dcmegamenu.1.3.3.min.js" type="text/javascript"></script>
<script src="../Js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../Js/jquery.dcmegamenu.1.3.3.js" type="text/javascript"></script>
<script src="../Js/menu.js" type="text/javascript"></script>
<script src="../Js/autoCombo/TRYY.js" type="text/javascript"></script>
<script src="../jquery.confirm/jquery.confirm.js" type="text/javascript"></script>
<script>
$(function() {
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
});
</script>
</body>
</html>
Move your tree.jquery.js <script> after your actual jquery.js <script>:
<div id="tree1"></div>
<script src="../Js/autoCombo/jquery-1.8.0.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.core.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.button.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.position.js" type="text/javascript"></script>
<script src="../Js/autoCombo/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../Js/JQuery.js" type="text/javascript"></script>
<script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../Js/picnet.table.filter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true"></script>
<script src="../Js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="../Js/advancedtable.js" type="text/javascript"></script>
<script src="../Js/ddsmoothmenu.js" type="text/javascript"></script>
<script src="../Js/poiScript.js" type="text/javascript"></script>
<script src="../Js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="../Js/jquery.dcmegamenu.1.3.3.min.js" type="text/javascript"></script>
<script src="../Js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../Js/jquery.dcmegamenu.1.3.3.js" type="text/javascript"></script>
<script src="../Js/menu.js" type="text/javascript"></script>
<script src="../Js/autoCombo/TRYY.js" type="text/javascript"></script>
<script src="../jquery.confirm/jquery.confirm.js" type="text/javascript"></script>
<!-- tree -->
<script src="../Js/prism.js" type="text/javascript"></script>
<script src="../Js/tree.jquery.js" type="text/javascript"></script>
<!-- tree -->
Actually, it looks like you're including lots of jQuerys. You need to delete a lot of those.