Как использовать JQuery в Laravel 5.6

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 в свой блейд

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

Или загрузите jquery и поместите его в папку public/js, и теперь вы можете включить jquery в свой шаблон balde, используя asset() вспомогательную функцию

asset('js/jquery.min.js')

Обратите внимание, что нет общедоступных, потому что asset() помощник по умолчанию загружает файлы из общей папки

Answer 2

Проверьте консоль Chrome на наличие ошибок, она должна сообщить вам, что не так, несколько советов:

• Попробуйте приложить вызовы jquery после того, как документ будет готов:

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

• Если все еще не работает, попробуйте использовать jquery cdn: https://code.jquery.com/

Answer 3

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

Answer 4

Каталог узлов модулей не является частью активов Вы должны использовать относительный или абсолютный путь

Или используя CDN, если вы можете