Develop Reference

How to send selected table rows value to another page in javascript

I have 2 pages and 2 tables, in page 1(table 1) I want to send selected rows to page 2(table 2) where in table 2 I show the selected rows
This is the first table in page 1:
<table class="src-table">
<tr>
<th>Select</th>
<th>Firstname</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Jill</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Eve</td>
</tr>
</table>
<br>
<input type="button" value="Submit" id="submit">
Like image below
This is the second table in page 2:
<table class="target-table">
<tr>
<th>Select</th>
<th>Firstname</th>
</tr>
</table>
Like image below

If you really need this. You can use localStorage.
localStorage not working in the sandbox. But you can use it your application as well.
run storeItems when you need to save selected to store (for example on element select)
run appendStoredToAnouther on window event window.onload on page with the target table
function storeItems() {
const selectedItems = document.querySelectorAll("#first-table .selected");
const selectedHtml = nodeListToString(selectedItems);
localStorage.add('selectedTableItems', selectedHtml);
}
function nodeListToString(nodeList) {
let string = '';
nodeList.forEach(function(node) {
string += node.outerHTML;
});
return string;
}
function appendStoredToAnouther() {
const itemsHtml = window.localStorage.get('selectedTableItems');
const targetTable = document.getElementById('target-table');
targetTable.innerHTML = itemsHtml + targetTable.innerHTML;
}
<table id="first-table">
<tr class="selected">
<td>1</td>
<td>Selected</td>
<td>Item</td>
</tr>
<tr class="selected">
<td>1</td>
<td>Selected</td>
<td>Item</td>
</tr>
<tr>
<td>2</td>
<td>Not Selected</td>
<td>Item</td>
</tr>
</table>
<button type="button" onclick="storeItems()">Send to anouther</button>
<button type="button" onclick="appendStoredToAnouther()">Append stored to anouther</button>
<table id="target-table">
<tr class="selected">
<td>1</td>
<td>Selected</td>
<td>Item</td>
</tr>
<tr>
<td>2</td>
<td>Not Selected</td>
<td>Item</td>
</tr>
</table>

Below I demonstrated how some lines could be carried over from one table to another one on a following page. However, since both pages are probably hosted on the same server it is in most cases more practical to first collect some unique identifiers for the selected table records, transmit them to the next page and then get the actual table contents from the original data source again (in many cases a database table or view). This approach will also make your page safer against unauthorised injections.
In case that the tables are to be shown in two consecutive pages you can do the following:
// shortcut for utility function querySelectorAll():
const qsa=(s,o)=>[...(o||document)['querySelectorAll'](s)];
const log=qsa('#log')[0];
qsa('#submit')[0].addEventListener('click',function(){
var dat="tbl="+JSON.stringify(
qsa('tr',qsa('.src-table')[0]).filter(tr=>qsa('input:checked',tr).length)
.map(tr=>qsa('td',tr).slice(1)
.map(td=>td.innerHTML))
);
log.innerHTML+="<hr>dat:"+dat;
log.innerHTML+="\nwindow.location=\"page2.html?\"+encodeURIComponent(dat)";
// this second part would be placed in the onload section if the next page:
log.innerHTML+='var dat=window.location.search.substr(1)'
var args=dat.split("&").reduce((a,v)=>{
var t=v.split('=');
a[t[0]]=JSON.parse(decodeURIComponent(t[1]));
return a;},
{}
);
qsa('.trg-table')[0].innerHTML+=
args.tbl.map((r,i)=>'<tr><td>'+(i+1)+'</td><td>'+r.join('</td><td>')+'</td></tr>').join('');
})
<h2>page one</h2>
<table class="src-table">
<tr><th>Select</th><th>Firstname</th><th>Familyname</th></tr>
<tr><td><input type="checkbox"></td><td>Jill</td><td>Jones</td></tr>
<tr><td><input type="checkbox"></td><td>Eve</td><td>Adams</td></tr>
</table>
<br>
<input type="button" value="Submit" id="submit">
<h2>this would be the second page</h2>
<table class="trg-table">
<tr><th>no</th><th>Firstname</th><th>Familyname</th></tr>
</table>
<pre id="log"></pre>
As this is a sandbox the last lines had to modified a bit. In your page you should actually redirect your page with the window.location assignment.
On the second page you then need to read the passed information from window.location.search and use that information to append it to your table there.

