In resources/js/app.js there is this line: require('./bootstrap');.
If I add a line below that, require('./custom-stuff');, put custom-stuff.js in resources/js I can see that it's included in app.js. So far so good.
I'm puzzled however by the order that the files are included. If in custom-stuff.js I add:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
it doesn't activate the tooltip, while I see the code being included in app.js.
If I add the tooltip activation code above in my Blade template right before the closing </body> tag (and before the inclusion of app.js), it does work.
Why is this? I would like to keep everything in app.js including custom code that refers to other libraries that are included.
You may try re-ordering the build combination in for your app.js and try checking your webpack.mix.js to do that.
Related
I have used wire:click function from header file. This header included in layout file. But it is not working. If i use in main template file, then it is working. Anybody knows why this is happened?
Header.blade.php,
<button wire:click="myFunction()">Notifications</button>
I'm trying to produce modular webpack bundles, I'd like to put my TS files on the folders where I would use those specific scripts and then transcript them to the public folder.
Example: the blade 'index.blade.php' and 'index.ts' are in resources/views/register/client.
The blade would have a tag <script src="{{asset('assets/js/register/client/index.js')}}"> </script> to import the webpack-generated bundle 'index.js'.
I think this way my resources would be more organized but I can't find a way to do this nor a better solution.
I don't know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here.
composer require fx3costa/laravelchartjs (runned)
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class (added in the right place)
npm i chart.js (used to install chart.js)
In my controller and blade I used code from example 1 (Line Chart / Radar Chart)
After that the error appeared: Uncaught ReferenceError: Chart is not defined. Before and after that I was trying different solutions, but always something was wrong and I think this one should work for me. I probably missed something obvious, but very important.
Have you any ideas?
Should I add something to webpack.mix.js or bootstrap.js files after installing with npm?
EDIT:
If I put <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> in my head section of blade, everything is working fine, but I'm using laravel-mix to use a locale file instead of link.
Chart.js must be loaded before content in order to use it in any Controller. I was loading my laravel-mix variables after HTML content (because it includes some big libralies like jQuery etc.), so that's why it couldn't work.
SOLUTION:
At the end of my document I still have my previous script
<script src="{{ asset('js/app.js') }}" ></script>
But now I made a new loadBefore.js file in resources/js directory with one line of code:
require('chart.js/dist/chart.js');
If there will be any reason to put there any other javascript code, it will be easy to put it there.
I also added this file to webpack.mix.js like this:
mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();
And of course at the end I added this script to the head section in my blade:
<script src="{{ asset('js/loadBefore.js') }}"></script>
Now everything is working and I'm using already existing in my Laravel files chart.js file. I don't know, someone knows an easier solution, so for now I'm accepting my answer, but I'm still open for suggestions.
why you just dont copy the content of
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
in a file at your local, for example: /public/js/chart.js
and load it in head
<script src="{{asset('js/chart.js')}}"></script>
Its always nice to use Laravel elixir feature. But I have some basic question. Firstly
when we run gulp command, it concatenates all the css and js files. But I think I dont need, for example, datatables.css and datatables.js/boostrap-wysihtml for all of my pages. how to tackle this situation?
Secondly Lets review this code:
elixir(function(mix) {
mix.styles([
"bootstrap.min.css",
"owl.carousel.css",
"animate.css",
"style.css",
"datepicker.css"
]);
mix.scripts([
"jquery.min.js",
"bootstrap.min.js",
"bootstrap-datepicker.js",
"typed.min.js",
"wow.min.js",
"owl.carousel.min.js",
"home.js",
"side-navigation.js",
"script.js"
]);
mix.version(["css/all.css","js/all.js"]);
});
in blade:
<link rel="stylesheet" href="{{ url(elixir('css/all.css')) }}">
what is the use of this elixir() function, when we are creating all.js and all.css file that has everything concatenated inside it?
You want to use the elixir function in the blade template because it will automatically use the rev.manifest file to resolve which versioned file(s) to use. The docs have more info. As far as not needing all scripts on all pages, there are a few different ways to pull it off. You can create a task that generates just generates one bundle - perhaps scripts needed everywhere - and another bundle handling the rest. I'd advise you to research that to see what works best for you.
I am trying to clone an object using
var newObject = jQuery.extend(true, {}, oldObject);
as per John Resig's answer to What is the most efficient way to deep clone an object in JavaScript? .
All the information I can find on using libraries in javascript only show how to use a library within an html file... as in:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
My code is in a .js file and i get the error that jQuery is not defined. How do I use jQuery within my .js file?
EDIT: I'm running this code in a server.js file on a node server. The server.js has an event handler that gives back the index.html file upon getting the "/" url. So the server.js file isn't included in the index.html file and therefore including jquery in the html file doesn't help me, if my understanding is correct.
You can't include it or link to it from within your .js file. You have to include it on the HTML page (<script src="/path/to/jquery"></script>), before you include your .js file.
Technically you could just copy and paste the jquery code above the code in your .js file, but it is usually a better idea to just include it on the page to avoid conflicts.