Level 104
how many times do you include jQuery????
What is in the uncompiled app.js?
1 like
Apr 17, 2022
9
Level 1
Problem with <script src="{{ asset('js/app.js') }}"defer></script>
Hello,
I have a problem with this script. If I delete this script, line with #datepicker works properly, but my vue components doesn't work anymore...If I don't delete, my vue works but doesn't work anymore this #datepicker. app.blade.php:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- <title>{{ config('app.name', 'Dispensar') }}</title> -->
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- datepicker -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{asset('template/dist/css/theme.min.css')}}">
<!-- for datapicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<!-- for datapicker -->
</head>
footer.blade.php
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>window.jQuery || document.write('<script src="src/js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="{{asset('template/plugins/popper.js/dist/umd/popper.min.js')}}"></script>
<script src="{{asset('template/plugins/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<script src="{{asset('template/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js')}}"></script>
<script src="{{asset('template/plugins/screenfull/dist/screenfull.js')}}"></script>
<script src="{{asset('template/plugins/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('template/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('template/plugins/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('template/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('template/plugins/jvectormap/jquery-jvectormap.min.js')}}"></script>
<script src="{{asset('template/plugins/jvectormap/tests/assets/jquery-jvectormap-world-mill-en.js')}}"></script>
<script src="{{asset('template/plugins/moment/moment.js')}}"></script>
<script src="{{asset('template/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js')}}"></script>
<script src="{{asset('template/plugins/d3/dist/d3.min.js')}}"></script>
<script src="{{asset('template/plugins/c3/c3.min.js')}}"></script>
<script src="{{asset('template/js/tables.js')}}"></script>
<script src="{{asset('template/js/widgets.js')}}"></script>
<script src="{{asset('template/js/charts.js')}}"></script>
<script src="{{asset('template/dist/js/theme.min.js')}}"></script>
<script src="{{ asset('js/app.js') }}"defer></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datetimepicker({
format: 'YYYY-MM-DD'
})
})
</script>
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
Why doesn't work? Please help:)
Level 1
@tykus resource/js/app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('find-doctor', require('./components/FindDoctor.vue').default);
Vue.component('add-btn', require('./components/AddBtn.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
Level 104
@unk any console error message(s)???
1 like
Level 1
@tykus This is my console when I don't comment that line with script defer: https://imgur.com/zRgYcPg
Level 104
@unk you’re going to need to solve these errors. Do you really need all of these dependencies???
1 like
Level 1
@tykus I don't think so. How to solve? I want to solve. I want to solve the problem with that defer script if is possible. It broke my application functionality when choosing the date. Otherwise it works properly. Should I search the internet for errors and try to fix them?
Level 104
@unk start by giving your Vue application an element to attach to by adding a div with id="app"
Level 104
You have several different jQuery versions in your page - fix that next...
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>window.jQuery || document.write('<script src="src/js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
Level 122
As I advised MANY hours ago on SO, only include jquery once.
1 like
Please or to participate in this conversation.