Laravel刀片使用$(document).ready函数 [英] Laravel blade use $(document).ready function
问题描述
我正在尝试将laravel刀片模板(包括一些javascript代码)用于子视图.
I'm trying to use laravel blade templates including some javascript code into child view.
我有我的邮件 app.blade.php 文件，其中放置了jquery初始化的字符串:
I have my mail app.blade.php file, where is placed string of jquery initialization:
<script src="/js/jquery.min.js"></script>
在我的子视图文件 settings.blade.php 中，我想使用一些jquery函数:
In my subview file settings.blade.php I want to use some jquery functions:
@extends('layouts.app')
@section ('content')
Settings main page
@endsection
<script type="text/javascript">
$(document).ready(function() {
alert("Settings page was loaded");
});
</script>
但是在浏览器控制台中，我收到一条错误消息未捕获的ReferenceError:$未定义，这似乎是加载了jquery的结果， AFTER 在子视图文件中调用了该函数.
But in browser console I get an error message Uncaught ReferenceError: $ is not defined which seems like jquery was loaded AFTER calling that function in subview file.
在 settings.blade.php 中添加一行:<script src="/js/jquery.min.js"></script>解决了该问题.但是我不想将脚本文件添加到每个子视图文件中.
Adding a row: <script src="/js/jquery.min.js"></script> into settings.blade.php resolves the problem. But I dont want to add my script files into each of my subview file.
所以问题:如何在父刀片文件之前加载子视图文件中加载主要的javascript \ jquery文件?
So question: how can I load main javascript\jquery files in parent blade file BEFORE loading subview files?
推荐答案
请按照这种方式
针对jquery脚本文件执行此操作
for jquery script file do this
<script src="{!!url('/js/jquery.min.js')!!}"></script>
然后在内容部分执行此操作
and do this for content section
@extends('layouts.app')
@section ('content')
Settings main page
<script type="text/javascript">
$(document).ready(function() {
alert("Settings page was loaded");
});
</script>
@endsection
已更新
除了在内容部分编写脚本之外，在 app.blade.php
Rather to scripting in content section, it would much better and professional way to create another section for scripting in app.blade.php
通常我会按照这种方式
<html>
<head>
@yield('page-style-files')
</head>
<body>
<div class="wrapper">
@yield('content')
</div>
</body>
@yield('page-js-files')
@yield('page-js-script')
<html>
例如，您的代码将如下所示
so for example your code will look like this
@extends('layouts.app')
@section ('content')
Settings main page
@endsection
@section('page-style-files')
<link href="....css" />
@stop
@section('page-js-files')
<script src=".....js"></script>
@stop
@section('page-js-script')
<script type="text/javascript">
$(document).ready(function() {
alert("Settings page was loaded");
});
</script>
@stop
这篇关于Laravel刀片使用$(document).ready函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
