I'm playing with a little drag & drop ui, and I'm a bit stumped on the DROP.
You can see the Fiddle here.
IMMEDIATE GOAL:
I just need to find out how to get the .draggable span into either of the .droppable divs.
Presuming I'm on the right path with append(), how do I access the content of the clone?
ULTIMATE GOALS:
Ultimately, I'll need to add a way do delete items from the drop-zone divs and limit the .textfield input/div to accepting only a single drop (the .textarea input/div can accept an unlimited number of "payloads").
CODE:
/* html */
<table>
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 494px;" aria-sort="ascending" aria-label="Company: activate to sort column descending">Company</th>
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 66px;" aria-label="Contact">Contact</th>
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 79px;" aria-label=" "> </th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class="sorting_1 has_draggable_children">
<span draggable="true" class="ui-draggable" data-companyid="0101" data-companyname="**BD">**BD</span>
</td>
<td>Contacts</td>
<td>Edit
Delete
</td>
</tr>
<tr class="even">
<td class="sorting_1 has_draggable_children">
<span draggable="true" data-companyid="0202" data-companyname="0024" class="ui-draggable">0024</span>
</td>
<td>Contacts</td>
<td>Edit
Delete
</td>
</tr>
<tr class="odd">
<td class="sorting_1 has_draggable_children">
<span draggable="true" class="ui-draggable" data-companyid="0303" data-companyname="Acme, Inc.">Acme Anvil Corp</span>
</td>
<td>Contacts</td>
<td>Edit
Delete
</td>
</tr>
</tbody>
</table>
<section class="offset7" id="dragged-drop-zone" >
<div class="look-like-input textfield droppable" contenteditable></div>
<br />
<div class="look-like-input textarea droppable" contenteditable></div>
</section>
.
/* js */
// DRAG
$('span[draggable]').draggable({
revert: true,
helper: "clone"
});
// DROP
$('.droppable').droppable({
tolerance: 'pointer',
drop: function(event, ui) {
//console.log(this);
$(this).append($(ui.helper));
}
});
Any and all help and suggestions are welcome
Alright ... got to the bottom of it.
The clone just doesn't seem to operate the way one would expect.
You end up having to use a custom function to package up your own clone into an object, and then pull it back out of your object in the drop.
You can see the working example here on jsFiddle.
Here's what ended up working:
// Drag
$('span[draggable]').draggable({
revert: true,
helper: function() {
var container = $('<div/>');
var dragged = $(this);
container.append(dragged.clone());
return container;
}
});
// Drop
$('.droppable').droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$(this).append($(ui.helper.children()));
}
});
Related
I have a kendo Grid which is generating below code:
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
<th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header">/th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
<td class="text-disabled-color" role="gridcell">
myFile.pdf
</td>
<td style="display:none" role="gridcell">
<a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
From the second table only, I would like to remove the two following inline class and css style from the td elements:
class="text-disabled-color"
style="display:none"
I know I can do that by using jQuery:
$("td[class='text-disabled-color']").removeAttr("class");
$("td[style='display:none']").removeAttr("style");
However this is a bit dangerous because if another td element has this same inline class and style it will get removed.
I want to remove the inline class and style from the second table within the div container myGrid. Imagine there is another table with td elements with the same inline class and style, in that case I do not want to remove them, only those within myGrid container. How can I do this?
As you always need to remove second table css & style you can use table:eq(1) this will refer to second table i.e :
$("#myGrid table:eq(1) td.text-disabled-color").removeAttr('class')
$("#myGrid table:eq(1) td[style='display:none']").removeAttr("style");
you can make use of below script where find the table inside div with class k-grid-content. Find all tds within table and remove class / attribute.
$(function(){
var $table = $('#myGrid div.k-grid-content table[role=grid]');
$table.find('td[role="gridcell"]').each(function(){
$(this).removeClass('text-disabled-color');
$(this).removeAttr('style');
});
});
.text-disabled-color {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
<th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header"></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
<td class="text-disabled-color" role="gridcell">Some text
myFile.pdf
</td>
<td style="display:none" role="gridcell">Some text
<a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I am using responsive jquery datatable.
Check this link
http://jsfiddle.net/82v4p7cL/1/
<div id="tblSkippedItems_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-12"><table id="tblSkippedItems" class="table table-striped table-bordered nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="tblSkippedItems_info" style="width: 100%;">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 159px;" aria-label="Itemnumber: activate to sort column descending" aria-sort="ascending">Itemnumber</th><th class="sorting" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Location : activate to sort column ascending"></th></tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td class="sorting_1" tabindex="0" style="">02-273-BU</td>
<td style="display: none;">
<select id="ddlTest" style="width: 300px">
</td>
</tr>
<tr class="child">
<td class="child" colspan="2">
<ul data-dtr-index="1">
<li data-dtr-index="2" data-dt-row="1" data-dt-column="2"><span class="dtr-title">Location <small>(Picking)</small></span> <span class="dtr-data"><span class="ClsLocName">N/A </span> <select id="ddlTest" style="width: 300px"></select></span></li>
</ul>
</td>
</tr>
</tbody>
</table></div></div>
</div>
I have dropdown column in jquery datatable.
In responsive mode, new tr is created with class "child".
And old tr is hide.
Both tr contain dropdown with same id.
When I try to add options to dropdown using jquery, no effect on dropdown.
var ddl = $('#DdlTest');
ddl.append($("<option></option>").val('0').html('Selectvalue'));
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
Try using a different id in your dropdown, you can only have 1 element with a specific id in every page, the script is working but it will append the options on the first element with that specific id.
There are several issues with your html and jquery select. first you didn't close the select tag try closing it and second ddlTest is not equal to DdlTest. you need to fix these issues then append your option.
<select id="ddlTest" style="width: 300px"></select>
JavaScript
var ddl = $('#ddlTest');
ddl.append($("<option value="0"></option>");
I made many researches about that topic but not getting any success.
Issue
When i am trying to do rowspan based on custom attribute rowspanx at that time it is not working properly.
How i am making rowspan based on rowspanx?
So i am trying to find previous elements and next elements with prevAll and nextAll
if i found prevAll() > 1 than it should work but it is not working properly. it is working proper only once but not second time.
I m getting unexpected output. which is in code snippet.
My expected output like below.
EDIT
my logic is if current element td have rowspanx==1 so query should check for its all previous or next element have rowspanx == 2 if it is found true in any siblings elements than current td add rowspan = 2.
This is my logic but it is not working properly.
Need Help!
$('table.overview-table tr').each(function()
{
$($(this).find("*")).each(function(i)
{
if($(this).attr("rowspanx") == 1 && $(this).attr("rowspanx") != undefined && ($(this).prevAll().attr("rowspanx") > 1 || $(this).nextAll().attr("rowspanx") > 1)){
$(this).attr("rowspan","2");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100" border="1" class="table overview-table">
<tr style="display: table-row;">
<th scope="row" class="" rowspan="2">10:00</th>
<td class="orange white" rowspan="1" rowspanx="2" style="height: 20px;">test</td>
<td class="grey white" rowspan="1" rowspanx="2" style="height: 20px;">test</td>
<td class="orange" rowspan="1" rowspanx="1" style="height: 20px;"></td>
<td class="orange" rowspan="1" rowspanx="1" style="height: 20px;"></td>
</tr>
<tr style="display: table-row;">
<td class="orange fat" rowspan="1" rowspanx="1" style="height: 20px;"></td>
<td class="grey fat" rowspan="1" rowspanx="1" style="height: 20px;"></td>
</tr>
</table>
For the sake of simplicity the CSS classes are omitted:
<table width="100" border="1" id="table">
<tr>
<th rowspan="2">10:00</th>
<td rowspan="1" rowspanx="2">test</td>
<td rowspan="1" rowspanx="2">test</td>
<td rowspan="1" rowspanx="1"></td>
<td rowspan="1" rowspanx="1"></td>
</tr>
<tr>
<td rowspan="1" rowspanx="1"></td>
<td rowspan="1" rowspanx="1"></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#table tr td').each(function()
{
if($(this).attr("rowspanx")==1)
{
$(this).attr("rowspan","2");
}
});
</script>
Example of JSFiddle
I have a table, the features of this table is:
A list of users
Once a user clicks the invite span it runs a uniquely generated piece of JS.
The table has a select checkbox on each row
What am I trying to Achieve:
Build a select all checkbox - Working
Once a user clicks an add all button, it must simulate a click on the button on each span for the invite in the same row as the so the relevant js can be run.
I can however not get the add all to work. Here is the code.
The HTML
<table aria-describedby="usersslavetoinvitestable_info" class="dataTable no-footer" id="usersslavetoinvitestable" role="grid">
<thead>
<tr role="row">
<th><input type="checkbox" name="select-all" id="select-all" /></th>
<th aria-controls="usersslavetoinvitestable" aria-label="User ID: activate to sort column descending" aria-sort="ascending" class="sorting_asc" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">User ID</th>
<th aria-controls="usersslavetoinvitestable" aria-label="Name: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Name</th>
<th aria-controls="usersslavetoinvitestable" aria-label="ID: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">ID</th>
<th aria-controls="usersslavetoinvitestable" aria-label="Client Type: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Client Type</th>
<th aria-controls="usersslavetoinvitestable" aria-label="Invite: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Invite</th>
</tr>
</thead>
<tbody>
<tr class="userinvitehide208 odd" role="row">
<td><input type="checkbox" class="user" name="checkbox-208" id="checkbox-208" /></td>
<td class="sorting_1">208</td>
<td>Tester Johnson</td>
<td>7903225038799</td>
<td>Investor <span class="multisep">|</span> Golfer <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid208">Invite Now</span></td>
</tr>
<tr class="userinvitehide221 even" role="row">
<td><input type="checkbox" class="user" name="checkbox-221" id="checkbox-221" /></td>
<td class="sorting_1">221</td>
<td>Ruan Pienaar</td>
<td>8305215038988</td>
<td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
<td class="invite"><span id="uid221">Invite Now</span></td>
</tr>
<tr class="userinvitehide224 odd" role="row">
<td><input type="checkbox" class="user" name="checkbox-224" id="checkbox-224" /></td>
<td class="sorting_1">224</td>
<td>Kyle Warmback</td>
<td>7983224869044</td>
<td>Golfer <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid224">Invite Now</span></td>
</tr>
<tr class="userinvitehide225 even" role="row">
<td><input type="checkbox" class="user" name="checkbox-225" id="checkbox-225" /></td>
<td class="sorting_1">225</td>
<td>Gardiol Lamberts</td>
<td>8403226038944</td>
<td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid225">Invite Now</span></td>
</tr>
<tr class="userinvitehide226 odd" role="row">
<td><input type="checkbox" class="user" name="checkbox-226" id="checkbox-226" /></td>
<td class="sorting_1">226</td>
<td>Ulof Van Der Westhuizen</td>
<td>8704223949733</td>
<td>Investor <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid226">Invite Now</span></td>
</tr>
</tbody>
</table>
<br>
<!-- select all boxes -->
<button id="add-all">Add Selected</button>
The JS for the checbox toggle all - Working
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
The add selected button function as I have it right now
This is not working, the child is not identifying.
$('#add-all').click(function(){
$('.user:checked').each(function () {
//Log Execute
console.log('Executed user call');
//Identify Parent
var trclass = $(this).parent().parent().attr('class');
console.log('trclass is ' + trclass);
//spanid
var spanid = $(trclass).find('td.invite').find('td.invitebutton').find('span').attr('class');
console.log('spanid is ' + spanid);
//Click Button
})
});
Here is the JS Fiddle I am working on:
https://jsfiddle.net/Webvelopment/ob1hd3rw/8/#&togetherjs=zMcgQU9zo4
I really can't figure out why it is not identifying. I also dont know how to simulate a click.
To simulate a click, you can simply call .click() on the target element.
As for the rest, you could just replace that whole function body with $('tr').has('.user:checked').find('.invitebutton').click();:
$('tr').has('.user:checked') -- find all trs that contain a checked .user element
.find('.invitebutton') -- in those rows, find elements with the class invitebutton
.click(); click the elements
Working jsFiddle
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
$('#add-all').click(function(){
$('tr').has('.user:checked').find('.invitebutton').click();
});
// just to show it works...
$(document).on('click','.invitebutton',function(){
console.log('clicked');
});
td {
padding: 5px;
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table aria-describedby="usersslavetoinvitestable_info" class="dataTable no-footer" id="usersslavetoinvitestable" role="grid">
<thead>
<tr role="row">
<th><input type="checkbox" name="select-all" id="select-all" /></th>
<th aria-controls="usersslavetoinvitestable" aria-label="User ID: activate to sort column descending" aria-sort="ascending" class="sorting_asc" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">User ID</th>
<th aria-controls="usersslavetoinvitestable" aria-label="Name: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Name</th>
<th aria-controls="usersslavetoinvitestable" aria-label="ID: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">ID</th>
<th aria-controls="usersslavetoinvitestable" aria-label="Client Type: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Client Type</th>
<th aria-controls="usersslavetoinvitestable" aria-label="Invite: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Invite</th>
</tr>
</thead>
<tbody>
<tr class="userinvitehide208 odd" role="row">
<td><input type="checkbox" class="user" name="checkbox-208" id="checkbox-208" /></td>
<td class="sorting_1">208</td>
<td>Tester Johnson</td>
<td>7903225038799</td>
<td>Investor <span class="multisep">|</span> Golfer <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid208">Invite Now</span></td>
</tr>
<tr class="userinvitehide221 even" role="row">
<td><input type="checkbox" class="user" name="checkbox-221" id="checkbox-221" /></td>
<td class="sorting_1">221</td>
<td>Ruan Pienaar</td>
<td>8305215038988</td>
<td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
<td class="invite"><span id="uid221">Invite Now</span></td>
</tr>
<tr class="userinvitehide224 odd" role="row">
<td><input type="checkbox" class="user" name="checkbox-224" id="checkbox-224" /></td>
<td class="sorting_1">224</td>
<td>Kyle Warmback</td>
<td>7983224869044</td>
<td>Golfer <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid224">Invite Now</span></td>
</tr>
<tr class="userinvitehide225 even" role="row">
<td><input type="checkbox" class="user" name="checkbox-225" id="checkbox-225" /></td>
<td class="sorting_1">225</td>
<td>Gardiol Lamberts</td>
<td>8403226038944</td>
<td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid225">Invite Now</span></td>
</tr>
<tr class="userinvitehide226 odd" role="row">
<td><input type="checkbox" class="user" name="checkbox-226" id="checkbox-226" /></td>
<td class="sorting_1">226</td>
<td>Ulof Van Der Westhuizen</td>
<td>8704223949733</td>
<td>Investor <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
<td class="invite"><span class="invitebutton" id="uid226">Invite Now</span></td>
</tr>
</tbody>
</table>
<br>
<!-- select all boxes -->
<button id="add-all">Add Selected</button>
I am currently using this SB Admin as bootstrap UI.
I search for one of my problem and I found this one SO LINK. Below are my codes. I try to use the code in my link. But its not working.
var checkedRows = [];
$('#dataTables-SalesMenu').on('check.bs.table', function (e, row) {
debugger;
checkedRows.push({ id: row.id, name: row.name });
console.log(checkedRows);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="col-sm-12">
<table class="table table-striped table-bordered table-hover table-responsive nowrap dataTable no-footer" role="grid" style="width: 100%;" id="dataTables-SalesMenu" aria-describedby="dataTables-SalesMenu_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Menu: activate to sort column ascending" style="width: 400px;">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Menu: activate to sort column ascending" style="width: 180px;">
Position
</th>
<th class="alignRight sorting_desc" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending" style="width: 180px;">
Party
</th>
<th class="alignCenter sorting_disabled" rowspan="1" colspan="1" aria-label="Add To Tray" style="width: 90px;">
Click to Vote
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>
Name
</td>
<td class="alignRight sorting_2">
Position
</td>
<td class="alignRight sorting_2">
Party
</td>
<td class=" alignCenter">
<center>
<label>
<input type="checkbox" value="" />
</label>
</center>
</td>
</tr>
<tr role="row" class="even" style="color: white; background-color: rgb(82, 136, 75);">
</tr>
</tbody>
</table>
</div>
<button id="buttonId">Heheheheh</button>
</div>
I try to search the .bs on my project but my problem is after a while of searching my VS is being NOT RESPONDING.