Reputation: 1960

laravel 5 loading but not executing js files

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>

Upvotes: 1

laravel 5 loading but not executing js files

Answers (3)

Related Questions