How do you make a draggable <tr> using YUI3? - javascript

I'm using YUI3 and I've been trying to make <tr> tags inside a table draggable with no luck. I've found that I can drag <div> nodes around, but for some reason I can't drag a <tr>. It shouldn't be a limitation, I've found examples of YUI2 where this is done, but the code is completely different from YUI3 and I can't figure this out.
Does anyone know if you can drag <tr> nodes in YUI3, and how to do this?
Here's my code:
YUI({combine: true, timeout: 10000}).use("dd-drop", "dd-constrain", "node", function (Y) {
var drags = Y.Node.all('#draftable-players tr.drag');
drags.each(function(v, k) {
var dd = new Y.DD.Drag({
node: v,
dragMode: 'intersect'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#draft'
});
dd.on('drag:end', function(e) {
e.preventDefault();
});
});
});
And the relevant HTML:
<div id="draft">
<table id="draftable-players">
<tr class="drag"><td>some stuff</td></tr>
<tr class="drag"><td>some more stuff</td></tr>
</table>
<table> another table, i'm trying to drag <tr>s from the other one to this one
</table>
</div>
Any help would be appreciated. Thanks!

This question didn't garner too much interest, but I thought I'd answer it just as well in case someone comes across this in the future.
I found that you can't drag <tr> elements between two tables, only within the same table - further inspection of the YUI2 examples I mentioned above were doing exactly this, dragging within a given table.
I've since converted my tables to <div> elements and styled them to look like a <table> using CSS, and now I can drag from one 'table' to another. If anyone is curious to see some code for dragging and dropping, check out YUI3's docs here.

Related

Copy HTML Table to Text Box Using JQuery/JS

My problem has left me trying many solutions and stumped for a while now. My problem is exactly this:
There's a HTML table and a button on a page. Upon pressing the button, a script will run, copying the contents of the cells in the table into a text box. Here is the code for the table:
<table>
<tr><th></th><th>Category1</th></tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr><th></th><th>Category2</th></tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr><th></th><th>Category3</th></tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr><th></th><th>Category4</th></tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
My first thoughts were to write a script that iterated through the table and copied the contents of each cell (and creating a new line after every 2 cells). I realized very quickly, that I had no idea how to do that. After some searching I was able to come up with a script that clones the table, and it actually works quite well. This code is here:
$("button").click(function () {
$("table").clone().appendTo(".copy");
});
There are two problems that arise from using this method, however. I want plaintext, not a carbon copy of the table. The other problem is that this method only works when I clone the table into a div, it will not work when I try to clone it to a text box.
I've searched for a while for something similar to this and can only find solutions to copying single rows or cells. I had originally started there but couldn't figure out a way to write a loop that started at the beginning of the table and iterated through the entire thing, copying the contents as it iterated row by row (and creating a new line with each new row that it encountered). The loop would obviously end when there were no more rows to iterate through... This all sounds so simple to do, I know there must be a way.
Please Note: This script will be applied to a Site.Master Page so the script must be able to run for a plethora of tables. All of the tables follow the same structure shown above, but some will have more rows than others.
Any ideas? Any help is greatly appreciated.
You could use the .each() JQuery Method:
JS
function cloneTableContents()
{
$("table tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text());
});
});
}
JS For All Tables On Page In Order
function cloneTableContents()
{
$("table").each(function()
{
$(this).find("tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text()+" ");
});
});
});
}
HTML
<table id="mine">
<tr><th></th>
<th>Category1</th>
</tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr>
<th></th>
<th>Category2</th>
</tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr>
<th></th><th>Category3</th>
</tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr>
<th></th><th>Category4</th>
</tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
<textarea class="copy"></textarea>
<button onclick="cloneTableContents('mine','.copy');">Copy</button>
Working Example:
http://casewarecomputers.com:8088/soHelp.html

Javascript works in a href but not in JS file

