I have 0 knowledge of javascript but I need a quick fix to make this work. I was given the block of code before. It works but only in IE. I need one that works for all browsers. Can I get an easy copy and paste code to work because I know nothing about Javascript nor much about xml. It works currently with the income.xml file and ENG_Template.xsl file being in the directory with this html file but only with IE.
<html>
<body>
<script language="javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("income.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("ENG_Template.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>
Related
I am currently testing DOMPDF and got it working quite nice for my purposes, including CSS styling, displaying content fetched from a mysql database etc.
Now I tried to use some Javascript, but it doesn't work. I used a very simple script for testing:
HTML somewhere on the page:
<div id='mydiv1' style='width: 100%;height:20px;background:#ddd;'></div>
The JS (just above the closing </body> tag (but I also tried it right after the opening <body> tag):
<script>
document.getElementById('mydiv1').innerHTML = 'this is a test';
</script>
When I echo this page in the browser (I am echoing a variable which contains the complete HTML/PHP page), that text appears in the DIV. When I put the same variable in DOMPDF's loadHtml and then render and output it, the script-generated text doesn't appear in the PDF (the rest of the page does).
So my question is: Is there any way to make Javascript work in DOMPDF-generated PDFs?
Unfortunately, DOMPDF doesn't support javascript. You may consider looking at something like phantomjs, which can be used to save pdf files, as well.
There is a DomPDF option to turn on inline javascript:
$isJavascriptEnabled = true;
Heres an example of how to use the DomPDF options:
$HTML = <<<HTML
!DOCTYPE html>
<html>
<head>
<body>
some html
</body>
<script> somejs </script>
</head>
</html>
HTML;
require_once "sites/all/libraries/dompdf/autoload.inc.php";
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('isJavascriptEnabled', TRUE);
$dompdf = new Dompdf($options);
$dompdf->load_html($HTML);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream('blah.pdf');
I took this from DomPDF's options page: https://github.com/dompdf/dompdf/blob/master/src/Options.php
I just started working on my school assignment with some regular expressions in Javascript. I can't seem to figure out how to actually read data from a text file into variable using jQuery method .get(). When I try my code out nothing happens. It seems like it never enters .get() section. Here is my code:
JS file:
document.getElementById('file').onchange = function(){
var file = "New Text Document.txt"; //this will later be the selected file
$.get(file,function(data){
var myVar = data;
$("#123").html(myVar);
});
};
HTML file:
<!DOCTYPE html>
<html>
<head>
<title>animacija</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<script type="text/javascript" src="func.js"></script>
<div id="123"></div>
</body>
</html>
The code snippet seems to be ok, but it will not work locally since $.get is for ajax requests and requires full available server path.
I rather recommend you the use of FileReader API.
HTML
<title>animacija</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<input type="file" name="file" id="file">
<div id="123"></div>
</body>
JavaScript
document.getElementById('file').onchange = function() {
var file = this.files[0];
var FR = new FileReader();
FR.readAsText(file);
FR.onload = function(data) {
var myVar = data.target.result;
$("#123").html(myVar);
}
};
JSFiddle
Hope it works for you!
Most browsers will not allow file: resources to read other local files. This is to prevent attacks where a downloaded HTML document could start reading (and transmitting) the contents of your hard drive (or at least your Downloads folder) as soon as you open it.
The other thing you need to know here is that $.get is used for getting resources from an HTTP server, while file inputs are used to allow a user to select a file from their local drive. I realize in your case it's a little confusing, because your web page is on your local hard drive, but imagine if your HTML and scripts were being hosted online, and some other user (not you) was using them to process their own locally-stored files.
MDN has a good tutorial on how to get started with <input type="file"> inputs.
The code won't work locally due to cross-origin limitations.
It works fine when run on a remote server and all files are in the same folder.
If you want to read local files (aka. files selected by user through the file input) you can read more about FileAPI here:
https://www.html5rocks.com/en/tutorials/file/dndfiles/
I am using laravel-dompdf to generate a PDF with a summary of results, consisting of tables and a few images, nothing to spectacular. I would like to print highcharts in the generated PDF as well. So first, I want to try a simple javascript code to see if it was working... but it isn't. I have enabled the "DOMPDF_ENABLE_JAVASCRIPT" => true, but so far no luck yet. The simple code which I want to print:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>
This only prints the foo and bar.. Could someone please help me out?
Dompdf (or more specifically Back-end that it uses for PDF rendering) doesn't really render javascript. What it does is - it parse everything inside <script type="text/javascript"></script> tag and adds it in the special section of the pdf file.
I'm not sure if this javascript is what you need, since you can work with the dom tree outside of the <script> tag. What you can do is write simple scenarios, for example like this one:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script type="text/javascript">
app.alert({cMsg:"Message", cTitle: "Title"});
</script>
Try to open generated file and you will see alert.
Here more complete guide on what you can do inside javascript section: Acrobat JavaScript Scripting Guide
I'm using XSLT to transform an XML into HTML on the client side (Chrome browser).
I'm trying to add <script> HTML tag to the XSLT but it seems that the code in it is never evaluated on the generated HTML, although I've specified defer.
On the other hand, onclick event itself runs OK.
Here is an example of the XSLT which demonstrates the issue:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
encoding="UTF-8"
indent="no"/>
<xsl:template match="/">
<html>
<head>
<script type="text/javascript" defer="defer">
<xsl:text>
<![CDATA[
function test(){
window.alert('Test');
}
]]>
</xsl:text>
</script>
</head>
<body>
<button onclick="window.alert('Test')">This works</button>
<br/>
<button onclick="test()">This does not work</button>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The XML file does not matter is this example. You can try the above example on W3Schools online XSLT transformation
In this example, clicking on This does not work yields an error: Uncaught ReferenceError: test is not defined.
What am I doing wrong here?
Update
The problem only happens when I'm performing the XSLT transformation itself in javascript. Here is the piece of code that is doing that in my case:
var processor = new XSLTProcessor(),
htmlResult;
processor.importStylesheet(xsl);
htmlResult = processor.transformToFragment(xhr.responseXML, document);
document.getElementById("result").appendChild(htmlResult);
Update
I also need the following to work correctly when they appear in the XSLT file:
Loading external javascript files using script element:
<script type="text/javascript" src="/somelibrary.js" />
Bare <script> elements with javascript code in them, that call functions which are declared in an external javascript file, loaded by an earlier script element.
As far as I have researched, this is a known bug in Chrome reported in 2013 in https://code.google.com/p/chromium/issues/detail?id=266305. It does not look as any effort has been taken to fix it. However, the bug reporter also found a workaround, instead of using appendChild or insertBefore or similar to insert the fragment returned by transformToFragment directly into the document, if you call importNode first on the fragment, the script elements are then executed when you insert the imported fragment into the document.
I have written a test case http://home.arcor.de/martin.honnen/xslt/test2015111606.html which works fine for me a current version of Chrome on Windows, it uses
var proc = new XSLTProcessor();
proc.importStylesheet(xsltDoc);
targetElement.appendChild(targetElement.ownerDocument.importNode(proc.transformToFragment(xmlDoc, targetElement.ownerDocument), true));
However, do note that Microsoft Edge neither with the normal approach of calling appendChild on the fragment nor with the above Chrome workaround executes the script element's code.
Possible solution: (inspired from this answer)
function insertAndExecute(id, htmlResult) {
document.getElementById(id).appendChild(htmlResult);
var scripts = document.getElementById(id).getElementsByTagName("script");
var deferreds = [];
// First load all external scripts
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].src != "") {
deferreds.push($.getScript(scripts[i].src));
}
}
// Execute other (inline) scripts after all external scripts are loaded
$.when.apply(null, deferreds).done(function() {
for (var i = 0; i < scripts.length; i++) {
if (!scripts[i].src) {
$.globalEval(scripts[i].innerText || scripts[i].textContent);
}
}
})
}
var processor = new XSLTProcessor(),
htmlResult;
processor.importStylesheet(xsl);
htmlResult = processor.transformToFragment(xhr.responseXML, document);
// The htmlResult may contain javascript code. Scan and run it
insertAndExecute("result", htmlResult);
UPDATE 1
Here is how I am currently loading text into my WT project.
wApp->require("ace.js");
//orignal XML, reads in incorrectly on one line
//std::string data = ReadFile("Q:\\settings.xml");
//XML after being formatted in notepad to look like xml, reads in correctly
//std::string data = ReadFile("Q:\\settings.txt");
//changed extension back to XML, edited in notepad++ to XML format, reads in correctly
std::string data = ReadFile("Q:\\settings_from_text.xml");
//test xml tag, reads in correctly
//std::string data = "<tag_1>some tag content</tag_1>";
//test xml tag with newline, reads in incorrectly on one line, doesnt read newline
//std::string data = "<tag_1>some tag content</tag_1>\n<tag_1>some tag content</tag_1>";
_ace_editor = new WText(data, Wt::PlainText);
//_ace_editor->setText(data);
_ace_editor->setInline(false);
// A WContainerWidget is rendered as a div
_ace_editor->resize(1000, 500);
std::string editor_ref = _ace_editor->jsRef(); // is a text string that will be the element when executed in JS
std::string command =
editor_ref + "._ace_editor = ace.edit(" + editor_ref + ");" +
editor_ref + "._ace_editor.setTheme(\"ace/theme/chrome\");" +
editor_ref + "._ace_editor.getSession().setMode(\"ace/mode/xml\");";// +
//editor_ref + "._ace_editor.setValue(\"" + data + "\");";
_ace_editor->doJavaScript(command);
Also, here is the ReadFile function
std::ifstream in(path, std::ios::in | std::ios::binary);
if(in)
{
std::string contents;
in.seekg(0, std::ios::end);
contents.resize(in.tellg());
in.seekg(0, std::ios::beg);
in.read(&contents[0], contents.size());
in.close();
return(contents);
}
throw(errno);
ORIGINAL POST
I am trying to load some XML files into an Ace (http://ajaxorg.github.io/ace/#nav=about) editor that I embedded in a WT (http://www.webtoolkit.eu/wt?wtd=rqBfShGlNupXgK3M1sWOxUk1Loz3BsW0) page. The problem is that XML files for whatever reason have all their tags omitted from the load. Example: An XML file with the following content
<?xml version="1.0"?>
<settings>
<tag_1>some tag content</tag_1>
<tag_2/>
</settings>
will be loaded as
some tag content
I need the entire XML file as is, not just the contents of the tags.
After doing a bit of research, I have found quite a few other people on different forums asking the same thing but everything I have tried so far has not been working, which brings me here.
This includes setting the Ace mode to XML, trying to load the text in a different container before setting it to the ace window, changing the color schemes, and parsing a file in a different manner.
I am using visual studio 2010, and from debugging I can see that the file does get read in fully into a string with all the tags, but after it is set to the Ace window they are omitted.
Regardless of whether you are putting it on a WT page or not, bottom line this is a javascript question as that is what the ACE editor is, a javascript tool. Since you have not shown anything at all about how you are loading the xml content, I can only speculate that you must be writing the contents of the xml file into the pages output source?? I'll bet if you view-source do you see the tags? Well if so you are going about it wrong. The xml file needs to be loaded via javascript/ajax as I will demonstrate with a fully working example below (edit the 'url' in the $.ajax call to location of an xml file on your server), which shows tags and all contents of the xml file. Added the jQuery library just for simplicity of the ajax request code. Enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor"></div>
<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
var callback = function (data, status, xhr) {
//data will be the xml returned from the server
if (status == 'success') {
var editor = ace.edit("editor");
//apparently, only modes supported are 'html', 'javascript' & 'text'
editor.getSession().setMode("ace/mode/html");
editor.setValue(data);
}
};
//using jQuery to fire off an ajax request to load the xml,
//using our callback as the success function
$.ajax(
{
url : '/testing/cd_catalog.xml',
dataType : 'text', //explicitly requesting the xml as text, rather than an xml document
success : callback
}
);
</script>
</body>
</html>
Actually, I take back some of what I said about the "must load via javascript/ajax", as I now realize you were just following ACE's example of putting the contents into the editor div beforehand. If you want to do that with html or xml content, the tags will be evaluated by the browser and not show up, unless you copy the editor div's innerHTML then instantiate the editor and then set it's value to the previously saved innerHTML. For example:
<div id="editor"><?xml version="1.0" encoding="ISO-8859-1">
<books>
<text>some text content</text>
<book/>
</books></div>
<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var txt = document.getElementById('editor').innerHTML;
var editor = ace.edit("editor");
//editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.setValue(txt);
</script>
XML fragments in XML... you can somehow expect that your browser will interpret them, unless properly escaped. Try this:
txt = new WText("<bla>something</bla>", Wt::PlainText);
which will escape all XML-ish characters in your text.
Wt's default (XHTMLText) will try to parse your input as XML, and if it succeeds filter possible XSS vectors from the XML before sending it as XML to the browser. If it can't parse the text as XML, it will escape XML-ish characters to avoid that a browser with a liberal parser would unintentionally execute attack vectors.
The third option (XHTMLUnsafeText) bypasses XSS filtering - dangerous, so only use it when you know that your text is safe and can not be influenced directly or indirectly by the user.