How to use a js file outside Laravel Blade html?
Besides my layouts file, I have a single file welcome.blade.php for the html and it requires a fair amount of scripts. To improve neatness, I wanted to move the <scripts> from the bottom of welcome.blade.php into a separated .js file.
See below for current code, mainly a test to get things working.
welcome.blade.php
#extends('layouts')
#section('content')
<div>
Body Content
</div>
#endsection
// Script added to the bottom of welcome.blade
// How to move into a separated file, like in resources/js/welcome.js
// <script src='/js/welcome.js'></script> doesn't work
<script>
alert('js works');
</script>
Even when I create a new welcome.js script inside the resources/js folder, linking via src or assets doesn't work.
I don't want to put it in the app.js (default laravel install folder structure), because then it'll load in for EVERY page, instead of just welcome.js.
I've tried using stack, but the file doesn't exist when using asset. However, it does work when writing the script itself into the push block. But then that's not using a separate .js file anyway...
layouts.blade.php
<body>
...
#stack('scripts')
</body>
</html>
welcome.blade.php
...
#push('scripts')
// Works when directly writing the script here
// Trying to use `<script src="{{ asset('js/welcome.js' }}"></script>` fails
// No js/welcome.js found.
<script>
alert('js works');
</script>
#endpush
How can I use a separate .js file inside a Laravel Blade HTML Template?
Edit
Did I actually need to make the welcome.js script public in webpack mix? It seems to work now after adding the additional .js line.
See answer.
Versions: Laravel 8
Issue was that the separated .js file didn't exist anywhere, hence couldn't be by welcome.blade.php. Solved by outputting the script to public in webpack mix
Script file, welcome.js
alert('js works');
welcome.blade.php
#push('scripts')
<script src="{{ asset('js/welcome.js' }}"></script>
#endpush
layouts.blade.php
<body>
...
#stack('scripts')
</body>
</html>
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/welcome.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Related
I want to use the package Sortablejs within my blade file.
Thus, I installed it with npm and created a sortable.js file inside my assets with this content
import Sortable from "sortablejs";
which is compiled into the public folder using webpack.mix.js
I expected that I could use it like this within my blade:
<script src="{{ asset('js/sortable.js') }}"></script>
<script type="text/javascript">
var documentlists = $('#documentlist');
Sortable.create(documentlists);
</script>
However, this results in the error:
Uncaught ReferenceError: Sortable is not defined
http://localhost:8004/admin/settings/businessagreement:715
Why can't I include it like this and how would I need to do it?
Your import statement needs to be in the same file as your Sortable code. Then you can run npm run watch to create your script with laravel mix.
Blade file loads Javascript files
<script src="{{ asset('js/sortable.js') }}"></script>
<script src="{{ asset('is/myscript.js') }}"></script>
myscript.js is generated by npm run watch
import Sortable from "sortablejs";
var documentlists = $('#documentlist');
var sortable = Sortable.create(documentlists);
Maybe it even works when leaving out the first script tag.
Ok First In app.js put
import Sortable from "sortablejs";
and make sure that it is imported => if you use vs code press ctrl + click on sortablejs if not just try
npm run watch then in your main blade import app.js
<script src="/js/app.js"></script>
then do whatever you want
I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}
First run this command in command line.
composer require unisharp/laravel-ckeditor
Add in service provider
Unisharp\Ckeditor\ServiceProvider::class,
run this command
php artisan vendor:publish --tag=ckeditor
add this code in my blade file js section
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'article-ckeditor' );
</script>
there is no error but textarea show normal as like before
try to use the 'asset' method to access your ckeditor.js script from the vendor folder
try it like this
<script src="{{ asset('/vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
So, I am trying out jekyll and I have successfully added my .scss files and they are working but there seems to be a problem with the .js files.
I have tried adding .coffee files and adding the plug-in jekyll-coffeescript but that too isnt working
so my folder structure is this:
\javascripts
|__ main.js
\_includes
\_sass
\_layouts
\_config.yml
\index.html
now in the main.js file i just have
console.log("this worked");
alert("hello");
and I have a head.html in the _includes folder where I added
<script type="text/javascript" src="{{site.baseurl}}/javascripts/main.js" ></script>
when I load the page nothing is happening, why? what is the mistake?
I added the same thing like this and it worked
<script type="text/javascript" >
console.log("this worked");
alert("hello");
</script>
so why is the previous method not working
I have written nothing in the _config.yml file about any javascript
I assume that you have kept your main.js file under your_site/assets/js/javascripts/
Try this path to load the js file:
<script type="text/javascript" src="/assets/js/javascripts/main.js" ></script>
Also you can check localhost:port/assets to see other files as well.
Let me know if this helps.
i am using rails and trying to call jquery code present in external js file whose path i have specified correctly in my html file.The jquery code is executing correctly when i include it directly in html file.
my test.js
$(function(){
alert("yes");
});
and index.html.erb :
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/views/test.js"></script>
</head>
jquery executes when included inside html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("yes");
});
</script>
</head>
the test.js path is correct since other javascript functions are getting called from the same file but not jquery code
why you have head tag in index.html.erb file . It already included in layout/application.html.erb file . in this way you are including jquery file twice. If you include two versions of jquery in any html they always create issue.
In my suggestion you need to remove your head tag from index file completely . And what ever js file you want to include, include it in your application.js file. for current scenario you can do it like below.
//= require views/test
#user3946910
Try like this.
in your index.html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/views/test.js"></script>
</head>
and in your test.js file add this.
$(document).ready(function(){
alert("yes");
});
Like this just import all plugins in the html itself, and create fresh .js page to write just your own script.
I hope it will help.