Hope everyone is fine. Well I have a weird question, something that I'm missing or failing to understand. Hope anyone here can help me out. Well here goes,
Well I have an html page where I've defined a table with a few hard-coded values as below,
<table id='data-table' class='someClass'>
<thead>
<tr>
<th id="name-title">NAME</th>
</tr>
</thead>
<tbody>
<tr class="odd"><th class='c1'>Zachary Quinto</th></tr>
<tr class="even"><th class='c1'>Penny</th></tr>
<tr class="odd"><th class='c1'>Glen McGrath</th></tr>
</tbody>
</table>
Now I have a javascript file in which, somewhere down the code (Using jQuery), I do this,
$('#data-table').click(function() {
var value = $(this).find("th.c1").text();
if(value == "Zachary Quinto")
someFunc.showData('data-table', 1);
});
And for some reason this doesn't work, it goes over this function and I don't see any change/effect. However, to my amazement, If, when encapsulating my data into tags, it seem to work. (By encapsulating, I mean something like below)
<tr class="odd"><th class='c1'>Zachary Quinto</th></tr>
<tr class="even"><th class='c1'>Penny</th></tr>
<tr class="odd"><th class='c1'>Glen McGrath</th></tr>
Can anyone please help me with this, I'm not really sure what I'm doing wrong in Javascript file which doesn't let me do this. It's kind of weird as I thought both mean the same thing one way or another.
Thanks a lot for your time.
Because something is wrong with your script.
You should write it as:
"use strict";
$('#data-table').on("click", "th", function(e) {
e.preventDefault();
var value = $(this).text();
if(value == "Zachary Quinto")
someFunc.showData('data-table', 1);
});
jQuery's text function returns the combined text of all matching elements. In your case, there are three th.c1 matches, so the text() function returns Zachary QuintoPennyGlen McGrath.
You can see this by throwing a breakpoint on your event handler in a debugger.

Change input/textarea stylesheet on element focus (click) using javascript / jquery

This is what I try to do, and I know this will take many hours to get the good looking UI.
$("input[type=text],textarea").bind("focus", function()![enter image description here][1] {
var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
}).bind("blur", function() {
$('.css-editor').remove();
});
Above code is just a prototype. Redactor air mode http://imperavi.com/redactor/examples/air/ is the closest thing I can find on the net.
I wonder if there are currently any jQuery plugins or Javascript to do this?
<table style="width:100%" class="remark" cellspacing="0" cellpadding="0">
<tr class="invoice-cell-section">
<th colspan="6" class="invoice-cell-top">
**<input type="text" value="{_ Remark}"/>**
</th>
</tr>
<tr>
<td colspan="6" class="invoice-footer invoice-cell-bottom">
**<textarea class="invoice-remark static"></textarea>**
</td>
</tr>
</table>
You see input box with value Remark and empty Textarea up here.. I want when people click on it.. there is a stylesheet editor to edit only that textarea/input element...
For anyone just reading this question.. I know there is several way to add/enable this .css-editor to the DOM.... I see right to it now how to implement it if I need to code myself.. + better UI than select dropdown + hours of debugging... It like a small version of TinyMCE or CLEditor that works for single HTML element not the whole HTML in textarea.
I just want to know if there are any plugin/snippet that I can instantly use..
why not just:
$(document).on('focus', 'input[type=text],textarea', function(){
$(this).addClass('focused');
});
$(document).on('blur', 'input[type=text],textarea', function(){
$(this).removeClass('focused');
});
define a css class called focused and apply the style there.
hope that helps.
EDIT:
after better understanding of what you need, think about something like this.
create an invisible, floating (absolute positioned) panel- it will be the "css editor".
now, on every focus on an input, get to know it's location on document, and display the invisible floating css editor relatively. look at this idea:
$(document).on('focus', 'input[type=text],textarea', function(){
$('.css-editor').css({left: $(this).offset().left+'px', top: $(this).offset().top+'px'}).show();
});
$(document).on('blur', 'input[type=text],textarea', function(){
$('.css-editor').hide();
});
note that there's no need to remove and re-create this hidden element. you can create it once on DOM and manipulate it's position & visibility.
hope it's better :-)
No need to bind focus event on the textbox, it itself have the focus,focusin and focusout events attached in it. So you can simply use either .onfocus or you can also use .live function.
Using onfocus handler directly:
$("input[type=text],textarea").focus(function() {
var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});
Using Live event handler:
$("input[type=text],textarea").live("focus",function() {
var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});
You need to add function() {}
$("input[type=text],textarea").click(function(){
$(this).removeClass("your_old_class").addClass("your_new_class")
});

