jQuery - TypeError: $(...).sortable не является функцией

Question

У меня есть этот код, и он уже не работает. Несколько дней назад это сработало, но не больше. И я не помню, что я мог изменить...

 $( ".guardarorden" ).click(function( event ) {
  event.preventDefault();
});

$(document).ready(function(){


    $(function() {
        $( "#ordename" ).sortable({
          placeholder: "ui-state-highlight",
          cursor: 'move',
          opacity: 0.5,
          activate: function( event, ui ) {
            $('.guardarorden').removeClass('hidden');
          },
          update: function(event, ui){
            var nuevoOrden = $(this).sortable("serialize"); // Here is my problem!!!
            alert(nuevoOrden);

            $(window).on('beforeunload', function(){
              return 'Si has realizado cambios, asegurate de guardarlos antes de abandonar la página...';
            });
            $( ".guardarorden" ).click(function( event ) {
                event.preventDefault();

              $.post('guardaorden/'+nuevoOrden, {list: nuevoOrden},function(data){

                    }, 'json');
              $(window).off('beforeunload');
              alert("Orden guardado correctamente. Aunque esto sería mejor con un mensaje de error típico");
              location.reload();
              //alert("guardado con éxito!")             
            });         
          }
        });
        $( "#ordename" ).disableSelection();
      });
});

Я не знаю почему var nuevoOrden = $(this).sortable("serialize"); это не функция. Любая идея?

РЕДАКТИРОВАНИЕ

Я думаю, что это что-то о JQuery-UI. Я загружаю каждый скрипт на своей главной странице так:

{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')}}
{{ HTML::script('js/jquery-1.11.1.min.js') }}
{{ HTML::script('js/bootstrap-multiselect.js') }}
{{ HTML::script('js/bootstrap-slider.js') }}
{{ HTML::script('js/sisyphus.min.js') }}
{{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js')}}
{{ HTML::script('/js/ckeditor/ckeditor.js')}}
{{ HTML::script('/js/ckeditor/adapters/jquery.js')}}
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js')}}

Но я попытался вручную загрузить последнюю страницу на странице, где у меня есть проблема, и она работает... но только иногда (я не понимаю). В первый раз это работает хорошо, но затем у меня появляется сообщение об ошибке.

Если я удалю {{ HTML::script('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js')}} с моей страницы и перезагрузите страницу в моем браузере, а затем я положил {{ HTML::script('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js')}} снова на моей странице и перезагрузите его снова, это работает. Пока я не изменю страницу. Когда я вернусь, это не работает снова...:(

РЕДАКТИРОВАТЬ 2

Есть ли несовместимость между jQuery-ui и CKEditor?? Если я удалю {{ HTML::script('/js/ckeditor/ckeditor.js')}} а также {{ HTML::script('/js/ckeditor/adapters/jquery.js')}} нет проблем!!

Answer 1

Порядок загрузки Jquery и Jquery-UI, скорее всего, неправильный. Попробуйте сначала загрузить Jquery, а затем - Jquery-UI.