'TypeError: $ (...). Сортируемый не функция' Summernote и сортируемый конфликт? - PullRequest
Новая
       38

'TypeError: $ (...). Сортируемый не функция' Summernote и сортируемый конфликт?

0 голосов
/ 28 июня 2019

Я использую Summernote (https://summernote.org/) и сортируемый (https://jqueryui.com/sortable/)) в моем проекте в моем собственном CMS.

если я не связываю app.js из laravel, я получаю сообщение об ошибке: Uncaught TypeError: $ (...). Summernote не является функцией Но тогда мои сортируемые функции как надо

Но когда я связываю app.js, я получаю сообщение об ошибке: Uncaught TypeError: $ (...). Sortable не является функцией

Я уже проверил порядок загрузки jquery и jquery UI, и это правильно.

Что я нашел в Google, так это то, что мне нужно добавить плагин jquery, который можно сортировать в app.js? но я не могу заставить это работать.

Макет клинка 

  <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- when linked error with sortable, without error with summernote -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/summernote.js"></script>
    @yield('script')

edit.blade 


@section('script')
  <script src="/js/sortable.js"></script>
@endsection

<div class="form-group">
                            <label for="content">Content:</label>
                            <textarea name="content" class="summernote" rows="10" cols="30">{{$project->content}}</textarea>
                        </div>

  <ul class="sortable-posts list-unstyled">
                        @foreach($imgs as $img)
                        <li class="list-group-item" id="{{ $img->id }}">
                            <img src="../../../{{$img->src}}" alt="" class="img-sortable">
                        </li>
                        @endforeach
                    </ul>

sortable.js 

$(document).ready(function(){
  $(function() {
      $(".sortable-posts").sortable({
        placeholder: 'drop-placeholder',
          stop: function() {
              $.map($(this).find('li'), function(el) {
                  var id = el.id;
                  var sorting = $(el).index();
                  $.ajax({
                      url: '../../sortImgs',
                      type: 'GET',
                      data: {
                          id: id,
                          sorting: sorting
                      },
                  });
              });
          }
      });
  });
});

summernote.js 

$(document).ready(function() {
  $('.summernote').summernote({
    toolbar: [
      // [groupName, [list of button]]
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['insert', ['video']],
      ['view'], ['codeview']
    ]
  });
});

Кто-нибудь знает, что вызывает конфликт между двумя? и как это решить

Ответы [ 2 ]

0 голосов
/ 15 июля 2019

Решением было удаление отсрочки из app.js и размещение ссылок внизу страницы, чтобы 

  <script src="/js/jquery-ui.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
  <script src="/js/summernote.js"></script>
  @yield('script')`
0 голосов
/ 28 июня 2019

Вы ссылаетесь на jQuery и summernote дважды. Попробуйте обновить ссылки на это: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
<script src="/js/jquery-ui.min.js"></script>
...