Question

我有这位朋友希望在他的网站上进行一些更改。它在Laravel中开发，我以前从未使用过。

这个带有@yield('scripts')的master.blade但是当我在视图中的部分添加内容时它没有加载？

这是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>

这是视图

@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

问题是自定义jQuery和bootstrap-datetimepicker.js没有加载。

有谁知道为什么？ - 如果您需要更多代码，请告诉我们！：）

编辑1：
如果我查看代码（CTRL + U），<script> - 标签就在那里，jQuery就在那里但是不起作用。如果我查看检查员（CTRL + SHIFT + I），它就不存在了。

请在此处查看源代码（已加载脚本标记）：https://ibb.co/fMv6FH

请在此处查看开发人员工具（未加载脚本标记）：https://ibb.co/gvn3vH

编辑2：
发现如果我将代码从datetimepicker cdn复制到开发人员工具控制台并在控制台中执行我的自定义jQuery，那么该站点应该工作。这意味着问题在于，网站没有加载stack-tag中的任何内容。

编辑3：
我现在已经下载了之前与cdn连接的css和js文件。 css加载正常，但页面底部的文件无法加载。

Answer 1

请在您的代码中添加如下文档.ready功能

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

你错过了 $（文件）。就绪（函数（）{}）;

jQuery库无法加载

1 个答案: