We Keep Coding

jQuery: Detach table rows then append back to same position

I am trying to remove/append table rows using jQuery's detach() method. I'd rather use this method than jQuery's hide/show to keep certain css styles. The detach function is tied to a checkbox that will hide any rows that contain "No".
The problem I am having is my table has sortable headers, and if I sort any column before I use this function, the table rows do not get put back into the right position.
$(document).ready(function () {
var tablerows;
$('#indexTable tr').each(function(i) {
$(this).data('initial-index', i);
});
$('#customSwitch1').change(function () {
if (tablerows) {
$(tablerows).appendTo('#indexTable').each(function(){
var oldIndex = $(this).data('initial-index');
$('#indexTable tr').eq(oldIndex).before(this);
});
tablerows = null;
} else {
tablerows = $('#indexTable tr:contains(No)').detach();
}
});
});
How can I put the rows back into the position before detachment, or even back to the position when the table is first loaded?

Kendo ListBox: Return dropped items in order

I am using two listboxes, connected with each other, that allow drag and drop between the two. While using the reorder code found in another thread fixes the issue with reordering items within the same list, it doesn't address the issue when dragging and dropping an item from one listbox to the other. I understand that is because this isn't a "reorder" action, it is a "drop" action. I've tried many different angles, like using the "add" event, but there is no "offset" property in the (e) object.
How can I accomplish the same thing, that is, keep the dropped item in the order it is visually dropped?
Here is my widget function with the reorder event that properly orders the items as they are displayed in the listBox (why this doesn't happen automatically is beyond me!). Remember, the reorder event only occurs when moving items within the same listBox, not when dragging an item from one listBox to another.
$("#myMenus").kendoListBox({
draggable: true,
connectWith: "baseMenus",
dropSources: ["baseMenus"],
add: function(e) {
console.log('ADD');
console.log(e);
},
reorder: function(e) {
e.preventDefault();
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0];
var index = dataSource.indexOf(dataItem) + e.offset;
dataSource.remove(dataItem);
dataSource.insert(index, dataItem);
},
});

I've managed to accomplish the same task, depending on the html hint that appears while dropping the item in the second listbox. I've modified your code with the solution.
$("#myMenus").kendoListBox({
draggable: true,
connectWith: "baseMenus",
dropSources: ["baseMenus"],
add: function(e) {
e.preventDefault();
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0];
var index = $('li.k-drop-hint').index();
dataSource.insert(index, dataItem);
},
reorder: function(e) {
e.preventDefault();
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0];
var index = dataSource.indexOf(dataItem) + e.offset;
dataSource.remove(dataItem);
dataSource.insert(index, dataItem);
},
});

Unable to Drop on an Empty List

I am making a simple web app. At one part I have to drag among two different lists - One of which may be empty. I am not able to drop to an empty list.
I have tried:
dropOnEmpty = true
dropOnEmpty = "true"
dropOnEmpty = false
dropOnEmpty = "false"
and tried stuff as on:
How do I move an item to an empty list using jquery?
JQuery API
Rollys Wordpress
jQuery UI drop on empty container/list not working
Hidden <li> elements so that lists are not empty at all.
but nothing worked.
This is the HTML part:
<ul><li>Present</li></ul>
<ul id="present" class="sortable"></ul> //First List
<ul><li>Future</li></ul>
<ul id="future" class="sortable"><li></li></ul> //Second List
This is the jQuery function:
$("ul.sortable").sortable({
axis: 'y',
cancel: "div.cal",
connectWith: "ul",
dropOnEmpty: true,
update: function(event, ui) {
if (ui.sender === null) {
var goalsNames = '';
$(".sortable li").each(function() {
if (goalsNames === '') {
goalsNames = '["' + $(this).text();
} else {
goalsNames += '","' + $(this).text();
}
});
goalsNames += '"]';
localStorage.setItem("goalsNames", goalsNames);
var goalsDetails = localStorage.getItem("goalsDetails");
console.log(goalsDetails);
var goalsDetailsObj = JSON.parse(goalsDetails);
$("#present li").each(function() {
console.log(JSON.stringify(goalsDetailsObj[$(this).text()]));
console.log(goalsDetailsObj[$(this).text()].active);
goalsDetailsObj[$(this).text()].active = "present";
});
$("#future li").each(function() {
goalsDetailsObj[$(this).text()].active = "future";
});
localStorage.setItem("goalsDetails", JSON.stringify(goalsDetailsObj));
}
}
}).disableSelection();
});