Ordering of Columns in html using javascript or jquery

I am facing a problem on getting a solution on Ordering of Columns. I have used many 3rd party libraries like danvk library,jqGrid for dragging the columns. But what i want to do is. I have a div and have five fields in it. {FirstNJame,LastName,Address,Phone,Designation} also having up and down button so that i can move the fields up and down. On the Ok button, I want to have my table order according the order of fields which i have set on that div. so in short, change in thead and tbody, of what kind of order has been set in that div. Ihave programmed up and down, back and forward. I just need a solution to move the column position in javascript or in jquery. Thanks.
This should get you going: http://jsfiddle.net/S9ykD/
The code (using jQuery):
var order = [0,2,1,3];
$(function() {
$("table tr").each(function() {
var orderedTds = new Array();
for (var i=0; i<order.length;i++)
orderedTds[i] = $(this).children("td")[order[i]];
for (var i=0; i<order.length;i++)
$(this).append(orderedTds[i]);
});
});
this is the sample markup :
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</table>
Just use some js library - I recommend to use Datatables, which is very nice and you can accomplish almost everything and is very cusotmizable. Or use whatever you are used to. Then just handle the click event on the button and send the configuration to the library. This can be done pretty well with Datatables. See fnSort or fnSortListener in the Datatables API doc.

Make one div containing a table into two divs containing tables

I have a function that gets raw HTML to output to a table, but I want to take out the first three columns and put them in another div.
I am considering making a div on the page that is hidden, setting this div's html to the raw HTML I get, and then using the selector syntax to strip it into each table's div. Is there a way to do this without the intermediate faux-div to hold the raw HTML?
It all depends out what the "function that gets raw HTML" does. Where is it getting the HTML? If it's in some kind of format other than a rendered node, then you should be able to manipulate it as needed prior to rendering it. If you've got it in a string format (and the markup is valid) jQuery is really good at turning strings into traversible objects. For example:
var xml = '<div><span>hello</span></div>';
console.log($(xml).find('span'));
In FireBug, this displays the span as an object node.
I'm not sure exactly why you'd want to do this, rather than arrange your data server-side, but one approach that works is:
$(document).ready(
function(){
$('table').click(
function(){
$('<table />').appendTo('#newTable').addClass('new');
$('table').eq(0).find('tr td:first-child').each(
function(){
$(this).appendTo('.new').wrap('<tr></tr>');
});
});
});
With the (x)html:
<table>
<tr>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
<td>2:3</td>
</tr>
<tr>
<td>3:1</td>
<td>3:2</td>
<td>3:3</td>
</tr>
<tr>
<td>4:1</td>
<td>4:2</td>
<td>4:3</td>
</tr>
</table>
<div id="newTable"></div>
JS Fiddle demo
The demo uses jQuery's click() event, but that's just to show it working interactively; it could certainly be placed straight into the DOM-ready/$(document).ready(function(){/* ... */}); event.
The above code would allow repeated clicks (each time moving the first 'column' into a new table), the edit removes that possibility using jQuery's one(), giving the following jQuery:
$(document).ready(
function(){
$('table').one('click',
function(){
$('<table />').appendTo('#newTable').addClass('new');
$('table').eq(0).find('tr td:first-child').each(
function(){
$(this).appendTo('.new').wrap('<tr></tr>');
});
});
});
JS Fiddle demo, featuring one().

Categories