如何在 Laravel 5.6 中使用 JQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52042457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use JQuery in Laravel 5.6
提问by Dunrar
My Problem
我的问题
I wanted to use JQuery/Ajax to delete something from my database. But I could not get the function to fire on click of a button. Now I tried something easier, like hide a paragraph on click of a button but it does not work. I used different JQuery methods, but to no avail.
我想使用 JQuery/Ajax 从我的数据库中删除一些东西。但是我无法通过单击按钮来触发该功能。现在我尝试了一些更简单的方法，例如单击按钮时隐藏一段，但它不起作用。我使用了不同的 JQuery 方法，但无济于事。
I also tried including JQuery in my master layout like so:
我还尝试在我的主布局中包含 JQuery，如下所示：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is some of my code:
这是我的一些代码：
<!-- edit.blade.php-->
<!-- HTML -->
<button type="button" id="btnhide" class="btn">Hide</button>
<p>Paragraph 1</p>
<!-- JavaScript and JQuery -->
<script>
$(document).ready(function(e){
$("btnhide").click(function(){
$("p").hide();
});
});
</script>
And here the whole blade file:
这里是整个刀片文件：
@extends('adminlte::page')
@section('title', '| Edit Employee')
@section('content_header')
@stop
@section('content')
<div class='col-lg-4 col-lg-offset-4'>
<h1><i class='fa fa-user-plus'></i> Edit {{$employee->name}}</h1>
<hr>
{{ Form::model($employee, ['route' => ['employees.update', $employee->id], 'method' => 'PUT']) }}
<div class="form-group">
{{ Form::label('name', 'Name') }}
{{ Form::text('name', null, array('class' => 'form-control', 'required' => 'required')) }}
</div>
<div class="form-group">
{{ Form::label('email', 'Email') }}
{{ Form::email('email', null, array('class' => 'form-control', 'required' => 'required')) }}
</div>
<h5><b>Give Role</b></h5>
<div class='form-group'>
@foreach ($roles as $role)
{{ Form::checkbox('roles[]', $role->id, $employee->roles ) }}
{{ Form::label($role->name, ucfirst($role->name)) }}<br>
@endforeach
</div>
<div class="form-group">
{{ Form::label('password', 'Password') }}<br>
{{ Form::password('password', array('class' => 'form-control', 'placeholder' => ' ? ? ? ? ? ? ? ? ? ?', 'required' => 'required')) }}
</div>
<div class="form-group">
{{ Form::label('password', 'Confirm Password') }}<br>
{{ Form::password('password_confirmation', array('class' => 'form-control', 'required' => 'required')) }}
</div>
<div class="form-group">
{{ Form::label('qualifications', 'Qualifications') }}<br>
{{ Form::select('qualifications', $employee_qualifications, null, ['size' => 5, 'class' => 'form-control', 'id' => 'selectedqualification']) }}
<button
type="button"
class="btn btn-default pull-right"
data-toggle="modal"
data-target="#qualificationModal"
data-qualifications="{{ $qualifications }}"
data-qualification_names="{{ $qualification_names }}">
Add
</button>
<button type="button" id="removequali" class="btn btn-danger pull-right">Remove</button>
<button type="button" id="btnhide" class="btn">Hide</button>
<br>
<p> Test 1 </p>
<br>
</div>
{{ Form::submit('Save', array('class' => 'btn btn-primary')) }}
{{ Form::close() }}
@include('dispo.employees.add_qualification')
</div>
@stop
@section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript and JQuery -->
<script>
$(document).ready(function(e){
$("btnhide").click(function(){
$("p").hide();
});
});
</script>
<script>
//Detaches the Qualification from the Employee via Ajax without refreshing the site
$(document).ready(function(){
$(".removequali").click(function(e){
let qualificationid = $("#selectedqualification").val();
$.ajax({
type: 'DELETE',
url: "{{URL::route('remove_qualification')}}",
dataType: 'json',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: {
'id': qualificationid,
'employeeid': "{{$employee->id}}",
'_token': "{{ csrf_token() }}"
},
success: function (data) {
alert('success');
},
error: function (data) {
alert(data);
}
});
});
});
</script>
@endsection
采纳答案by latr.88
Check your Chrome console for errors, it should tell you what's wrong, few tips:
检查您的 Chrome 控制台是否有错误，它应该会告诉您出了什么问题，还有一些提示：
- Try enclosing your jquery calls to after the document is ready:
- 在文档准备好后，尝试将您的 jquery 调用包含在内：
$(document).ready(function(){
$(".btn-class").click(function(){
$("p").hide();
});
});- If still doesn't work try using jquery cdn: https://code.jquery.com/
- 如果仍然不起作用，请尝试使用 jquery cdn：https://code.jquery.com/
回答by Mohana Naga Venkat Sayempu
The Best thing you can do is use CDN to include jquery in your blade
你能做的最好的事情是使用 CDN 在你的刀片中包含 jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or download jquery and put it inside public/jsfolder and now you can include jquery in your balde template by using asset()helper function
或者下载 jquery 并将其放入public/js文件夹中，现在您可以使用asset()辅助函数将 jquery 包含在您的 balde 模板中
asset('js/jquery.min.js')
Observe that there is no public because asset()helper by default loads files from public folder
观察到没有 public 因为asset()默认情况下 helper 从 public 文件夹加载文件
回答by r0ulito
Node modules directory is not part of the assets You should use the relative or the absolute path
节点模块目录不是资产的一部分您应该使用相对或绝对路径
Or using a cdn if you can
或者如果可以的话使用cdn
回答by Christian Gallarmin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").hide();
});
});
</script>
Try this make sure you put the
试试这个确保你把
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>before your </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>在你之前 </head>
