Question

我的问题

我想使用JQuery / Ajax从数据库中删除某些内容。但是我无法通过单击按钮来触发该功能。现在，我尝试了一些更简单的操作，例如单击按钮隐藏段落，但是它不起作用。我使用了不同的JQuery方法，但无济于事。

我还尝试将JQuery包含在我的主布局中，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是我的一些代码：

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

这里是整个刀片文件：

@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

Answer 1

您能做的最好的事情是使用CDN在刀片中包含jquery

Superclass::OpenGLInitState()

或下载jquery并将其放在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>文件夹中，现在您可以使用public/js辅助函数将jquery包括在秃头模板中

asset()

观察到没有公共目录，因为默认情况下asset('js/jquery.min.js')帮助程序从公共文件夹加载文件

Answer 2

节点模块目录不属于资产您应该使用相对路径或绝对路径

或者如果可以的话使用CDN

Answer 3

检查您的Chrome控制台是否有错误，它应该告诉您什么地方出了错，一些提示：

在文档准备好后，尝试将您的jquery调用括起来：

$(document).ready(function(){
     $(".btn-class").click(function(){
         $("p").hide();
     });
});

如果仍然无法正常工作，请尝试使用jquery cdn：https://code.jquery.com/

Answer 4

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

尝试执行此操作，确保您放入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>在您的</head>之前

如何在Laravel 5.6中使用JQuery

4 个答案: