We Keep Coding

jquery drag multiple table rows with sortable

i have 2 tables and i need to select some rows from one, then drop them to the other table in the position i want to place.
i can drag multiple rows, but they will be placed on the end of table..i need to place where i want.
i tried with this
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
}
});
http://jsfiddle.net/83k9k/5/
but i can't apply the sortable.
here i tried to apply sortable, but i can't apply the selected rows.
$("#table1 .childgrid, #table2 .childgrid").sortable({
connectWith: ".childgrid",
//connectWith: ".t_sortable",
items: $(".draggable_tr"),
//items: "> tr:not(:first)",
appendTo: $tabs,
//helper:"clone",
zIndex: 999990,
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).toggleClass('selectedRow');
}
console.log(selected.length)
var container = $('<div/>').attr('id', 'draggingContainer');
//console.log(container)
container.append(selected.clone().removeClass("selectedRow"));
return container;
},
update: function (event, ui)
{
$(this).append(ui.helper.children());
$('.selectedRow').remove();
}
}).disableSelection();
http://jsfiddle.net/ce36vd0h/
where is the issue?

Please check below. I have made some changes. THe problem I see is , you are dragging inside a table, so you do not get which tr you are dragging after . I have made below changes. I have added a class tt1 in every table row on the right side table. And then called the droppable in the table row instead of the table itself. You can do the same for the left table. This just show the example. I am not sure if this goes with your actual usecase but I feel this is the best way to identify the table row where you are dropping. I am not sure about the sortable, are you trying to apply sortable after the row is moved ?
http://jsfiddle.net/2gb7vcLf/
$("#table1 .childgrid, #table2 .tt1").droppable({
drop: function (event, ui) {
// alert($(this).hasClass('childgrid'))
//alert($(this).closest('tr').hasClass('draggable_tr'))
var droppedRow = $(this).closest('tr');
// $(droppedRow).css('color', 'red');
$(ui.helper.children()).insertAfter(droppedRow);
// $(droppedRow).next(ui.helper.children());
//$(this).append(ui.helper.children());
$('.selectedRow').remove();
}
});
<tr class="draggable_tr tt1">

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?

.toggleclass and .slidetoggle don't work

First of all, I've read all the topics about this issue and couldn't find a solution. Basically I'm trying to apply a simple nested gridview in my MVC project. It all works fine except the expand/collapse function. I implement it with this script:
$(document).ready(function () {
var size = $("#main #gridT > thead > tr > th").size(); // get total column
$("#main #gridT > thead > tr > th").last().remove(); // remove last column header
$("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
$("#main #gridT > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("hoverEff")
.addClass("expand")
.attr('title', "click for show/hide")
);
//now get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
-->>>Up until this point everything works smoothly.
//// add click event for make collapsible
$(".hoverEff", this).live('click', function () {
alert($(".hoverEff").parent().closest("tr").next().text());
$(".hoverEff").parent().closest("tr").next().slidetoggle(100);
$(".hoverEff").toggleclass("expand collapse");
});
});
//by default make all subgrid in collapse mode
$("#main #gridt > tbody > tr td.expand").each(function (i, el) {
$(this).toggleclass("expand collapse");
$(this).parent().closest("tr").next().slidetoggle(100);
});
});
When I open my page, subgrids are not collapsed, and when I click on the button, it doesn't trigger anything. I tried to check if the function is working with this code:
alert($(".hoverEff").parent().closest("tr").next().text());
and it is. I've also heard that inline elements cannot be affected by a .slidetoggle, but my element is a tr inside a table. I've also heard that .live is deleted in jQuery 2.0.0, but I have jQuery 3.0.0 installed through NuGet. I can't trigger .on('click') event and I'm starting to think I've messed up something in the bundle rendering.
My grid:
<div class="inner" id="inner2">
<div id="main" style="padding:25px; background-color:white;">
#grid.GetHtml(
htmlAttributes: new { id = "gridT", width = "700px" },
columns: grid.Columns(
grid.Column("singleUser.RA_Responsible_Person", "RA Responsible Person"),
grid.Column("singleUser.Issues_Count", "Issues Count"),
grid.Column(header: "Min Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Min_Deadline)),
grid.Column(header: "Max Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Max_Deadline)),
grid.Column(format: (item) =>
{
WebGrid subGrid = new WebGrid(source: item.Cases);
return subGrid.GetHtml(
htmlAttributes: new { id = "subT" },
columns: subGrid.Columns(
subGrid.Column("Issue_ID", "Issue_ID"),
subGrid.Column("Issue", "Issue"),
subGrid.Column("Case_Status", "Case_Status"),
subGrid.Column("Issued_by", "Issued_by"),
subGrid.Column("Issue_Date", "Issue_date"),
)
);
})
)
)
</div>
Please assist! Thanks in advance!

Are there any console errors?
I believe that toggleclass should be toggleClass should it not? The same with slideToggle?

I used google graphs in this page earlier and added jquery as a library through a link to googleapis. I removed it and I think all the functions stopped working, but it's a start.
I'll make another issue with a different content.

tooltip doesn't work in a table cell

My question might seems long, but I am trying to give relevant information in detail so please bear with me.
I am using tooltipster tooltip plugin (http://iamceege.github.io/tooltipster/) on my website. However my question is more related to JS instead of tooltipster plug in. I am easily able to integrate the tooltip plugin on my website and it is working just fine on images, buttons, etc where the content is static. However, I am populating tables dynamically based on the JSON response and I can't get the tooltip working on the table cells.
First I thought there might be some problem with the plugin. In a flash I switched to bootstrap inbuilt tooltip and I am facing the same problem. I can get bootstrap tooltip to work on other other elements apart from the table cells.
Here is my JS where I am adding the class customToolTip
function addBetTypeProductsToLegend(table) {
var betType = $.data(table, 'BetTableData').betType,
legendRow = $.data(table, 'BetTableData').legendRow,
productNotFount = true,
td;
$.each(betType.products, function(index,value) {
var betTypeHint = 'betTypeId_' + value.id + '_hint';
td = element.create('td');
element.setId(td, value.id);
element.setClassName(td, 'customToolTip'); // adding customToolTip class
element.setTitle(td, window[ 'betTypeId_' + value.id + '_hint']); // setting respective title tags
element.setInnerHtml(td, getBrandBetName(value.name));
legendRow.appendChild(td);
productNotFount = false;
});
// Racing Specials
td = element.create('td');
element.setId(td, betType.id);
element.setInnerHtml(td, betType.name);
if (productNotFount) legendRow.appendChild(td);
}
This is how I am assigning class name and title attributes
var element = {
create: function(htmlIndentifier) {
return document.createElement(htmlIndentifier);
},
setClassName: function(element, className) {
element.className = className;
},
setTitle: function(element, title) {
element.title = title;
}
}
JS plugin initialization
$(document).ready(function() {
$('.customToolTip').tooltipster({
animation: 'fade',
delay: 400,
theme: 'tooltipster-IB',
touchDevices: false,
trigger: 'hover'
});
});
So the above doesn't apply to the table cell I tried to use bootstrap tooltip and initialize the function like this.
$(".customToolTip").tooltip({
placement : 'top'
});
It works fine for other elements apart from table cells.
I tried to set padding as well for tooltip as well
$('.customToolTip').each(function(e) {
var p = $(this).parent();
if(p.is('td')) {
$(this).css('padding', p.css('padding'));
p.css('padding', '0 0');
}
$(this).tooltip({
placement: 'top'
});
});
I followed couple of other posts where people were facing problem with tooltip and table cells
bootstrap "tooltip" and "popover" add extra size in table
https://github.com/twbs/bootstrap/issues/5687
Seems like I have deal with the layout issue later on first I need to show the custom tooltip instead of default title attribute.

Your initialization starts on document ready, when table does not exist in DOM yet. So $('.customToolTip') does not find those.
What you need is to make function, something like this:
function BindTooltips(target) {
target = target || $(document);
target.find('.customToolTip').tooltipster({
animation: 'fade',
delay: 400,
theme: 'tooltipster-IB',
touchDevices: false,
trigger: 'hover'
});
}
And launch it on document ready, so it will find all .customToolTip in your document.
Then after your table is being inserted into dom launch this function again and provide container (table) as argument.

How do I manipulate a jqGrid's search/filters?

I have a jqGrid with a navBar that has search: true and multipleSearch: true. I would like to add a button to my UI that automatically adds an additional rule to the search.
I've tried manipulating the postData for the filter directly, but values added this way don't show up in the search UI.
I've also tried accessing the search box directly using jQuery, like this:
$('#fbox_list').searchFilter().add();
$('#fbox_list .sf .data input').each(function(index) {
alert($(this).val());
});
But, in addition to feeling hackish, it only works if the user has already clicked on the search button (the fbox_list div is not constructed on load).
Has anyone else dealt with an issue like this?

For the sake of posterity, here is the hack I'm currently using. The grid has an ID of list and the pager has an ID of pager:
jQuery(document).ready(function() {
//Initialize grid.
//Initialize the navigation bar (#pager)
//Hack to force creation of the search grid.
//The filter's ID is of the form #fbox_<gridId>
jQuery('#pager .ui-icon-search').click();
jQuery('#fbox_list').searchFilter().close();
//Example button events for adding/clearing the filter.
jQuery("#btnAddFilter").click(function() {
//Adds a filter for the first column being equal to 'filterValue'.
var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters;
if (postFilters) {
$('#fbox_list').searchFilter().add();
}
var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel');
//The index into the colModel array for the column we wish to filter.
var colNum = 0;
var col = colModel[colNum];
$('#fbox_list .sf .fields select').last().val(col.index).change();
$('#fbox_list .sf .data input').last().val('filterValue');
$('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change();
$('#fbox_list').searchFilter().search();
});
jQuery("#btnClearFilter").click(function() {
$('#fbox_list').searchFilter().reset();
});
});

If you mean the filter toolbar, you can do this: (status is the col name -- so, replace "#gs_status" w/ "#gs_" + your_col_name
jQuery("#distributor_grid").jqGrid('showCol',['status']);
jQuery(".ui-search-toolbar #gs_status")
.val('ALL')
;
$('#distributor_grid').RefreshData(); // triggers toolbar

to clear inputs, selects and reset grid
$("td#refresh_navGrid").click();