Develop Reference

Drag a row from a jquery datatable to an unordered list

I'm trying to drag a row from a datatable to an li or ul element.
e.g.
The rows have the draggable and ondragstart attribute in them e.g.
<tr class="even" role="row" style="height: 22px;" draggable="true" ondragstart="drag(event)" }="">
<td class="sorting_1" style="display: none;">
<input name="item.ID" id="item_ID" type="hidden" value="30">
</td>
<td> Menu Structure </td>
<td> IdentityComponent </td> ..etc
</tr>
The markup in the UL, allowing it as a target for a drop :
<li>
<span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#MMID_0">
<input name="MM_0" class="mmTree-cnode hidden" id="MM_0" type="input" iid="FkComponentId=ComponentId=29 |"/>
<span class="glyphicon glyphicon-plus"></span>
<span class="componentName" ondragover="allowDrop(event)" ondrop="drop(event)">
Administration
</span>
</span>
<ul>
<li>..blah blah<li/>
<li>..blah blah<li/>
</ul>
It looks like the drag portion works, but on dropping I get this error, re the 'data' parameter (in the drop function), at this line. (data = ""). Possibly the 'dataType as text is incorrect??
ev.target.appendChild(document.getElementById(data));
Unhandled exception at line 1923, column 3 in http://localhost:60667/IdentityComponentPermission/List
0x80070057 - JavaScript runtime error: Invalid argument.
Thanks

The drag function changed from the W3 schools example, to
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.innerText);
console.log("Target innerText = " + ev.target.innerText);
console.log("Cells innerHTML for the ID = " + ev.target.cells[0].innerHTML);
console.log("Target innerHTML = " +ev.target.innerHTML);
}
and the drop to
var srcData = ev.dataTransfer.getData('text');
// srcData now has the value 'Countries Country List' , i.e. the innerText
// passing the ev.target.cells[0].innerHTML, gives me
<input name="item.ID" id="item_ID" type="hidden" value="33">
// passing the ev.target.innerHTML, gives me the entire row's markup
From here it is a matter of extracting what I want, or iterating the cells of the entire row into an array (possibly in a form scope variable) and retrieving it in the drop function and appending what I want from that, to a UL or Li .

jQuery overriding hyperlinks on table's td values

I have a table as below and am trying to open a pop-up window with the link '/ledesInvoiceErrors.do?InvoiceId='+parentInstanceId' when user clicks on Invoice number columns of table (INV1 and INV2) instead of going to the hyper link associated with invoice number fields.
http://jsfiddle.net/pmgguwob/3/
<div class="listTable expanded">
<table class="searchResults {id:321}">
<thead>
<tr class="tipAdded">
<th class="first unsortable ui-state-default ui-state-hover ui-state-active"></th>
<th data-name="Invoice Number" class="typeString ui-state-default ui-state-hover sort asc ui-state-active" id="sort_invoiceNumber">
Invoice Number
</th>
<th data-name="Invoice Total" class="typeMoney last ui-state-default ui-state-hover ui-state-active sort" id="sort_invoiceTotal">
Invoice Total
</th>
</tr>
</thead>
<tbody class="">
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV1
</div>
<input value="65" name="invoices0.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=51;parentFieldName=invoices">
INV1
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
15.25 USD
</div>
</td>
</tr>
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV2
</div>
<input value="66" name="invoices1.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=55;parentFieldName=invoices">
INV2
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
111.25 USD
</div>
</td>
</tr>
</tbody>
</table>
Am a very beginner of jQuery and I dont really know how to achieve this. Could anyone please me with this?
Note: I dont have liberty of modifying the hyperlinks associated with Invoice number fields since these links are generated from our internal framework. but I can embed jquery script on my page to override the hyperlinks
SOLUTION UPDATED
http://jsfiddle.net/pmgguwob/10/

To override your hyperlink's behaviour, you can do something along the lines of:
$(function(){
// you may have to narrow down the selector here to a specific class or 'td'
$(".searchResults a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, 'window name', 'window settings');
return false;
});
});
Updated Fiddle

In this case, something like this (fiddle):
$("a").click(function (e) {
e.preventDefault();
var mills = (new Date).getTime();
window.open($(this).attr("href"), mills);
//$("body").append("#" + $(this).attr("href") + "#");
});
I'm using mills to give each window a new handle, so you don't reuse a window and potentially confuse your user by reloading a window that's hidden from them. The last line is just to show the URL it's using for testing; you might want to massage that value a little, but I believe it's right as is.
I know window.open isn't new and cool, but its options let you control the new window's appearance with likely enough granularity. You could jQuery that up instead if you wanted.

How to add one specific HTML block with jQuery

I'm trying to add html block with jQuery, but whatever i tried i couldn't add it correctly. I want to copy and paste one specific html block when i click the "add" button (Addfield button). I don't want to clone, just add one field with one click . Again and again... Hope you can help me thanks in advance.
HTML :
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('panel')->__('Kategoriler') ?></h4>
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
</div>
<fieldset id="grop_fields">
<table cellspacing="0" class="form-list">
<tr>
<td class="label"><label for="Type">Tip</label></td>
<td class="value">
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="Class">Class</label></td>
<td class="value">
<input id="Class" name="optional[1][class]" value="" type="text" class=" input-text"> </td>
</tr>
</table>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
<br></br>
</fieldset>

