'TypeError:$(...)。sortable不是函数'summernote和可排序冲突?

时间:2019-06-28 09:51:01

标签: jquery jquery-ui laravel-5 jquery-ui-sortable summernote

我在自己的cms项目中使用summernote(https://summernote.org/)和sortable(https://jqueryui.com/sortable/)。

如果我不从laravel链接app.js,则会收到错误消息: 未捕获的TypeError:$(...)。summernote不是函数 但随后我的可排序功能就应该出现

但是当我链接app.js时出现错误: 未捕获的TypeError:$(...)。sortable不是函数

我已经检查了加载jquery和jquery UI的顺序,这是正确的。

我在Google上发现的是,我需要添加可在app.js中排序的jquery插件?但我无法解决这个问题。

布局刀片

  <!-- 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之间发生冲突的原因是什么? 以及解决方法

2 个答案:

答案 0 :(得分:0)

您两次引用jQuery和summernote。尝试更新对此的引用:

org.springframework.batch.core.JobInterruptedException

答案 1 :(得分:0)

解决方案是从app.js中删除延迟,然后将链接放在页面底部,这样

#include <iostream>

template <typename type> class TestClass
{
    private:

        type *data;

    public:

        TestClass();
        ~TestClass();

        template <typename T> void Set(T &&element);
        void Replace();
};


template <typename type> TestClass<type>::TestClass()
{
    data = reinterpret_cast<type *>(new char[sizeof(type)]);;
}

template <typename type> TestClass<type>::~TestClass()
{
}

template <typename type> template <typename T> void TestClass<type>::Set(T &&element)
{
    new(data) type(static_cast<T &&>(element));
}

template <typename type> void TestClass<type>::Replace()
{
    type *pointer = reinterpret_cast<type *>(&data[0]);
    pointer->~type();

    //Fill with data
}

class MyClass
{
    public:

        MyClass()
        {
        }

        ~MyClass()
        {
            std::cout << "Called" << "\n";
        }
};

int main()
{
    MyClass *myClass = new MyClass();

    TestClass<MyClass *> myObject;

    myObject.Set(myClass);
    myObject.Replace();

    return 0;
}