How to get jquery sortable to run function on button click

Question

I have some code that will gather up the sort of a sortable list and turn it into an array. The code is set up to work on the drop event, so when you drag an item and then drop it the array is created and sent out. I need to change this so that it is triggered by a button click instead, for some reason turning this into a click event will not work though.

Here is the function as it is now

$(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 });
     }
  });

});

Any help on how to turn this code into something that is triggered by a button click would be great.

I did try the obvious

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

and that did not run the code even though it would trigger an alert, but only if placed right at the beginning, above the update: part.

Artur Filipiak · Accepted Answer · 2016-06-26 19:01:22Z

1

If I well understand your question, you should simply get the array of sortable items on button click:

$(document).ready(function(){

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

});

JSFiddle Demo

And yet another solution if you need the update option - you can define an variable outside of the sortable scope, update it inside scope and use it on button 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 });
    });

});

edited Jun 26, 2016 at 19:01

answered Jun 26, 2016 at 6:55

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:01:36Z

1

You're not updating the disabled property, try this

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

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

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

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


     }
  });

  });

Have you seen this post, jQuery sortable only works in document ready, not with a button

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jun 25, 2016 at 19:48

Premanand K

6421 gold badge8 silver badges19 bronze badges

2 Comments

Rockwell Rice Over a year ago

Still did not run.

Premanand K Over a year ago

Refer this post stackoverflow.com/questions/18660699/…

Rockwell Rice · Accepted Answer · 2016-06-26 18:55:24Z

0

What ended up solving this for me was using the code to create and update the variable but only sending it on button click. So I put a click event around the get request and that worked.

$(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 });

     })
    }
  });
});

edited Jun 26, 2016 at 18:55

answered Jun 25, 2016 at 20:24

Rockwell Rice

3,4225 gold badges43 silver badges68 bronze badges

5 Comments

Artur Filipiak Over a year ago

This is a VERY bad solution. Each time you drop an item a new click event is registered for the button. F.ex - when you drop an items 5 times, then your $.get request will trigger 5 times for a single button click! See demo (reorder items few times and click on a button) - jsfiddle.net/2Lqz478m/1

Rockwell Rice Over a year ago

I see. How can I fix that? I tried the code in your answer below and it would not work.

Rockwell Rice Over a year ago

I cannot get that to work in my application, it does work in your demo. Is there a way to clear out the events registered for the button?

Artur Filipiak Over a year ago

Have you check button #id attribute? I see you have different id in the question and answer.

Rockwell Rice Over a year ago

wow, that was it. I'll select you answer than as it is better, Thanks for following up, I am relatively new to jquery and probably never would have noticed the multiple sends. Thanks!

Collectives™ on Stack Overflow

How to get jquery sortable to run function on button click

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related