CODEWITHSUNDEEP
javascriptjqueryjquery-ui
David19801
David19801

Reputation: 11448

Add to Jquery-ui sortable list

Simple question about Jquery-UI sortable lists

I have made:

<div id="adder">
<input type="text" name="add1" /><br />
<input class='btn' type='submit' value='Submit' />
</div>

How can I use this to add what the user enters to the end of the jquery-ui sortable list?

Upvotes: 21

Views: 27681

Answers (4)

FrenkyB
FrenkyB

Reputation: 7197

$("selector").sortable('refresh')

works fine.

There is one more thing to be aware of:

handle: '.iORAS_ORD'

If you use handle with sortable, don't use jquery for selection, like:

handle: $('.iORAS_ORD')

If using jQuery, sorting after insert is not possible on newly inserted items. More on the subject here.

Upvotes: 1

magorich
magorich

Reputation: 459

I know it's not exactly the answer but @karim79 helped me to find a way to add an image to the sortable list, if anyone needs it here it is:

<input type='file' onchange="readURL(this);" style="width: 100%;" />


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var $li = $("<li class='ui-state-default'/>");
            $li.append('<img src="'+ e.target.result +'" width="150" height="200" />');
            $("#sortable").append($li);
            $("#sortable").sortable('refresh');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

Upvotes: 0

mFlorin
mFlorin

Reputation: 486

For me, the $("#sortable").sortable('refresh'); didn't worked.

But this worked: $("#sortable").trigger("sortupdate");

Upvotes: 0

karim79
karim79

Reputation: 342625

Presumably, you would just take the text, wrap it in an LI with the class ui-state-default and insert it into the sortable UL element. You will then need to refresh the sortable to cause the newly inserted element to be recognised:

$(".btn").click(function (e) {
    e.preventDefault();
    var text = $("input[name='add1']").val();
    var $li = $("<li class='ui-state-default'/>").text(text);
    $("#sortable").append($li);
    $("#sortable").sortable('refresh');
});

You can try it here.

Upvotes: 40

Related Questions