[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 808
  • Last Modified:

Jquery multiple (dynamically created lists) sortable

Hellow all,

I am using this example to create a jquery sortable list:

http://jqueryui.com/demos/sortable/

Now, I have multiple lists that need to be sortable. Creating the lists is no problem, but how to attach the jquery scripts to them (as they are dynamic I do not know how many of them are created).

Like this (lists are created dynamically and pulled from database)

<ul id="sortable_list_abc">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>


<ul id="sortable_list_def">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>


<ul id="sortable_list_ghi">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

Open in new window


thanks in advance.
0
wal_toor
Asked:
wal_toor
  • 2
  • 2
2 Solutions
 
cmalakarCommented:
you should do this..

$("ul[id*='sortable_list']").sortable();
0
 
cmalakarCommented:
The first comment says ul id containing "sortable_list" string.

if you want ul id which starts with "sortable_list" then you should

$("ul[id^='sortable_list']").sortable();
0
 
hieloCommented:
give all your <UL> tags a common class:


<ul id="sortable_list_abc" class="sortable">...</ul>
<ul id="sortable_list_def" class="sortable">...</ul>
<ul id="sortable_list_ghi" class="sortable">...</ul>

then in your css, modify the rules so that you use the class instead of the ID's:
<style>
	.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	.sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	.sortable li span { position: absolute; margin-left: -1.3em; }
	</style>

Finally in your javascript, use the class names as the selectors:
	<script>
	$(function() {
		$( ".sortable" ).sortable();
		$( ".sortable" ).disableSelection();
	});
	</script>

Open in new window

0
 
hieloCommented:
NOTE: BY leaving the ids intact, you can then target specific lists (for special effects/stylying) if you need to.

Regards,
Hielo
0
 
wal_toorAuthor Commented:
Thanks all for your replies.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now