For some reason my jQuery refuses to load. I am getting an error:
ReferenceError: $ is not defined
My template is in views/layouts/editor.blade.php and I am loading jQuery in the head of my template like this
<script src="{{ asset('js/jquery.min.js') }}"></script>
I can see that jQuery is loaded in my console. but still I get the error.
I am compiling my javascript using laravel mix and my webpack.mix.js file looks like this:
// javascript
mix.js('resources/assets/js/app.js', 'public/js')
.js('node_modules/jquery/dist/jquery.min.js', 'public/js')
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
});
// css
mix.sass('resources/assets/sass/app.scss', 'public/css')
.sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');
Why is this happening?
EDIT:
My template file looks like this:
<!DOCTYPE html>
<html lang="{{ 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>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- scripts -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
$(function(){
alert();
});
</script>
</head>
<body>
#yield('content')
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
If I look in my console I see the following
If I open the jquery.min.js file in a new tab I see the following:
So it's jquery underneath all that webpack boilerplate stuff.
I have also run npm run production which removes all that webpack stuff and leaves the raw jquery.
Try this.
In your view file create a section under content section
#section('scripts')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
$(function(){
alert();
});
</script>
<script src="{{ asset('js/app.js') }}"></script>
#endsection
Then #yield('scripts') just under the #yield('content') in your template file.
So its looks like
<body>
#yield('content')
<!-- Scripts -->
#yield('scripts')
</body>
Use mix.combine() instead mix.js() :
mix.combine([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');
The problem is that I was compiling my jquery from the node_modules/jquery/dist folder instead of the /src folder.
Related
I'm building a website using Laravel 8 where i have one component called app.blade.php.
This component is the body of the project and includes the navbar.
The problem that i'm facing is that this compenent is correctly showing in every view, while in a view called article.blade.php it is showing but without showing the logo image, only the ALT text.
I have also tried to use other images in the view but no one of these images is showing, while on the other views everything is correct.
The images at the moment are in the public folder, later i will move everything to the storage.
Here's my component
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500&family=Readex+Pro:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
{{-- Icone --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" integrity="sha512-ShLuspGzRsTiMlQ2Rg0e+atjy/gVQr3oYKnKmQkHQ6sxcnDAEOtOaPz2rRmeygV2CtnwUawDyHkGgH4zUbP3Hw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="app">
<x-navbar/>
<main>
{{$slot}}
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.js" integrity="sha512-vZGsugWaSqQZuW8N5Z3ild7Tk8NqiZjKffeIQGpnnIs6g7HVZaFZjlLKPIw1qDsrQ5KAxAGfBinglQWu6i/8DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
And here's how i'm calling it :
<x-app></x-app>
Does anybody has any idea on what it can depends? For me sound strange that it's correctly working on every other view.
Thank you.
In the code that displays the image, you are probably using a path that is relative to the current route.
The image needs to be loaded with an absolute path (starts with /) or by using the asset() helper.
As you don't show the offending code, its hard to give specific advice
I created a new Laravel project and downloaded the bootstrap CSS and JS files and put the CSS file in resources/css and the JS files of bootstrap and popper and jQuery in resources/js and in the welcome.blade.php I linked the CSS file and the JS files like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Osama The Coder</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<section class="text-danger">
Hello World
</section>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
when I opened the project it was just the text without any styles or Bootstrap font-family
even when I linked the app.css and applied color red to the section element I doesn't see any changes
Please follow the following steps
Put all your static assets in public directory
Organize your assets in different folders e.g public/js for js related files and public/css for css related files
Then access your files using the helper method like below
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
/* or js files */
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
So I have this view1.php where I want to pass different values from different links to view2.php.
I manage to pass and get the value, but the css I put in my layout.php just won't work for view2.php.
I don't know where I'm doing it wrong.
Are there another way to pass different values other than this?
view1.php
#extends('layouts.layout')
#section('content')
<div>
OP 6000
OP 10000
OP 20000
</div>
#endsection
web.php
Route::get('/pass/{id}','User\MyController#postID');
MyController.php
public function postID($id) {
return view('user.view2', [
'id' => $id
]);
}
view2.php
#extends('layouts.layout')
#section('content')
<div>
{{$id}}
</div>
#endsection
layout.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>
<link rel="stylesheet" type="text/css" href="css/materialize.css" media="screen,projection"/>
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/user.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<nav> </nav>
<main class="">
#yield('content')
</main>
<footer> </footer>
#yield('alert')
</body>
<script type="text/javascript" src="js/materialize.min.js"></script>
</html>
Seems the css is not loading in view2.php. You need to use baseurl to load css.
Example : <link rel="stylesheet" href="{{URL::asset('css/user.css')}}">
This issue occurs because when you redirect another view your CSS not load properly.
My advice to you is using the assets method.
<link rel="stylesheet" type="text/css" href="{{ asset('css/materialize.css') }}" media="screen,projection"/>
<link rel="stylesheet" href="{{ asset('css/bootstrap/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('css/user.css') }}">
Just because the URL of your view2 are http://something.com/pass/some_id and you are linking stylesheets by css/some_css.css so that, it is searching in the current directory i.e. pass so that, the URLs of the stylesheets are becoming like http://something.com/pass/css/some_css.css. That's an issue.
If you will use /css/some_cs.css, it will try to locate the files from the home directory i.e. the / directory, so the URL will become http://something.com/css/some_css.css and everything will work perfectly.
else, you should use the helper provided by Laravel
{{asset('css/some_css.css')}}
It will generate URL, where the files are located without fail.
I have a Laravel project where I created a dropdown toggle for someone to click and logout. I did it on my workstation and it works fine. When I tried to run it on my home desktop, it does not respond at all.
I did not change the imported css and js files. Why doesn't it work in the difference place when the code is the same?
My imports for reference:
<!DOCTYPE html>
<html lang="en">
<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') }}"></script>
<!-- TODO: Import using Mix -->
<script src="{{ asset('assets/js/geniuscart/geniuscart.js') }}"></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">
<!-- TODO: Import using Mix -->
<!-- GeniusCart Styles -->
<link rel="stylesheet" href="{{ asset('assets/css/geniuscart/geniuscart.css') }}">
<!-- Icons -->
<!-- Icofont -->
<link rel="stylesheet" href="{{ asset('assets/css/icofont/icofont.min.css') }}">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I created a new laravel project and it displays #extends, #yield and #section as plain text, I have php installed on laragon and everything works fine.
This is my main layout file master.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ URL::to('src/css/app.css') }}">
#yield('styles')
</head>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
#yield('scripts')
</body>
</html>
And this is the index.blade.php which is the main part of the project
#extends ('layouts.master')
#section('title')
Laravel Shopping Cart
#endsection
And it just displays like this
I dont understand why they dont work alsou my api.php
has this code added for it to work
Route::get('/', function () {
return view('shop.index');
});
Remove the space in #extends ('layouts.master').
you mistake a few line,
remove space on this code
#extends('layouts.master')
and make sure your folder position resource->view->shop->index.blade.php
I hadnt run the php artisan serve on my project folder, that was causing the issue, thank you to everyone though!!