Is it possible to reorder the items in a sortable list without dragging them?
For example if I have a list of items, say 1,2,3, I click on a link (a button - whatever) and the list is now 3,1,2.
Maybe I shouldn't use "sortable" for this?
Suppose you have the following HTML:
<ul id="sortable" class="ui-sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" style=""><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 4</li><li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</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>
</ul>
You can reorder list items without drag and drop by calling the following function:
function shuffle(){
var myList = $('ul'); //Fetch the list.
var listItems = myList.children('li'); //Extract all listItems from it.
listItems.sort(function(a,b){ //This function sorts the items.
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1; //return a -1 or 1 depending upon specific condition.
});
$(myList).append(listItems);
}
You can invoke the function using any simple button like:
<button onclick="shuffle();">Reorder</button>
You can see a sample implementation here.
Related
I would like to get all 'li' elements id such as a, b, c, ... g.
How to get all 'li' element id lists?
Thank you!
JQuery-UI sortable example
<!doctype html>
<html lang="en">
<head>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<li id="a" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li id="b" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li id="c" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li id="d" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li id="e" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li id="f" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li id="g" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
Try the following:
$('#sortable').find('li').each(function(){
var listId = $(this).attr("id");
});
i am using the existing jquery UI tabs..
<div id="tabs">
<ul>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
</ul>
<div id="tabs-1">
<p>t1 content</p>
</div>
<div id="tabs-2">
<p>t2 content</p>
</div>
<div id="tabs-3">
<p>t3 content</p>
</div>
</div>
when rendered in the browser, jquery adds some set of classes to the <li> elements. [some part of it given below]
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
</ul>
when I append some <li> elements in <ul> using the following jquery code:
$('#tabs ul').append($('<li>title 4</li>');
The list gets appended but the classes are not added to it, hence do not exhibit the tab functionality.
Please give some insight into it.
You also need to add the div with the tab id:
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Then try a refresh on tabs:
$("div#tabs").tabs("refresh");
WORKING Fiddle
I'm looking to select an item and I want to use this throughout a process, so the selected item needs to be stored somehow. My Next button should make it so I still have the selected item id in step2.php. I was thinking of using a POST or GET, but I was wondering if there are other possibilities using jquery/js, how should I do this?
And if it's not possible with jquery, how would I do it in php? The only option I see is using GET.
$(function() {
$("#selectable").selectable({
selected: function(event, ui) {
$(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
}
});
});
<ol id="selectable">
<li class="ui-widget-content" id="1">Item 1</li>
<li class="ui-widget-content" id="2">Item 2</li>
<li class="ui-widget-content" id="3">Item 3</li>
<li class="ui-widget-content" id="4">Item 4</li>
<li class="ui-widget-content" id="5">Item 5</li>
<li class="ui-widget-content" id="6">Item 6</li>
<li class="ui-widget-content" id="7">Item 7</li>
</ol>
Next
I have created a jsFiddle
Thank you for any help.
could you store the ID in script and pass down in a querystring using the anchor click event?
Something similar to the following maybe..
$('anc_id').click( function() {
//code to move to step 2...
//something like....
var step2 = 'step2-php?id=' + _ID_ ;
....
return false;
});
note: you need to modify the function above to suit your needs.
regards
I want to disable a specific element of a selectable list.
I am able to disable the whole list, but when I try with specific element, it doesn't work.
$('#disableButton').click(function(){
$('#selectable li#b ').selectable('disable');
});
http://jsfiddle.net/Komlan/RYWaZ/1/
Here is my code
//reset seats
function resetSelect(){
var options = { filter: "li.selectable" };
$( "#selectable").selectable(options);
}
//Ajax get taken seats
$('input[name="choice"]').change(function(){
resetSelect();
var sc_id = $('input:radio[name=choice]:checked').val();
$.ajax({
url: 'seatings.php',
data:{ sc_id:sc_id},
type: "POST",
dataType:'text',
success: function(data){
var id = data.split(",");
for (var i=0;i<id.length -1;i++){
alert(id[i]);
var string = "#"+id[i];
$(string).css("color","red");
$('#selectable li'+string).removeClass("selectable ui-selected");
}
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable('destroy').selectable(options);
}
});
});
In summary, I'm getting a series of id and disable them one after the other, every time there is a change on my radio button group.
There is no straight way to do this (AFAIK), but here's a little hack you can use (and remember, it's just a hack and maybe not the best):
Add the css class "selectable" (or whatever you want):
<ol id="selectable">
<li class="ui-widget-content selectable" id="ok"> 1</li>
<li class="ui-widget-content selectable"> 2</li>
<li class="ui-widget-content selectable"> 3</li>
<li class="ui-widget-content selectable"> 4</li>
<li class="ui-widget-content selectable"> 5</li>
<li class="ui-widget-content selectable"> 6</li>
<li class="ui-widget-content selectable"> 7</li>
</ol>
And then use a filter on that css class:
// Create a filter to only make <li> with the specified css class, selectable.
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable(options);
$('#lol').click(function(){
console.log('dsfds');
// Remove/add (toggle) the class used in the filter on the <li> you want to remove the selectable.
// (Also remove the ui-selected in case it's selected.)
$('#selectable li#ok').toggleClass("selectable").removeClass("ui-selected");
// Now destroy the selectable and re-create it with the filter again.
// We removed the css class from a <li> used in the filter, so it won't be selectable again.
$( "#selectable" ).selectable('destroy').selectable(options);
});
Updated: http://jsfiddle.net/RYWaZ/7/
References:
Selectable filter
.toggleClass()
Actually you can achieve this now.
You've got to add the class you want to your item, for example "unselectable", and use this css trick in your filter option : item:not(.unselectable)
Html :
<ul id="selectable">
<li class="unselectable"> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
Jquery :
$( "#selectable" ).selectable({
filter:"li:not(.unselectable)"
});
You'll be able to select all the li children of #selectable, excepted the li which has the .unselectable class. Then you just have to toggle this class when it is necessary.
I have:
<div class="ui-widget">
<div class="ui-widget-header">
<span class="ui-icon ui-icon-circle-triangle-n">My Menu</span>
</div>
<ul class="ui-widget-content">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
My jQuery is:
$('.ui-widget-header').click(function() {
$('.ui-widget-header+ul').toggle('slow');
});
Q: How do I toggle classes between ui-icon-circle-triangle-n and ui-icon-circle-triangle-s as the user clicks on .ui-widget-header?
Simplest way to do it would be to use .toggleClass()
$('.ui-widget-header').click(function() {
$('.ui-widget-header+ul').toggle('slow');
$('.ui-icon', this).toggleClass('ui-icon-circle-triangle-n ui-icon-circle-triangle-s');
});