I'm creating a control to which datetimepicker is bound. I've done binding it to the control. This is how I've done:
Html:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-6">Year-Month</label>
<div class="col-sm-6">
<input type="text" id="year_month" name="year_month" class="form-control" placeholder="Year, Month">
</div>
</div>
</div>
</div>
javascript:
jQuery('#year_month').datetimepicker({ format: 'YYYY-MM' });
jQuery("#year_month").val(moment().format("YYYY-MM"));
alert(jQuery("#year_month").val());
jQuery("#year_month").on("change", function(){
alert("coming here!");
});
The thing is, this is working properly when the page is loaded. ie the current year and current month is displayed correctly. I have to trigger a change event when I change the month or year. But, when I try to change the month or year, it shows, "TypeError: widget.find is not a function" error. What is wrong with this code? What should I do for the change event? These are the plug-ins I've added:
<script src="js/moment-with-locales.js" type="text/javascript" language="javascript"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript" language="javascript"></script>
moment-with-locales.js is for displaying current year, month, date.
bootstrap-datetimepicker.js is for calender view.
And my jquery version is: jQuery v1.11.3.
Plug-ins added are:
<script src="js/jquery-1.11.3.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript" language="javascript"></script>
This is the order I've placed my references:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/select2.css" rel="stylesheet">
<link href="css/select2-bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="css/switch.css" rel="stylesheet">
<link href="css/notifIt.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/pace-theme-minimal.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery.datatable/buttons.dataTables.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript" language="javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript" language="javascript"></script>
<script src="js/select2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/buttons.print.min.js"></script>
<script src="js/dataTables.bootstrap.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.dataTables.rowGrouping.js" type="text/javascript" language="javascript"></script>
<script src="js/moment-with-locales.js" type="text/javascript" language="javascript"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript" language="javascript"></script>
<script src="js/notifIt.js" type="text/javascript" language="javascript"></script>
<script src="js/pace.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.extend.js" type="text/javascript" language="javascript"></script>
Help me clearing this out.
Related
I use the scripts and style files below and so with that queue the colvis button doesnt open..
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" rel="stylesheet" >
<link href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="preconnect">
<link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css" >
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.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.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
But whenever I delete the ,
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
file the button works but style is gone this time...
What is my mistake , any idea?
THAT BUTTON NOT WORKING IMAGE
THAT BUTTON STYLE GONE
AT last I found the correct one below..
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" >
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap">
<link rel="stylesheet" type="text/css" href="https://fonts.gstatic.com">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
This is my index.html - as you can it has lots of external css and js files.
I wonder if there is any way to fix this.
See the index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="main" ng-cloak>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>{{title}}</title>
<!--favicon icon-->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!--common style-->
<link href="assets/vendor/bootstrap/css/bootstrap.rtl.css" ng-if="$root.locale=='he-IL'" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.css" ng-if="$root.locale!='he-IL'" rel="stylesheet">
<link href="assets/vendor/lobicard/css/lobicard.css" rel="stylesheet">
<link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
<link href="assets/vendor/wesather-icons/css/weather-icons.min.css" rel="stylesheet">
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<!--toastr-->
<link href="assets/vendor/toastr-master/toastr.css" rel="stylesheet">
<!--select2-->
<link href="assets/vendor/select2/css/select2.css" rel="stylesheet">
<link href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' rel='stylesheet' type='text/css' media='all' />
<!--custom css-->
<link href="assets/css/main.rtl.css" ng-if="$root.locale=='he-IL'" rel="stylesheet">
<link href="assets/css/main.css" ng-if="$root.locale!='he-IL'" rel="stylesheet">
<link href="assets/css/custom.rtl.css" ng-if="$root.locale=='he-IL'" rel="stylesheet">
<link href="assets/css/custom.css" ng-if="$root.locale!='he-IL'" rel="stylesheet">
<link href="assets/css/custom-both.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/vendor/html5shiv.js"></script>
<script src="assets/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body ng-show="initSrc" class="app header-fixed left-sidebar-fixed right-sidebar-fixed right-sidebar-overlay right-sidebar-hidden">
<app></app>
<!-- assets scripts -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-route.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.2/angular-sanitize.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js' type='text/javascript'></script>
<script src="assets/vendor/popper.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/jquery-ui-touch/jquery.ui.touch-punch-improved.js"></script>
<script class="include" type="text/javascript" src="assets/vendor/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/vendor/lobicard/js/lobicard.js"></script>
<script src="assets/vendor/jquery.scrollTo.min.js"></script>
<script src="assets/vendor/date-picker/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/vendor/select2/js/select2.min.js"></script>
<!--toastr-->
<script src="assets/vendor/toastr-master/toastr.js"></script>
<!--[if lt IE 9]>
<script src="assets/vendor/modernizr.js"></script>
<![endif]-->
<!-- app scripts -->
<script src="app/app.js" charset="utf-8"></script>
<script src="app/run.js" charset="utf-8"></script>
<script src="app/main.js" charset="utf-8"></script>
<!-- app services -->
<script src="app/services/helpers/modules-service.js" charset="utf-8"></script>
<script src="app/services/helpers/defaults-service.js" charset="utf-8"></script>
<script src="app/services/helpers/query-string-service.js" charset="utf-8"></script>
<script src="app/services/helpers/object-manipulation-service.js" charset="utf-8"></script>
<script src="app/services/helpers/array-manipulation-service.js" charset="utf-8"></script>
<script src="app/services/helpers/auto-redirect-service.js" charset="utf-8"></script>
<script src="app/services/init-service.js" charset="utf-8"></script>
<script src="app/services/http-service.js" charset="utf-8"></script>
<script src="app/services/filter-service.js" charset="utf-8"></script>
<script src="app/services/cast-service.js" charset="utf-8"></script>
<script src="app/services/socket-service.js" charset="utf-8"></script>
<script src="app/services/local-storage-service.js" charset="utf-8"></script>
<script src="app/services/authentication-service.js" charset="utf-8"></script>
<script src="app/services/parse-service.js" charset="utf-8"></script>
<script src="app/services/translation-service.js" charset="utf-8"></script>
<script src="app/services/toast-service.js" charset="utf-8"></script>
<script src="app/services/confirmation-modal-service.js" charset="utf-8"></script>
<!-- shared screens -->
<script src="screens/shared/cardboards/users/users.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users/components/list-users/list-users.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users/components/create-user-modal/create-user-modal.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users/components/attach-user-to-department-modal/attach-user-to-department-modal.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users-detail/users-detail.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users-detail/components/edit-user/edit-user.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments/departments.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments/components/list-departments/list-departments.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments/components/create-department-modal/create-department-modal.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments-detail/departments-detail.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments-detail/components/edit-department/edit-department.js" charset="utf-8"></script>
<script src="screens/shared/settings/permissions/permissions.js" charset="utf-8"></script>
<script src="screens/shared/settings/permissions/components/permissions-table/permissions-table.js" charset="utf-8"></script>
<!-- root screens -->
<script src="screens/root/overview/overview.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/suppliers.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/components/create-suppliers-modal/create-suppliers-modal.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/components/edit-supplier/edit-supplier.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/components/list-suppliers/list-suppliers.js" charset="utf-8"></script>
<!-- suppliers screens -->
<script src="screens/suppliers/overview/overview.js" charset="utf-8"></script>
<script src="screens/suppliers/account/general-details/general-details.js" charset="utf-8"></script>
<script src="screens/suppliers/account/billing/billing.js" charset="utf-8"></script>
<script src="screens/suppliers/account/payment-methods/payment-methods.js" charset="utf-8"></script>
<!-- auth screens -->
<script src="screens/auth/login/login.js" charset="utf-8"></script>
<script src="screens/auth/login/components/request-sms/request-sms.js" charset="utf-8"></script>
<script src="screens/auth/login/components/reset-password/reset-password.js" charset="utf-8"></script>
<!-- shared components -->
<script src="shared/forms/services/selector-service.js" charset="utf-8"></script>
<script src="shared/forms/datepicker/datepicker.js" charset="utf-8"></script>
<script src="shared/forms/smart-select/smart-select.js" charset="utf-8"></script>
<script src="shared/forms/text-input/text-input.js" charset="utf-8"></script>
<script src="shared/forms/autocomplete/autocomplete.js" charset="utf-8"></script>
<script src="shared/forms/birthday-input/birthday-input.js" charset="utf-8"></script>
<script src="shared/filters/pagination/pagination.js" charset="utf-8"></script>
<script src="shared/filters/search-filter/search-filter.js" charset="utf-8"></script>
<script src="shared/filters/status-filter/status-filter.js" charset="utf-8"></script>
<script src="shared/filters/sort-filter/sort-filter.js" charset="utf-8"></script>
<script src="shared/filters/date-filter/date-filter.js" charset="utf-8"></script>
<script src="shared/general-errors/general-errors.js" charset="utf-8"></script>
<script src="shared/confirmation-modal/confirmation-modal.js" charset="utf-8"></script>
<script src="shared/status-badge/status-badge.js" charset="utf-8"></script>
<script src="shared/page-title/page-title.js" charset="utf-8"></script>
<script src="shared/page-title/services/breadcrumb-service.js" charset="utf-8"></script>
<script src="shared/list-header/list-header.js" charset="utf-8"></script>
<script src="shared/breadcrumbs/breadcrumbs.js" charset="utf-8"></script>
<script src="shared/loading-spinner/loading-spinner.js" charset="utf-8"></script>
<script src="shared/alert-bar/alert-bar.js" charset="utf-8"></script>
<script src="shared/no-content-placeholder/no-content-placeholder.js" charset="utf-8"></script>
<script src="shared/dropdown/dropdown.js" charset="utf-8"></script>
<!-- structure scripts -->
<script src="structure/header/header.js" charset="utf-8"></script>
<script src="structure/header/components/save-button/save-button.js" charset="utf-8"></script>
<script src="structure/header/components/profile-menu/profile-menu.js" charset="utf-8"></script>
<script src="structure/footer/footer.js" charset="utf-8"></script>
<script src="structure/sidebar/sidebar.js" charset="utf-8"></script>
<script src="structure/sidebar/services/path-service.js" charset="utf-8"></script>
<script src="structure/sidebar/services/menu-service.js" charset="utf-8"></script>
<script src="structure/sidebar/services/root-menu-exporter.js" charset="utf-8"></script>
<script src="structure/sidebar/services/supplier-menu-exporter.js" charset="utf-8"></script>
<script src="structure/aside/aside.js" charset="utf-8"></script>
<!-- analytical scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js" charset="utf-8"></script>
</body>
</html>
I have tried to wrap the project using Webpack and build one bundle file for those JS external codes.
However I don't find this way of working to be so efficient - I still let my users to download
the whole project's components, controllers and services at initial load - which is for sure not the
right way to make it.
In old web development you would include only the required structural external js and css and
the specific files that are required for the same page.
Since this is a SPA app, how should it be done?
And I have some more tiny question about AngularJS services injections.
In order to use a service in a controller I have to first inject it.
But I anyway have to load it's js file in the index.html and request it's data from a remote server - even when I don't injects and use it in any controller.
So if I anyway processing the service, why should I inject it or maybe, why the injection doesn't includes the async request of the file's code?
You can't avoid the user to download the code. One thing you can do is uglify & combine all the JS files in one file & css files in one file. So, if someone download your code they can't understand the logic written in the source.
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?
**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.
I've included fancybox2 files like instructed here
http://fancyapps.com/fancybox/#instructions
using my extensions xml and
<action method="addJs">
for javascript files and
<action method="addItem">
for css.
Order of my included js and css files inside my :
<link rel="stylesheet" type="text/css" href="magento/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="magento/js/n123/fancybox2/source/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="magento/js/prototype/prototype.js"></script>
<script type="text/javascript" src="magento/js/lib/ccard.js"></script>
<script type="text/javascript" src="magento/js/prototype/validation.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="magento/js/varien/js.js"></script>
<script type="text/javascript" src="magento/js/varien/form.js"></script>
<script type="text/javascript" src="magento/js/varien/menu.js"></script>
<script type="text/javascript" src="magento/js/mage/translate.js"></script>
<script type="text/javascript" src="magento/js/mage/cookies.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery.no.conflict.js"></script>
<script type="text/javascript" src="magento/js/varien/product.js"></script>
<script type="text/javascript" src="magento/js/varien/configurable.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="magento/js/n123/fancybox2/source/jquery.fancybox.pack.js"></script>
Then inside my template (phtml) I've added following code:
<a id="single_1" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Assunção - Santo Tirso...a New Dimension... (Alex Matos)">
<img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
</script>
In Chrome this error occurs:
http://www.imagebanana.com/view/6oxxttnx/s02.png
Uncaught TypeError: Object function wrap(wrapper) {
var __method = this;
return function()
{
var a = update([__method.bind(this)], arguments) ;
return wrapper.apply(this, a);
}
} has no method 'unbind'
Every help is welcome!
I've found a soulution: in my case the packed "fancybox.pack.js" didn't work and I got that error posted above but the "fancybox.js" ("unpacked"/normal version) works like a charm! Thanks for your support and attention.