jquery sortable not functioning when ajax loaded

Question

I have this code running if loaded static.

HTML

<div class="control-group" id="example-2-1">
    <div class="span3">
        <ul class="sortable-list">
        </ul>
    </div>
</div>

JQUERY

// Example 2.1: Get items
$('#example-2-1 .sortable-list').sortable({
    connectWith: '#example-2-1 .sortable-list',

    receive: function(event, ui) {
        // so if > 10
        if ($(this).children().length > 1) {
            //ui.sender: will cancel the change.
            //Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
        }
    }                   
});

But when I run it with AJAX, the sortable doesnt work anymore.

AJAX / REMOTE DATA

jQuery.ajax({
    type: "POST",
    url: "index.php/data/get_data/",
    success:function(response){                     

            $('#example-2-1').append ($(response).hide().fadeIn('1000000'));                                                    
    },

    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

what did I miss?

Try to call $( ".sortable-list" ).sortable(); after append. — ostapische
– ostapische, Commented Jul 21, 2014 at 6:09

The Lazy Log · Accepted Answer · 2014-07-21 06:04:34Z

6

Try calling .sortable after you append content to your div.

answered Jul 21, 2014 at 6:04

The Lazy Log

3,5742 gold badges23 silver badges30 bronze badges

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

Comments

Pramod S. Nikam · Accepted Answer · 2014-07-21 06:14:32Z

0

I hope you have following code under your response:

  <div class="span3">
    <ul class="sortable-list">
    </ul>
  </div>

If so ; try using following code to again refresh it.

 $( "#example-2-1 .sortable-list" ).sortable( "refresh" );

like below:

  jQuery.ajax({
type: "POST",
url: "index.php/data/get_data/",
success:function(response){                     

        $('#example-2-1').append ($(response).hide().fadeIn('1000000'));     
        // refresh sorting here.
        $( "#example-2-1 .sortable-list" ).sortable( "refresh" );                                                
},

error:function (xhr, ajaxOptions, thrownError){
    alert(thrownError);
}

});

answered Jul 21, 2014 at 6:14

Pramod S. Nikam

4,5628 gold badges41 silver badges66 bronze badges

Comments

Dorjee Karma · Accepted Answer · 2018-04-19 17:42:05Z

0

Just after binding the dynamic sortable call below function

 $('#nestable3').nestable();

answered Apr 19, 2018 at 17:42

Dorjee Karma

3592 silver badges5 bronze badges

Collectives™ on Stack Overflow

jquery sortable not functioning when ajax loaded

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related