I am trying to add jquery and use into a new project
app.js
require('./custom');
require('./bootstrap');
require('alpinejs');
custom.js
window.$ = require('jquery');
window.Swal = require('sweetalert2');
guest.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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
welcome.blade.php
<x-guest-layout>
<script>
function alerta() {//This Work
Swal.fire("Hello World Sweetalert2");//This Work
$('.lol').hide();//This Work
}
$(function() {//$ This not Work
console.log( "ready!" );
});
Swal.fire("Hello World Sweetalert2");//This not Work
</script>
<x-jet-button onclick="alerta()" class="lol">Alert</x-jet-button>
</x-guest-layout>
And finally get the error Uncaught ReferenceError: $ is not defined or Uncaught ReferenceError: Swal is not defined
How can i solve this?
Edit:
Thanks to #Areg this question is solved, I understood this better after reading The Script element
When you write something into app.js you need to compile it later on using npm run dev or npm run watch. Also don't defer you app js file, because it is designed to run the script after the document is loaded as it states on w3schools
The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Related
HELP ME PLEASE 🙏🙏🙏🙏🙏
im new into inertia.js
CSS FILE WORKING BUT JS FILE NOT WORKING
iam using inertia.js with laravel 9 with vue.js-3
using admin html template im bulting admin dashboard but im facing problem with js file it was not working but when i used normal laravel 9 with blade.php concept it work perfectly.
so i tryied from 2 days with different paid admin templets but it was not working
help me to fix it
i tried below methods but not working
MY
my code
APP.BLADE.PHP FILE
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- //css -->
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<!-- //js -->
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
<!-- Scripts -->
#routes
#vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
#inertiaHead
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
I TRYID THIS METHOD ALSO
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="assets/libs/jsvectormap/maps/us-merc-en.js"></script>
METHOD 2
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
I have solution to this, so rather than adding the js and css in the app.blade.php file, move asset folder resources folder.
Import the all css file in app.css like as
//resources/css/app.css
#import '../assets/css/dashlite.css?ver=3.1.1';
#import '../assets/css/theme.css?ver=3.1.1';
same import the all js file in app.js like as
//resources/js/app.js
import("../assets/libs/jsvectormap/js/jsvectormap.min.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
Now in app.blade.php add css and js inside the vite directive
#vite(['resources/js/app.js', 'resources/css/app.css',
"resources/js/Pages/{$page['component']}.vue"])
May this will help you. Happy coding
I'd like to add a jQuery UI datepicker field to a form in a laravel 7 app, but I always get the following error message:
Uncaught TypeError: $(...).datepicker is not a function.
I tried to use the source code example from here.
I read at least a dozen different posts on how to fix this, tried all of them without luck in my case.
My feeling is that my laravel app (maybe in app.js?) already loads one of the scripts or maybe a different version of a the same script (maybe jQuery?) used also by the datepicker and this causes the issue. Unfortunately being new to Laravel, I'm not sure how to solve this. Please see below some code samples and let me know, if you have any suggestions. Many thanks!
App layout file header:
<!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', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
View file:
#extends('layouts.app')
#section('content')
<form action="" method="post" action="/tour/{id}">
<!-- CROSS Site Request Forgery Protection -->
#csrf
<div class="form-group">
<label>Date</label><br>
<input id="datepicker" type="text" />
</div>
</form>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
#endsection
well here you are calling jquery twice actually. one in app js file and other from the cdn. you need not to call the cdn. and as you are using defer attribute in app js and another version of jquery, both are conflicting and thus datepicker is not a function. you can simply remove defer attribute and the extra cdn call.
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
Your code perfectly works in my local installation.
<script src="{{ asset('js/app.js') }}" defer></script>
Try to remove app.js and check whether your libraries are getting conflict.
If not, open your insepect element and check if you have an active internet connection and jquery ui is loaded (Refer pic 2)
I'd like to add a bootstrap datepicker field to a form in a laravel 7 app, but I always get the following error message: Uncaught TypeError: $(...).datepicker is not a function.
I read at least a dozen different posts on how to fix this, tried all of them without luck in my case.
My feeling is that my laravel app (maybe in app.js?) already loads one of the scripts or maybe a different version of a the same script (maybe jQuery?) used also by the datetimepicker and this causes the issue. Unfortunately being new to Laravel, I'm not sure how to solve this. Please see below some code samples and let me know, if you have any suggestions. Many thanks!
App layout file header:
<!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', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
View file:
#extends('layouts.app')
#section('content')
<form action="" method="post" action="/tour/{id}">
<!-- CROSS Site Request Forgery Protection -->
#csrf
<div class="form-group">
<label>Date</label><br>
<input id="datepicker" type="text" />
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
$( "#datepicker" ).datepicker({
format: "mm/dd/yy",
});
</script>
You are initiating datepicker in your code, but in the header you are loading a completely different plugin datetimepicker
In my laravel 5.6/jquery application I need to create some js file with common funcs and accessible in all js files of my project
and for this in app template
resources/views/cardsBS41Frontend/layouts/frontend.blade.php I added definition of js/app_funcs.js:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#if(isset($site_name)){{ $site_name }}#endif</title>
<!-- Styles -->
<link href="{{ asset('css/frontend.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script src="{{ asset('js/app.js') }}{{ "?dt=".time() }}" defer></script>
<script src="{{ asset('js/app_funcs.js') }}{{ "?dt=".time() }}" defer></script>
<script src="{{ asset('/js/bootstrap.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<main class="py-4">
#yield('content')
</main>
</div>
#section('scripts')
#endsection
#yield('scripts')
</body>
#include($frontend_template_name.'.layouts.footer')
</html>
and in blade template resources/views/cardsBS41Frontend/vote.blade.php I attach /vote.js file, which refers only this template:
#extends($frontend_template_name.'.layouts.frontend')
#section('content')
<div class="container">
...CONTENT OF MY PAGE
</div>
#endsection
#section('scripts')
<script src="{{ asset('js/'.$frontend_template_name.'/vote.js') }}{{ "?dt=".time() }}"></script>
<script type="text/javascript" language="JavaScript">
/*<![CDATA[*/
var frontendVote = new frontendVote('view', // must be called before jQuery(document).ready(function ($) {
<?php echo $appParamsForJSArray ?>
);
jQuery(document).ready(function ($) {
frontendVote.onFrontendPageInit('view')
});
/*]]>*/
</script>
#endsection
But in vote.js file when I call js function of js/app_funcs.js file I got error that
Uncaught ReferenceError: functionname is not defined
I expected to use of functions of js/app_funcs.js, as this file is attached and I see in console of the browser
that file js/app_funcs.js is retrieved ok BEFORE /vote.js.
Can you give me a hint what is wrong and which is the right way ?
Thanks!
You're loading the app_funcs.js script with defer. That means the script loads in parallel with the HTML but defers execution until the HTML is parsed. Since you're loading the vote.js script without defer, it stops HTML parsing, loading and executing immediately, effectively running it before the app_funcs script. Either defer the load of your vote script as well, or don't use defer with the app_funcs script.
i am following this tutorial https://v2.vuejs.org/v2/guide/#Declarative-Rendering. the page works fine without error on console but i cant change the message via console to showing "app2.message" and give me error "#app2 is not defined". its not working like they said
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
here is my script:
window.addEventListener('load',
function() {
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
}, false);
this is how i include the js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>3R Inventory | #yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
<script type="text/javascript" src="{{ URL::to('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('/js/tigaer.js') }}"></script>
</head>