CODEWITHSUNDEEP
javascriptjqueryjquery-uiportlet
user304602
user304602

Reputation: 991

Adding items dynamically/programmatically to jQuery-ui sortable

I have some jQuery UI Portlets similar to this:

http://jqueryui.com/sortable/#portlets

and what I want is to add dynamically (when user click on a button on the UI) some boxes like this (display as grid) within each portlet:

http://jqueryui.com/sortable/#display-grid

I want to add them to portlet from top to bottom and from left to right, defining the maximum number of "boxes" (items) per row.

Is it possible to do (dynamically add them to each portlet)? if so, how? some ideas?

for example, let's say I have below jquery-ui sortable block in my asp.net mvc4 view (initially empty):

<ul id="sortable">
</ul>

so when user click on a button, I want to add an item Text01 like this:

<li id="Text01" class="ui-state-default">Text01</li>

so after adding it, below sortable block is:

<ul id="sortable">
    <li id="Text01" class="ui-state-default">Text01</li>
</ul>

if user click on a button again, I want to add another item to the sortable block, so after adding it, below sortable block is generated:

<ul id="sortable">
    <li id="Text01" class="ui-state-default">Text01</li>
    <li id="Text02" class="ui-state-default">Text02</li>
</ul>

and so on...

Note that in this example ids and contents are correlative, Text01, Text02... but this is only an example, ids and contents can be different.

Any ideas on how to do this from a jquery function?

I am using jQuery 1.10.2

Upvotes: 10

Views: 12518

Answers (2)

EdwardF
EdwardF

Reputation: 85

This works. Call appendThing from your button click:

var counter = 1;
function appendThing() {
    $("<li id='Text" + counter + "' class='ui-state-default'>Text" + counter + "</li>").appendTo($("#mySortable"));
    $("#mySortable").sortable({ refresh: mySortable })
    counter++;   
};

Upvotes: 5

Ph&#233;na Proxima
Ph&#233;na Proxima

Reputation: 181

This looks promising:

http://api.jqueryui.com/sortable/#method-refresh

I haven't tried it, but it seems to imply that you can just add an item to a sortable, then call $('#mysortable').sortable('refresh') to recognize it.

Upvotes: 18

Related Questions