Как получить jquery sortable для запуска функции при нажатии кнопки

Question

У меня есть код, который соберет сортируемый список и превратит его в массив. Код настроен для работы над событием drop, поэтому, когда вы перетаскиваете элемент, а затем бросаете его, массив создается и отправляется. Мне нужно изменить это так, чтобы оно было вызвано нажатием кнопки вместо этого, по какой-то причине превращение этого в событие click не будет работать.

Вот функция, как сейчас

$(document).ready(function(){ 

    $('#sortable-stages').sortable({ 
    update: function(event, ui) { 
     var stage = document.getElementsByClassName('stage'); 
     var stageOrder = $(this).sortable('toArray'); 
     $.get('/stages/reorder', { 'order' : stageOrder }); 
    } 
    }); 

}); 

Любая помощь на том, как превратить этот код в то, что запускается с помощью кнопки мыши будет большим.

я сделал попробовать очевидно

$(document).on('click','#stagereorderbutton', function() { 
    //... 
}); 

и не запускать код, даже если он будет вызвать тревогу, но только если их поместить в самом начале, над update: части.

Answer 1

Если я правильно понимаю ваш вопрос, вы должны просто получить массив из сортируемых элементов на кнопку click:

$(document).ready(function(){ 

    var items = $('#sortable-stages').sortable(/*options...*/); 
    $(document).on('click','#stagereorderbutton',function(){ 
     $.get('/stages/reorder', { 'order' : items.sortable('toArray') }); 
    }); 

}); 

JSFiddle Demo

---

И еще одно решение если вам нужен вариант update - Вы можете определить переменную вне sortable сферы, обновить его внутри рамки и использовать его на кнопку click:

$(document).ready(function(){ 

    var stageOrder; 
    $('#sortable-stages').sortable({ 
     update: function(event, ui) { 
      var stage = $('.stage'); 
      stageOrder = $(this).sortable('toArray'); 
     } 
    }); 
    $(document).on('click','#stagereorderbutton',function(){ 
     $.get('/stages/reorder', { 'order' : stageOrder }); 
    }); 

}); 

Answer 2

Вы не обновляя отключенный собственности, попробуйте это

$('#stagereorderbutton').sortable({ 
disabled: false, 
    update: function(event, ui) { 

    var stage = document.getElementsByClassName('stage'); 

    var stageOrder = $(this).sortable('toArray'); 

    $.get('/stages/reorder', { 'order' : stageOrder }); 


    } 
    }); 

    }); 

Вы видели этот пост, jQuery sortable only works in document ready, not with a button

Answer 3

Что в конечном итоге решить это для меня использовал код для создания и обновления переменная, но только отправка ее нажатием кнопки. Поэтому я добавил событие click вокруг запроса на получение, и это сработало.

$(document).ready(function(){ 

    $('#sortable-stages').sortable({ 
    update: function(event, ui) { 

    var stage = document.getElementsByClassName('stage'); 
    var stageOrder = $(this).sortable('toArray'); 

    $('document).on('click','#stagereorderbutton',function() { 

     $.get('/stages/reorder', { 'order' : stageOrder }); 

    }) 
    } 
    }); 
});