We Keep Coding

Chrome createAttribute malforms prefix

I've got a simple piece of javascript that adds an exslt namespace to an xsl document. However, Chrome and Firefox handle this differently. Firefox will add the namespace correctly to the root with the full
xmlns:exsl="http://exslt.org/common"
Chrome however just plunks in
exsl="http://exslt.org/common"
Did you see the difference? 'xmlns' is gone in the latter and Chrome itself thinks the xslt is malformed: it returns null when you transform! If you correctly prefix, i.e., xmlns:exsl and then Chrome likes it. Try the fiddle below with Firefox and then with Chrome to see the difference. Here is the simple code
var styleString = '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><div>hi</div></xsl:template></xsl:stylesheet>';
var xslDoc = (new DOMParser()).parseFromString(styleString, "text/xml");
var docRoot = xslDoc.documentElement;
a = document.createAttribute("xmlns:exsl");
a.nodeValue = "http://exslt.org/common";
docRoot.setAttributeNode(a);
var xmls1 = new XMLSerializer();
var outputXHtmlString = xmls1.serializeToString(xslDoc);
document.getElementById("content").innerText = outputXHtmlString;

Use this
var styleString = '<xsl:stylesheet version="1.0" xmlns:xsl="w3.org/1999/XSL/Transform" xmlns:exsl="exslt.org/common"><xsl:template match="/"><div>hi</div></xsl:template></xsl:stylesheet>

FireFox document.exeCommand('copy') not working

I have the following code :
var doc = window.document;
var copyFrom = doc.createElement("textarea");
copyFrom.textContent = str;
var body = document.getElementsByTagName('body')[0];
body.appendChild(copyFrom);
copyFrom.select();
document.execCommand('copy');
body.removeChild(copyFrom);
This seems to work fine on Chrome as I am able to paste the contents on my 'str' variable. However this doesn't seem to work on FireFox/Safari.

Safari does not give clipboard access without user generated event. So only user initiated actions ( e.g Ctrl + C/ Cmd + C) can work to copy items.
About Firefox, can you give some details regarding the version. There has been a change post 44.0 where copy to clipboard has been enabled.

How do I put the contents of a variable to the clipboard using javascript?

function Copy() // this function will be latched to a button later on.
{
var text = writePreview(); // this pours in the formatted string by the writePreview() function to the variable 'text'
text = br2nl(text); //variable 'text' is purified from <br/> and is replaced by a carriage return
//I need some code here to pour in the contents of the variable 'text' to the clipboard. That way the user could paste the processed data to a 3rd party application
}
I'm building an offline client-side web application. The main purpose of this is to have user's input to fields, format the text such that it fits a certain criteria, then click copy so they can paste it to a 3rd party CRM.
The only available browser for this is Google Chrome. I've scoured the internet hoping to find a simple solution for this.
I'm not concerned about security as this application is not going to be published and is meant just for offline use.
I want to keep it as simple as possible and adding invisible textarea ruin the layout. Flash is not allowed in my current environment.

Look at clipboard.js
A modern approach to copy text to clipboard
No Flash. No dependencies. Just 2kb gzipped
https://clipboardjs.com/

this was solved by updating my browser (Google Chrome v49). I was using a lower version (v34).
found that later versions (v42+) of Google Chrome supports document.execCommand('copy')
I hope it helps people
here are the functions I used:
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
function copy()
{
SelectAll('textAreaID');
document.execCommand("Copy", false, null);
}

According to this article "In javascript, copying a value from variable to clipboard is not straightforward as there is no direct command.".
Hence as suggested there I did the following:
defined the following in html file - I added at the bottom ( I never noticed element being added and being removed ):
<div id="container"/>
then in Javascript I added:
.
function copyQ() {
var container = document.getElementById("container");
var inp = document.createElement("input");
inp.type = "text";
container.appendChild(inp);
inp.value = "TEST_XYZ";
inp.select();
document.execCommand("Copy");
container.removeChild(container.lastChild);
alert("Copied the text: " + inp.value);
}
May be there is a better way, but it works for me.
UPDATE:
Further, I found that if your text is multiline and if you use input of type text all text is converted to one line text.
To keep paragraphs / separate lines I tried to use textarea and text is copied as is - multi line:
var inp = document.createElement("textarea");
//inp.type = "text";
Hope it helps someone.

Exporting data from jqgrid to Excel in Internet Explorer