You can do it like this:
var html_code = '<span>put your full code here</span>';
var selector = 'body';
//change selector with where you want to append your html code into..
$(selector).append(html_code);

One way to approach this would be to create your "template" area in a hidden DIV. Use jQuery to duplicate and repeat the template.
For example:
<div id="templateholder"></div>
<div id="template" style="display: none;">
<div class="template">
<label for="Type">Tip</label>
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
</div>
</div>
function createTemplate() {
var temp = $("#template div.template").clone();
//from here you can do things like change name fields or values
temp.find("#Type").attr("name", "Type2");
//...attach events
temp.find("#Add").click(function() {
//some click action like make a new template
createTemplate();
});
//then add the new code to the holding area
$("#templateholder").append(temp);
}
If you wanted to create a new one when the page first loads
$(function() {
createTemplate();
});

Its would be nice to know what you have tried.... but if you do a quick search you would know about DOM method....
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
source: http://www.w3schools.com/js/js_htmldom_nodes.asp
there is another question in stackoverflow with similar question with decent answer
Inserting HTML into a div

How to append data on change event of one select to second select?

I have two select drop downs in same table row.
I want to add data to second drop down on change of first drop down.
Both drop downs do not have id or class??
is it possible without id or class append data to it??
Here is my html..
<button type="button" id = "add-row" class="btn btn-info pull-right">
<i class="glyphicon glyphicon-plus"></i> Add new
</button>
<table class="table" id="mans">
<tr>
<td><select class="form-control tag-list-name">
<option>ABC</option>
<option>PQR</option>
</select>
</td>
<td><select class="form-control">
<option> </option>
</select></td>
<td><button type="button" class="btn btn-info pull-right delete-row">
-
</button></td>
</tr>
</table>

You can use jQuery .first() and .eq() to select them.
var selects = $('#mans select');
selects.first().on('change', function () {
selects.eq(1).append('<option>New Option</option>');
});
DEMO

I solved my problem using following code :
Added new class name to second select/drop down.
And then used following code:
var tr = $(this).closest('tr');
var select = tr.find('.tag-name-values');
var currentContext = select.html("");
currentContext.append(data);

Select controls in table in next row using jQuery

I have a table: in first row I have an anchor to click, in second - <asp:CheckboxList /> expanding to another table.
How can I access inputs inside that table using jQuery? I want to select all using one link, and deselect all using another one.
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!-- Anchor to click -->
<a onclick="do stuff" href="javascript://">Select all</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<!-- CheckboxList -->
<table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
<tbody>
<tr>
<td>
<!-- input to select -->
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I tried $(this).parent().('#list > input') but it doesn't work. I'm not familiar with jQuery, so please help. Thanks!

This is the jQuery I think you need:
// When the select link is clicked
$('#selectall').click( function ( ) {
\\ For each checkbox inside an element with class "link" set to checked
$('.list input[type=checkbox]').attr('checked','checked');
});
You need to change your link to this:
<a id="selectall" href="javascript:void( );">Select all</a>
Similarly, for deselect, jQuery:
$('#deselectall').click( function ( ) {
$('.list input[type=checkbox]').removeAttr('checked');
});
Link:
<a id="deselectall" href="javascript:void( );">Select all</a>
Because it would hurt me not to, I've got to warn against using tables for laying out your form. It's very bad practice these days, and you can make a layout that looks as good, but is more flexible, using divs and CSS. I'd go for:
<div id="select_links">
<!-- Anchor to click -->
<a id="selectall" href="javascript:void( );">Select all</a>
<a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</div>
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</div>
</div>
EDIT: Mark's right, that should have been removeAttr(checked), not attr('checked',null);

It is as simple as just targeting all checkboxes and setting the checkbox.
$("#doIt").click(function(){
$("input[type='checkbox']").attr("checked", true);
});
If you want to remove the check
$("#doIt").click(function(){
$("input[type='checkbox']").removeAttr("checked");
});
Another option would be to use toggle() which can be used to toggle checkboxes on an off.
$("#doIt").toggle(function() {
$(this).text("Select All");
$("input[type='checkbox']").removeAttr("checked");
}, function() {
$(this).text("Deselect All");
$("input[type='checkbox']").attr("checked", true);
});
Code example on jsfiddle.

I would remove any dhtml code from your anchor tag, get rid of the onclick and change the href to just #. With jquery all you need is a class or id.
so you should have:
in your html:
<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>
in your javascript:
$('a.toggle_checks').click(function(){
$('table.list').children('input').attr('checked', this.id == 'select_on');
});
so what this code is doing is $('a.toggle_checks') is selecting all anchor tags with class toggle_checks, binding a click event handler, when clicked $('table.list') selects the tables with class list, .children('input') selects the inputs within those tables, and the attr part sets the checked attribute to checked if the anchor tag has the id select_on and not if otherwise.