Executing code before and after downloading a file with Datatables (JS)

I am using Datatables to create some tables with data. I am using the option they have to include a download CSV button. However, since I am working with large amounts of data, I wanted to put a "Loading, please wait..." gif on the screen so users know it is downloading. However, the gif loading I have requires that I activate it before the downloading starts, and deactivate it after the downloading finishes (really it's just adding a class to the body which makes it a bit transparent and adds a wheel gif). I haven't found a way to run code before and after download. I think I can do before with action, but not after.
Can anyone help me out with this? Is there a way to do code before download and after download? Or, in absence of that, is there maybe a better way I can implement a waiting gif while it prepares the csv for download?

You can extend the csv-button and call the original action inside it. This enables you to show a custom loading-indicator while the export is being processed.
$(document).ready(function() {
let table = $('#example').DataTable({
processing: true,
dom: 'Bfrtip',
buttons: [{
extend: 'csv',
text: 'CSV Export',
action: function(e, dt, button, config) {
console.log('csv button clicked');
this.processing(true); // show indicator on button
console.log('before csv export');
config.filename = 'my-export'; // set filename
$.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config); // call export-action
console.log('after csv export');
this.processing(false); // hide indicator on button
}
}],
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test-1</td>
<td>Test 1234</td>
</tr>
<tr>
<td>Test-3</td>
<td>I dont know!</td>
</tr>
<tr>
<td>Test-2</td>
<td>Another...</td>
</tr>
<tr>
<td>Alpha-1</td>
<td>Apple Test</td>
</tr>
<tr>
<td>Alpha-2</td>
<td>Banana Test</td>
</tr>
<tr>
<td>Alpha-3</td>
<td>Coconut</td>
</tr>
<tr>
<td>Beta-1</td>
<td>Beta</td>
</tr>
<tr>
<td>Beta-2</td>
<td>Not Alpha</td>
</tr>
<tr>
<td>Alpha-1</td>
<td>Apple Test</td>
</tr>
<tr>
<td>Alpha-2</td>
<td>Banana Test</td>
</tr>
<tr>
<td>Alpha-3</td>
<td>Coconut</td>
</tr>
<tr>
<td>Beta-1</td>
<td>Beta</td>
</tr>
<tr>
<td>Beta-2</td>
<td>Not Alpha</td>
</tr>
</tbody>
</table>

How to update table cell value using jQuery

I am having problem updating table cell value using jQuery 1.4.2. it all works in Firefox and Safari but IE8 and IE9 is simply not doing anything. There is no warning, error or anything that would give me some hint where to look for it.
Table looks following:
<table id="test">
<tr id="1">
<td id="name">sample name</td>
<td id="schedule">sample value</td>
<td id="day">sample value</td>
</tr>
<tr id="2">
<td id="name">sample name</td>
<td id="schedule">sample value</td>
<td id="day">sample value</td>
</tr>
<tr id="3">
<td id="name">sample name</td>
<td id="schedule">sample value</td>
<td id="day">sample value</td>
</tr>
</table>
I am executing ajax call and getting json data:
{"Test": [
{"id":"1", "name":"John", "day":"Monday"},
{"id":"2", "name":"Marry", "day":"Thursday"}
]}
once data is received there is a loop which iterates through the json dataset and updates appropriate column with received data as following:
$.each(json.Tests, function(){
/* update test with details */
var test = this.hash;
/*set values for each test */
$("table#test tr[id=" + test + "]").find("#name").html(this.name);
$("table#test tr[id=" + test + "]").find("#schedule").html(this.status);
$("table#test tr[id=" + test + "]").find("#day").html(this.changed);
});
As I mentioned, this has been tested in Safari and Firefox all works fine but IE8 and IE9 seems not to do anything.

I think the id attribute should be reserved for unique identifiers in my opinion. How about changing the id attribute of the td elements to a class attribute or even name attribute. I suspect that IE is getting confused.
Also, if you keep ids unique and change the id attribute of the td to a class then you can change your code to something like:
$("#" + test + " td.name").html(this.name);
And because a number could represent pretty much anything also prefixing those ids with some sort of identifier prefix would be good. Something like:
$("#thing-" + test + " td.name").html(this.name);
And the html would look like this:
<table id="test">
<tr id="thing-1">
<td class="name">sample name</td>
<td class="schedule">sample value</td>
<td class="day">sample value</td>
</tr>
<tr id="thing-2">
<td class="name">sample name</td>
<td class="schedule">sample value</td>
<td class="day">sample value</td>
</tr>
<tr id="thing-3">
<td class="name">sample name</td>
<td class="schedule">sample value</td>
<td class="day">sample value</td>
</tr>
</table>
Hope that helps!

Ids aren't supposed to start with a number. Perhaps IE9 isn't as forgiving as the other browsers.

Have you an URL for us to Test your Script?

Don't understand jquery - setting equal height contained divs

I am trying to set two side-by-side divs contained by a single larger div to equal column height. I am trying to use the following jquery script:
<script type="text/javascript" language="javascript">
function pageLoad() {
$(document).ready(function() {
setEqualHeight($(".instructionsParent > div"));
});
}
function setEqualHeight(columns) {
var tallestColumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestColumn) {
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
</script>
Then the following are my DIV's:
<div class="instructionsParent borderDiv borderTable0" style="overflow:hidden">
<div class="instructionsLeft" style="float:left;width:49.5%">
</div>
<div class="instructionsRight" style="float:right;width:49.5%">
</div>
</div>
The jquery is running and appears to be returning the largest height (451), but doesn't seem to apply it to the two divs. I don't know much jquery or javascript and don't understand the following: "setEqualHeight($(".instructionsParent > div"));"
Could it be that I have that coded incorrectly?
Thank you,
James
Ok, here is the entire subform which is my entire page really (I have two subforms on the page with one visible and the other not:
<%# Control Language="VB" AutoEventWireup="false" CodeFile="ActivexInstructionsSubForm.ascx.vb" Inherits="Controls_ActivexInstructionsSubForm" %>
<div class="instructionsParent borderDiv borderTable0" style="overflow:hidden">
<div class="instructionsLeft" style="float:left;width:49.5%">
<table cellspacing="0" class="borderTable0" width="100%" style="height:430px;" >
<tr>
<td align="center">
<br />
<h3 style="font-family:Arial;color:#17238C">"The Important Stuff"</h3>
</td>
</tr>
<tr valign="top">
<td align="center">
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:bold;color:#17238C">
<p style="font-size:11pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">If this is the first time</strong> you've used our downloads, you now can see a
skinny information bar at the top of the page.
Click it, and select "Install ActiveX Control" from the dropdown menu.
Then, click "Install" when you see the new dialog box appear.
This does not collect info about you or hurt your machine.
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<script type="text/javascript">
//Create JavaScript object that will embed File Downloader to the page
var fd = new FileDownloaderWriter("FileDownloader", 172, 28);
//For ActiveX control full path to CAB file (including file name) should be specified
fd.activeXControlCodeBase = "aurigma/FileDownloader2.cab";
fd.activeXControlVersion = "2,0,16,0";
//Set the Download button text
fd.addParam("ButtonDownloadText", "Proceed With Download");
//Set the Download button background color
//fd.addParam("BackgroundColor", "#E0EBFF");
fd.addParam("BackgroundColor", "White");
//Set the Download button regular image
fd.addParam("ButtonDownloadImageFormat", "width=172;height=28;BackgroundColor=#17238C;" +
"urlNormal=App_Themes/Default/images/BtnProceedDownloadA.jpg;" +
"urlDisabled=App_Themes/Default/images/BtnProceedDownloadA.jpg");
//Set license key
fd.addParam("LicenseKey", "888822-12222-D8444-111122-55555");
//Set reconnect attampts count
fd.addParam("ReconnectAttemptsCount", "360");
//Set reconnect timeout value (30000 = 10 seconds)
fd.addParam("ReconnectTimeOut", "10000");
//Configure URL from which the file list will be downloaded
//Change this path if necessary
//fd.addParam("FileList", "aurigma/filelist.txt");
//The following listener will perform some actions when the file list is about to be downloaded
fd.addEventListener("DownloadStep", "FileDownloader_DownloadStep");
//The following listener will perform some actions when download of a single file is finished
fd.addEventListener("DownloadItemComplete", "onDownloadItemComplete");
//The following listener will perform some actions when download process is complete
fd.addEventListener("DownloadComplete", "onDownloadComplete");
//The following listener will perform some actions when a general error is detected
//fd.addEventListener("Error", "onError");
//Add page load listener
//fd.fullPageLoadListenerName = "fullPageLoad";
//Set instructions property
fd.instructionsEnabled = false;
//Tell File Downloader writer object to generate all necessary HTML code to embed File Downloader into the page
fd.writeHtml();
</script>
<asp:ImageButton ID="BtnReturnHome" runat="server" AlternateText="Return to Home Page"
ImageUrl="~/App_Themes/Default/images/BtnReturnHomeS.jpg">
</asp:ImageButton>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:italic;color:#17238C">
<p style="font-size:10pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Why do I need this?</strong> <strong>
This tiny control-program is only installed ONCE on a given machine,
and is there to assist with all future downloads.
It allows you to download a batch of several files at once, save
them wherever you wish, AND keeps track of the download progress. If your internet connection glitches, the
download will *automatically restart* (after a couple of minutes)
from where it left off, once the internet connection is restored, presuming that your computer remains powered on.
This is a very important feature, since these are BIG files that may take
several hours to download if you have a relatively slow internet connection.</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="instructionsRight" style="float:right;width:49.5%">
<table cellspacing="0" width="100%" class="borderTable0" style="height:430px;">
<tr>
<td align="center">
<br style="height:20px" />
<h4 style="color:#17238C">Additional Info</h4>
</td>
</tr>
<tr valign="top">
<td align="center">
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:normal;color:#17238C">
<p style="font-size:9pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Worst-case scenario</strong>: <strong>
If the transfer fails because your computer shut down from a power-outage, there may be a temporary file left on your
machine - but the next time you start the download, it automatically cleans up what was left from the aborted transfer.
If you tend to get hit by electric power outages more often than normal, we recommend that you purchase a battery-backup UPS
(Uninterruptible Power Supply) that has at least 1500VA capacity so that the computer AND your modem AND router can remain
powered-up for several hours when the power goes out. Start the download before going to bed, and TURN OFF the monitor
during that process, so that the UPS would not have to feed it if a power outage hits.</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:normal;color:#17238C">
<p style="font-size:9pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Gotta-shut-down scenario</strong>: <strong>
If you are in the midst of a long download session, but for some reason you must interrupt it and turn off your computer
a while, then if you want to resume the download from where you left off, be sure to HIBERNATE your machine rather than
doing a simple shutdown. You can set this up from Control Panel > Power Options > Hibernate Tab. There will be a button
on your keyboard somewhere that activates hibernation (sometimes called "sleep"). It takes a complete "RAM snapshot" of
what is going on, so that the next time you start the computer, it resumes exactly where it left off (it may take a few
minutes after restart for the download to auto-resume).</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2" style="height:24px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>

Removing the pageload function worked for me. The script on my working page reads:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
setEqualHeight($(".instructionsParent > div"));
});
function setEqualHeight(columns) {
console.log("here")
var tallestColumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestColumn) {
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
</script>

Try removing the pageLoad() function (I don't think you were calling it).
See :
http://paulisageek.com/tmp/jquery/equal_height.html

jQuery slideUp bug?

I'm messing around with some jQuery stuff for a mockup and noticed some odd behavior. I'm hoping someone here can shed some light on it.
This is all mockup / test code, so please excuse the sloppyness.
So I have a table that I'm using in conjunction with the jQuery datatable plugin:
http://www.datatables.net/
My table markup is as follows:
<table id="dexterIndex">
<thead>
<tr>
<th>Name</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test 1</td>
<td>Yes</td>
<td>2009-2010</td>
<td>Fall 2010</td>
<td>Fall 2010</td>
</tr>
<tr>
<td>Test 2</td>
<td>No</td>
<td>2009-2010</td>
<td>Fall 2010</td>
<td>Fall 2010</td>
</tr>
<tr>
<td>Test 3</td>
<td>Yes</td>
<td>2009-2010</td>
<td>Fall 2010</td>
<td>Fall 2010</td>
</tr>
<tr>
<td>Test 4</td>
<td>No</td>
<td>2009-2010</td>
<td>Fall 2010</td>
<td>Fall 2010</td>
</tr>
<tr>
<td>Test 5</td>
<td>No</td>
<td>2009-2010</td>
<td>Fall 2010</td>
<td>Fall 2010</td>
</tr>
<tr>
<td>Test 6</td>
<td>No</td>
<td>2009-2010</td>
<td>Fall 2010</td>
<td>Fall 2010</td>
</tr>
<tr>
<td>Test 7</td>
<td>Yes</td>
<td>2008-2009</td>
<td>Fall 2009</td>
<td>Fall 2009</td>
</tr>
</tbody>
</table>
Now, the functionality I'm going for is:
On hover change the row background color
If hovering for more than 'x' seconds slide down a sub-row for the row being hovered over.
Here is a screenshot of the effect working correctly (generally):
Upon leaving the row with one's mouse the sub-row slides back up.
This all works, but it seems that each time it slides back up it falls short by about a pixel. Here is an image after hovering/un-hovering 10 times. This is the table in the state after the sub-row slides up (meaning it's not just the sub-row showing with no text).
If I change slideUp/slideDown to fadeIn/fadeOut everything works fine and I don't get extra pixels. (I'll probably end up just using the fades, but i'm curious about this behavior).
This is what safari is reporting about the DOM in the bugged state (also, why can't I copy/paste in the Safari Web Inspector?):
And finally, here is some sloppy jQuery that handles the actual moving parts:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#dexterIndex').dataTable()
$('#dexterIndex tbody tr')
.hover(function() {
var table_row = this
table_row.hovering = true
window.setTimeout(function() {
if (table_row.hovering) {
$('.school-info').slideUp('fast', function() {
$(this).remove()
})
table_row.hovering = false
var tr = $('<tr />').attr({'class': 'school-info',})
$(table_row).after(tr)
$('<td />')
.attr({
'colspan': 5
})
.css({
'display': 'none'
})
.text("Sub Row")
.appendTo(tr)
.slideDown('fast')
}
}, 2000)
$(this).children().each(function() {
(this.oldColor === undefined)? this.oldColor = $(this).css('background-color'): null;
$(this).css({'background-color': '#f3ffc0'})
})
},
function() {
this.hovering = false
$('.school-info').slideUp('fast', function() {
$(this).remove()
})
$(this).children().each(function() {
$(this).css({'background-color': this.oldColor})
})
})
})
TL;DR: slideUp slides up one pixel less each time, fadeOut doesn't have any issues.
If anyone can shed some light on this issue it'd be greatly appreciated.

Couple of questions/ideas:
It seems this technique is being used for UI/richness, meaning that the sub-rows aren't calculated when the user hovers nor does it get created from an ajax call, etc. But you aren't hiding and unhiding the data, but instead creating it on hover and then removing it afterward. This is potentially very inaccessible and adds extra overhead to the browser-script.
So I'd suggest having the table load with the actual sub-rows and having your jquery hide them during load. You could simply add a class like "sub_row" to those tables.
Second, is this only happening in Safari? Is it happening in Firefox? Either way, I would guess you are losing a pixel from the browser adding a default border. I don't know why this would keep adding that border on each slideup, but I'm sure someone else here can spot that.
Lastly, I'm unfamiliar with your selector syntax. you are selecting your tds and trs as :
$('<tr />)
and
$(')
instead of:
$('tr')
and
$('td')
Any reason why?