I am developing some enhancements for a web page and I need some assistance. I have added a button that when clicked will take the html from a jqgrid and export it to Excel. I thought I had it all working and then I did the cross browser test and Internet Explorer does not like the following method:
function exportGrid()
{
var grid = "#diamondpassConferencePreregistrantGrid";
var mya=new Array();
mya=$(grid).getDataIDs(); // Get All IDs
var data=$(grid).getRowData(mya[0]); // Get First row to get the labels
var colNames=new Array();
var ii=0;
for (var i in data){colNames[ii++]=i;} // capture col names
var html="";
var columnNames = $(grid).jqGrid('getGridParam','colNames');
for(i=0;i<columnNames.length-1;i++)
{
html = html + columnNames[i+1]+"\t";
}
html=html+"\n";
for(i=0;i<mya.length;i++)
{
data=$(grid).getRowData(mya[i]); // get each row
for(j=0;j<colNames.length-1;j++)
{
html=html+data[colNames[j+1]]+"\t"; // output each column as tab delimited
}
html=html+"\n"; // output each row with end of line
}
html=html+"\n"; // end of line at the end
alert(html);
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}
This all seems to work fine for me in Firefox and Chrome. The problem is that when I test in IE, the line:
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
opens up a new tab telling me the webpage cannot be displayed.
I got some info from the following webpage:
http://www.jquerybyexample.net/2012/10/export-table-data-to-excel-using-jquery.html
that basically tells me that line will not work in IE, that I need to set the response header as so:
Response.AddHeader("Content-Disposition", "attachment;filename=download.xls");
My problem is that I do not know what this entails. I tried adding this line and as I would have expected, I get "Response is undefined" or something of this nature.
I was just curious if anyone had an idea as to the best way to move forward from this point. I know how to detect the browser and I can always use different code to accomplish my Excel export for Internet Explorer but my problem is that I do not know the correct way to do the equivalent line in IE.
Any help would be greatly appreciated.
Thank you!
-Dave

Copy a HTML snippet of the page to a clipboard

I am developing web development tools and I'd like to copy of a part of current web page's HTML code to the clipboard using Javascript.
This probably would involve
Getting the piece of HTML in the question using DOM innerHTML
Copying this text to clipboard using Javascript
Is anyone aware of any gotchas here? E.g. related to clipboard handling - when one is not using documentEditable mode do I need to create a hidden where to put the HTML payload for copying?
Also if possible I'd like to make the interaction with WYSIWYG components, like TinyMCE, work so that when one pastes the HTML in the visual edit mode it comes through as formatted HTML instead of plain text.
It is enough if solution works in Chrome and Firefox. Internet Explorer does not need to be supported.

Javascript has no way of adding things to the clipboard. Well at least not any that works cross browser.
There is however a flash solution which works well. http://code.google.com/p/zeroclipboard/

We developed a small Firefox-AddOn to remove special characters (hyphens) when copy/pasting content from the editor. This has been necessary because there is no javascript way to fill anyting into the clipboard. I guess it should be possible to write an extension for Chrome too (googel is your friend here). This seems to be the only way to get what you want from my point of view.
Example:
Here is the necessary code snippet for a FireFox-Addon to remove special characters onCopy
// get Clipboard Object
var clip = Components.classes["#mozilla.org/widget/clipboard;1"].createInstance(Components.interfaces.nsIClipboard);
// get Transferable Object
var tr_unicode = new Transferable();
var tr_html = new Transferable();
// read "text/unicode flavors" (the clipboard has several "flavours" (html, plain text, ...))
tr_unicode.addDataFlavor("text/unicode");
tr_html.addDataFlavor("text/html");
clip.getData(tr_unicode, clip.kGlobalClipboard); // Systemclipboard
clip.getData(tr_html, clip.kGlobalClipboard); // Systemclipboard
// generate objects to write the contents into (used for the clipboard)
var unicode = { }, ulen = { }, html = { }, hlen = { };
tr_html.getTransferData("text/html", html, hlen);
tr_unicode.getTransferData("text/unicode", unicode, ulen);
var unicode_obj = unicode.value.QueryInterface(Components.interfaces.nsISupportsString);
var html_obj = html.value.QueryInterface(Components.interfaces.nsISupportsString);
// we remove Softhyphen and another control character here
var re = new RegExp('[\u200b' + String.fromCharCode(173)+ ']','g');
if (unicode_obj && html_obj)
{
var unicode_str = unicode_obj.data.replace(re, '');
var html_str = html_obj.data.replace(re, '');
// Neue Stringkomponenten für unicode und HTML-Content anlegen
var unicode_in = new StringComponent();
unicode_in.data = unicode_str;
var html_in = new StringComponent();
html_in.data = html_str;
// generate new transferable to write the data back to the clipboard
// fill html + unicode flavors
var tr_in = new Transferable();
tr_in.setTransferData("text/html", html_in, html_in.data.length * 2);
tr_in.setTransferData("text/unicode", unicode_in, unicode_in.data.length * 2);
// copy content from transferable back to clipboard
clip.setData(tr_in, null, clip.kGlobalClipboard);
}