As far as I know, sortable is a JQuery-UI feature to sort items within one list via drag and drop.
From the docs
Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list
I would try to go with draggable and droppable and you need to initialize a drop target via droppable.
<ul><li>Present</li></ul>
<ul id="present" class="firstList"></ul> <!--First List-->
<ul><li>Future</li></ul>
<ul id="future" class="secondList"><li></li></ul> <!--Second List-->
$('ul.firstList').draggable(/***/);
$('ul.secondList').droppable(/***/);
And read about the many options to be inserted at /***/.
Update
I created a plunker for you as a start point: http://plnkr.co/RPlTgK

Here is the proper example for drag and drop among empty list hope this will help Demo

jQuery ui selectable table to select/deselect checkboxes

I am trying to build a table grid which represents hourly blocks for each day of the week. What I would like to then do is make each cell in the table selectable, and to check a check box if that cell is selected, or if multiple cells are selected then tick all the check boxes that each cell corresponds to. I have put together a simplified version here: http://jsfiddle.net/yxAjx/4/.
I've really got as far as putting in the selectable code -
$(function() {
$( "#selectable" ).selectable({
filter: ".block"
})
});
For example if I clicked and dragged across the first 2 cells in the 'Tue' row I would want the corresponding check boxes to be checked.
The table that contains the check boxes I have no control over as this section of html is generated from the software I am using but I have replicated the lay out of it in my example.
My Javascript and jQuery knowledge is limited so would appreciate any pointers on how to achieve this.

How about doing something like this:
$(function() {
$( "#selectable" ).selectable({
filter: ".block",
selected: function( event, ui ) {
var row = $(ui.selected).parents('tr').index(),
col = $(ui.selected).parents('td').index();
$('#checks').find('tr').eq(row)
.children('td').eq(col)
.children('input').addClass('checked').prop('checked', true);
$('#checks input:not(.checked)').prop('checked', false);
},
unselected: function( event, ui ) {
var row = $(ui.unselected).parents('tr').index(),
col = $(ui.unselected).parents('td').index();
$('#checks').find('tr').eq(row)
.children('td').eq(col)
.children('input').removeClass('checked').prop('checked', false);
}
});
$('#checks input').click(function(){
var row = $(this).parents('tr').index(),
col = $(this).parents('td').index();
if($(this).prop('checked')){
$('#selectable').find('tr').eq(row)
.children('td').eq(col)
.children('div').addClass('ui-selected');
}else{
$('#selectable').find('tr').eq(row)
.children('td').eq(col)
.children('div').removeClass('ui-selected');
}
});
});
DEMO: http://jsfiddle.net/dirtyd77/yxAjx/9/

Drag and Drop table columns using jquery Plugin

I am having a table which has fixed header and first 3 columns are fixed .
http://jsfiddle.net/ncUdA/embedded/result/
I want to drag and drop the columns (i.e) A,B,C,D,E,F are columns which should be shiftable (drag and drop) enabled.All the elements below it should also be shifted to the new position.
http://jsfiddle.net/ncUdA/
I found a plugin which does what i want but i was not able to implement because usage of multiple tables in my code for fixed header and fixed 3 columns.
http://johnny.github.com/jquery-sortable/#table
Below code is the plugin code on how to do it.
I am using handlebars for templating.
var oldIndex
$('.sorted_head tr').sortable({
containerSelector: 'tr',
itemSelector: 'th',
placeholder: '<th class="placeholder"/>',
vertical: false,
onDragStart: function (item, group, _super) {
oldIndex = item.index()
item.appendTo(item.parent())
_super(item)
},
onDrop: function (item, container, _super) {
var field,
newIndex = item.index()
if(newIndex != oldIndex)
item.closest('table').find('tbody tr').each(function (i, row) {
row = $(row)
field = row.children().eq(oldIndex)
if(newIndex)
field.before(row.children()[newIndex])
else
row.prepend(field)
})
_super(item)
}
})

After google-ing to find the solution to re-order table columns by using drag'n'drop.
I found that 'akottr' has write an awesome jquery plugin. here
It is a library-independent js-function that gives you the ability to re-order table columns by using drag'n'drop. It's very easy to use.
$('#defaultTable').dragtable();
Thus, I hope you will get the re-order table as you want.
Check it out for more example : http://akottr.github.io/dragtable/