laravel 5 loading but not executing js files

Question

Been struggling with this for days now.

I've installed a fresh laravel 5.5 application which in which I was planning to use VueJS. Onfurtunately I couldn't get it to work because it was loading the files but didn't execute them.

So my only solution is to use normal JS files. So I have two files:

js/app.js
js/script.js

app.js:

$(document).ready(function(){
    console.log('app test js');
});

alert('app loaded');

script.js:

$(document).ready(function(){
    console.log('script test js');
});

alert('script loaded');

In my console I can see the '$document ready' but there are no alerts or console.log's shown for the js/app.js and js/script.js. I can see the scripts are loaded and that my code is present.

Really hope someone can help me out since I'm now not able to proceed.

Down below are all the files that are used.

I have the following folder structure:

views/directevents/index.blade.php

index.blade.php

@extends('directevents.components.app')

@section('title', 'home')

@section('content')
<h1 class="page-title">
    Welkom bij Direct Events
</h1>

<p>
    Direct events is een evenementen bureau dat zich richt op thema evenementen.
    Het bedrijf bestaat uit drie ondernemers met een passie voor organiseren. Ons
    doel is om zowel de standhouders als de bezoekers een onvergetelijke dag te
    bezorgen.
</p>

<div id="event-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#event-carousel" data-slide-to="0" class="active">
 </li>
        <li data-target="#event-carousel" data-slide-to="1"></li>
        <li data-target="#event-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active text-center">
            <a href="hippiemarkt-amsterdam-xl">
                <img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')                 
}}" alt="hippiemarkt amsterdam XL">
            </a>
        </div>

        <div class="item text-center">
            <a href="hippiemarkt-amsterdam-xl">
                <img src="{{ asset('images/hippiemarkt-amsterdam-xl.png') 
}}" alt="Chicago">
            </a>
        </div>

        <div class="item text-center">
            <a href="hippiemarkt-amsterdam-xl">
                <img src="{{ asset('images/hippiemarkt-amsterdam-xl.png') 
 }}" alt="New York">
            </a>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#event-carousel" data-
 slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#event-carousel" data-
slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="row pages">
    <div class="col-sm-4 text-center">
        <a href="sponsoren">
            <img src="{{ asset('images/sponsoren.png') }}" alt="sponsoren">
            <h3>
                Sponsoren
            </h3>
        </a>
    </div>
    <div class="col-sm-4 text-center">
        <a href="standhouders">
            <img src="{{ asset('images/standhouders.png') }}" 
alt="standhouders">
            <h3>
                Standhouders
            </h3>
        </a>
    </div>
    <div class="col-sm-4 text-center">
        <a href="partners">
            <img src="{{ asset('images/partners.png') }}" alt="partners">
            <h3>
                Partners
            </h3>
        </a>
    </div>
</div>
@endsection

since it extends views/directevents/components/app.blade.php i'll post it here too:

<!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">

    <title>Direct Events - @yield('title')</title>

    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') 
}}">
</head>
<body class="{{ $page }}">
    <div id="wrapper" class="container">
        <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>

        <header>
            @include('directevents.components.header')
        </header>

        @include('directevents.components.navbar')

        <div class="content">
            @yield('content')
        </div>

        <footer>
            @include('directevents.components.footer')
        </footer>

        @include('directevents.components.popups')
    </div>

    <!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.12.4.min.js"></script> -->
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
    <script href="js/app.js"></script>
    <script href="js/script.js"></script>
    <script>
            $(document).ready(function(){
                console.log('$document ready');
            });
    </script>
</body>
</html>

hylian · Accepted Answer · 2017-12-21 02:33:57Z

3

Your scripts are included incorrectly, see: https://www.w3schools.com/tags/att_script_src.asp

You have:

<script href="js/app.js"></script>

Should be:

<script src="js/app.js"></script>

Note the "src"

In Chrome hit F12 and reload the page, look under Sources to verify they are loaded correctly.

answered Dec 21, 2017 at 2:33

hylian

6001 gold badge5 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nelson Melecio · Accepted Answer · 2017-12-21 03:51:17Z

0

Laravel 5.5 uses Laravel Mix. You should explore how this things work if you want it to be fully functional.

 Here's what you need to do:
  1. Install npm via nodejs installer
  2. npm install
  3. Compile your resources using npm run <config> (ex. npm run dev)

answered Dec 21, 2017 at 3:51

Nelson Melecio

1,5143 gold badges14 silver badges21 bronze badges

Comments

Graham · Accepted Answer · 2017-12-20 20:48:30Z

-1

How easy can an answer be.

<script href="js/app.js"></script>

Should be

<script src="js/app.js"></script>

answered Dec 20, 2017 at 20:48

Graham

1,9604 gold badges21 silver badges42 bronze badges

Collectives™ on Stack Overflow

laravel 5 loading but not executing js files

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related