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.
Related
I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!
If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!
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') }}"
I want to make an application for which I use ReactJS for front-end and Laravel for the back-end. I have both ready, the Laravel part is done and so is the ReactJS.
I tried the most stupid thing a sane person would do, copy-paste ReactJS build folder to the Laravel's views folder and Laravel's assets folder. It does not seem to be working. It says missing references to all JavaScript and CSS files.
I changed index.html into index.blade.html.
And, I thought, perhaps, I linked to a wrong path for CSS and the JavaScript. I changed /static/css/main.ac1cfcf0.css to main.ac1cfcf0.css and /static/js/main.551bf7d2.js to main.551bf7d2.js in my index.blade.html but I still receive the same error.
What can I do to integrate the front-end and back-end into one project properly?
If you're using Laravel Mix, you can easily create and transform your JS files to use ES6 and React: https://laravel.com/docs/5.5/mix#react
In your webpack.mix.js file, compile your assets like this:
mix.react('resources/assets/js/react-app.jsx', 'public/js');
Then, in your blade file, bring in your bundle like this:
<script type="text/javascript" src="{!! asset('js/react-app.min.js') !!}"></script>
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