Normally I use a javascript file to import different JS files. Now having a difficulty to do it so. The project I am working on went wild and have a 5Mb JS file and I only want a piece of it to load on one page.
In a Javascript file I could import the Module like this,
import {Module} from "./components/Module";
and use as
Module.init();
But what I am trying to do is load this Module in a blade file. The js file lives under resources/assets/js/components/Module.js
Because this folder is not public I am not sure if I use something like
<script src="../../../resources/assets/js/components/Module.js"></script> on the page. Well, tried it but did not work as well.
All I want to be able to init the JS like Module.init(); inside my blade file.
I would really appreciate and directions as I am a bit confused right now:(
You cant import your files from resources directory, the only visible part of your application to users should be public folder so you should put your file into the public folder. for example
public/js/modjule.js
and import it like this
<script src="{{ asset('js/module.js') }}"
if your site is on a https protocol you can use secure_asset()
<script src="{{ secure_asset('js/module.js') }}"
Related
I have a flask project and I have a templates folder and a root folder that holds my files.
The structure looks like this:
flask_py_Javascript_sandbox/
templates/
form.html
venv/
app.py
formjs.js
My form.html looks like this:
<!DOCTYPE html>
<html>
<body>
// Test form
<script src="../formjs.js"></script> // I have also tried "formjs.js", "/formjs.js"
<script>
myFunc();
</script>
My formjs.js file looks like this:
function myFunc() {
alert("works");
}
I have looked at these 2 questions but they seem to have a slightly different issues. Issues where I don't know if their fix works for my flask project:
How to call external JavaScript function in HTML and Javascript in different folder than HTML
This seems like something simple but all tutorials I've seen just tell you what to type in your files but do not give you the nuances of folder structure.
Any help is appreciated.
Here is a screenshot of my folder structure as my text is causing some confusion:
The problem was the fact that I was hosting the development site on my own machine. To import a JS file it most be in a static folder. This is not made clear in a lot of tutorials because it is handled for you.
Folder structure should have a static folder and should look like this
Root
-static
file.js
-templates
page.html
...
To load your js file into your html you need to import it like any other script but you will need to add the url_for.
<script src="{{ url_for('static', filename='file.js') }}" type="text/javascript"></script>
Better explained here.
Used in an answer here.
If you are like me you didn't know you needed a static file and no amount of searching would have help.
I'm starting out with Laravel which as at the time of this writing is 6.0. I need to import custom JS and CSS files in my project.
Form the file structure in Laravel 6, there is a js/ and /sass file in the resources folder. I have created a script.js and a style.css file right there.
I tried to call them using the code
<script src="{{ asset('js/app.js')}}"></script>
and
<link href='{{ asset('sass/style.css')}}'>
but my console log shows
GET http://127.0.0.1:8000/js/app.js net::ERR_ABORTED 404
Is there a new way of calling these files in Laravel 6.
Basically the function asset() will look for files in the public folder. Since laravel starts from the public folder.
Create new folders on public as js & sass then move you are files in new folders.
public folder host's assets such as images, JavaScript, and CSS. please check laravel structure for more information.
Having files In resources/js & sass folders should be compiled with laravel mix to public folder, you should try this when you learnt 80% percent of laravel.
I want to use this package for audio equalizing animation. I want to add it in my Laravel project so I copied two files which are
jquery.reverseorder.js
jquery.equalizer.js
to /myproject/node_modules/myjss/
and added these two lines
import 'myjss/jquery.equalizer'
import 'myjss/jquery.reverseorder'
into /myproject/resources/js/app.js
but it returns TypeError: $(...).equalizer is not a function
How can I fix it?
You don't need to save those files like that. Just save them in laravel's assets folder. then in laravel, you should include it like this <script type="text/javascript" src="js/jquery.reverseorder.js"></script> . in src path, you can use asset_path of laravel. You can include this path in js or laravel's blade template.
I'm currently attempting to refactor my repeated JavaScript code from my xyz.scala.html files into a separate main.js file, which can then be linked to using something like the below (from my scala.html files):
<script src='#routes.Assets.at("javascripts/main.js")'><script>
And using the below in my conf/routes file:
GET /js/*file controllers.Assets.at(path = "/public/javascripts", file)
Having Googled around I'm struggling to find a simple way of using JS from a file in my Play Framework application and setting up the conf/routes file.
Does anyone know a simple way of getting this to work?
Public assets folders
Record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Script loading in twirl template
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
my jquery file path is c:\xampp\htdocs\project\resources\assets\js\jquery.min.js
..I have tried like below on my page but jquery file don't included ! What I am wrong ..
{{-- <script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script> --}}
The URL::asset() is a helper function in laravel,
when you use this function it automatically generates the URL path to the
ProjectName/public and you have to specify the remaining path inside the asset method.
So, first you would want to place the css , js , 'images' and 'fonts' files inside your public folder that is in the root directory of your project.
then you can use the asset() or URL::asset() to locate your file.
the standard folder structure looks like this ..
ProjectName/public/css/main.css
ProjectName/public/js/jquery.min.js
etc ..
i think that would work for you .
Add those file in public/ folder like public/assets/js/jquery.min.js
Please make sure you have proper access rights to aforementioned resource (js file). You can also try to view the file with your web browser by visit http://your_hostname/assets/js/jquery.min.js