CODEWITHSUNDEEP
jquerylaravelincludeload
Oliver Karstoft
Oliver Karstoft

Reputation: 39

jQuery library doesn't load

I have this friend who want some changes made on his website. It developed in Laravel which I've never used before.

There's this master.blade with @yield('scripts') but when I add stuff to the section in the view it doesn't load?

Here's the master.blade.

<!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>
    <title>@yield('title')</title>
    <!-- Styles -->


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('datetimepicker')
</head>
<body>
    <div id="app">
        @if(!isset($remove_navbar))
            @include('layouts.navbar')
        @endif   
        <div class="container">
            @if ($flash = session('message'))
                <div id="flash-message" class="alert alert-success">
                    {{$flash}}
                </div>
            @endif

            @yield('content')
        </div>
    </div>
    <!-- Scripts -->
    <script src="{{ asset('js/app.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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    @yield('scripts')

    </body>
</html>

And here's the view

@extends('layouts.master')

@section('datetimepicker')
<link href="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
@endsection

@section('content')
<div class="container">
    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">

        <h3>{{$survey->name}}</h3>
        <h4>{{$recipient->name}}</h4>
        <form method="post" action="{{route('survey.result.update',[$survey->id,$recipient->id])}}">
        {{csrf_field()}}
        @foreach($questions as $i => $question)
        <?php $answer=\App\Answer::where('recipient_id','=',$recipient->id)->where('question_id','=',$question->id)->get()->first(); ?>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{$answer->question->headline}}</h3>
            </div>
            <div class="panel-body">
                <p>{{$answer->question->text}}</p>

                @if($answer->question->type=='2')



                <div class="" id="grad">
                    @for($j=1;$j<=10;$j++)  
                    <label> 
                        <input type="radio" value="{{$j}}" 
                        {{$answer->interval==$j ? 'CHECKED' : 'disabled'}} >
                    </label>
                    @endfor 

                </div>  
                @endif
                @if($answer->question->type=='2')
                <p>{{$answer->text!=null ? "Medarbejderen kommenterede:" : "" }}</p>
                @else
            <p>Medarbejderen svarede:</p>
            @endif
            <p><strong>{{$answer->text}}</strong></p>




        </div>

        <div class="panel-footer">

        @if($answer->question->type=='2')
        <p>Mål</p>
            <div class="" id="grad">

                        @for($j=1;$j<=10;$j++)  
                        <label> 
                            <input type="radio" name="interval_{{$i}}" value="{{$j}}" 
                            {{$answer->interval_goal==$j ? 'CHECKED' : ''}}>
                        </label>
                        @endfor     

        </div>
        @endif


        <br>
        <div class="form-group{{ $errors->has('text_'.$i) ? ' has-error' : '' }}">
            <textarea rows="4" name="text_{{$i}}" class="form-control" placeholder="Du kan skrive en note om indsatsen her">{{ $answer->comment}}</textarea>


        @if ($errors->has('text_'.$i))
        <span class="help-block">
            <strong>Skriv venligst dit svar i tekstfeltet.</strong>
        </span>
        @endif
        </div>


        </div>
    </div>
    <br>
    @endforeach


    <div class="panel panel-default">

        <div class="panel-body">
            <label>Skal opfølges <input type="checkbox" id="checkbox" name="followup" {{$answer->followup ? "CHECKED" : ""}}></label>
            <input size="16" type="text" readonly class="form_datetime hidden" placeholder="Opfølgningsdato" value="{{$answer->followup ? $answer->followup : ""}}" style="margin-left: 20px;" name="followupdate">
            <button type="submit" class="btn btn-primary pull-right">Gem og vis opfølgning</button>
            </form>
        </div>
    </div>
</div>
</div>   
@endsection

@section('scripts') 
<script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
    format: 'dd-mm-yyyy hh:ii',
    autoclose: true,
    pickerPosition: "top-right"
})

if($("#checkbox").is(':checked')){
    $('.form_datetime').removeClass('hidden')
}

$("#checkbox").on('change', function() {
    if ( this.checked ) {
        $('.form_datetime').removeClass('hidden')
    } else {
        $('.form_datetime').addClass('hidden')
    }
})
</script>
@endsection

The problem is that the custom jQuery and bootstrap-datetimepicker.js doesn't load.

Does anyone know why? - If you need more code let me know! :)

EDIT 1:
Found out if I look in the code (CTRL+U) the <script>-tags are there and the jQuery is there but doesn't work. If I look in the inspector (CTRL+SHIFT+I) it's not there.

See the source code here (script-tags loaded): https://ibb.co/fMv6FH

See the developer tool here (no script-tags loaded): https://ibb.co/gvn3vH

EDIT 2:
Found out that if i copy the code from datetimepicker cdn to developer tool console and execute my custom jQuery in the console, the site works at it should. Which means that the problem is, that the site doesn't load whatever is in the stack-tag.

EDIT 3:
I've now downloaded the css and js files that was connected with cdn before. The css is loaded fine but the files in the bottom of the page doesn't load.

Upvotes: 0

Views: 793

Answers (1)

Kaleem
Kaleem

Reputation: 201

Please add document .ready function as below in your code

<script type="text/javascript">
$(document).ready(function(){
  $(".form_datetime").datetimepicker({
    format: 'dd-mm-yyyy hh:ii',
    autoclose: true,
    pickerPosition: "top-right"
  })

  if($("#checkbox").is(':checked')){
    $('.form_datetime').removeClass('hidden')
  }

  $("#checkbox").on('change', function() {
  if ( this.checked ) {
    $('.form_datetime').removeClass('hidden')
  } else {
    $('.form_datetime').addClass('hidden')
  }
 })
});
</script>

You are missing $(document).ready(function(){});

Upvotes: 1

Related Questions