Can't get prettydiff to work in a bowser
54 views
Skip to first unread message
James Shepherd
Jun 18, 2015, 8:48:57 AM6/18/15
to prett...@googlegroups.com
Hi,
I have a small test script for prettydiff (below). According to the documentation: "The output from the diff operation returns an HTML table of the actual diff output as the first array index and a some minor metadata about the number of errors in the second array index with both indexes formatted as HTML and neither comprising a complete HTML document."
However this is false. What I get in the output is a complete HTML document that has javascript outside of script tags. So it is just a mess.
All I want is the HTML table, and probably some way to get the required CSS.
What am I doing wrong?
Thanks,
James
<html>
<head>
</head>
<body>
<pre id="before">
some text
</pre>
<pre id="after">
some different text
</pre>
<iframe id="output" style="width: 100%; height: 50em">
</iframe>
<script src="prettydiff.js" type="application/javascript"></script>
<script src="api/dom.js" type="application/javascript"></script>
<script type="application/javascript">
var args = {
source: document.getElementById("before").innerHTML,
diff: document.getElementById("after").innerHTML,
sourcelabel: "before",
difflabel: "after",
lang: "text",
};
var output = prettydiff(args);
var iframe = document.getElementById("output");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(output[0]);
iframe.contentWindow.document.close();
</script>
</body>
</html>
I have a small test script for prettydiff (below). According to the documentation: "The output from the diff operation returns an HTML table of the actual diff output as the first array index and a some minor metadata about the number of errors in the second array index with both indexes formatted as HTML and neither comprising a complete HTML document."
However this is false. What I get in the output is a complete HTML document that has javascript outside of script tags. So it is just a mess.
All I want is the HTML table, and probably some way to get the required CSS.
What am I doing wrong?
Thanks,
James
<html>
<head>
</head>
<body>
<pre id="before">
some text
</pre>
<pre id="after">
some different text
</pre>
<iframe id="output" style="width: 100%; height: 50em">
</iframe>
<script src="prettydiff.js" type="application/javascript"></script>
<script src="api/dom.js" type="application/javascript"></script>
<script type="application/javascript">
var args = {
source: document.getElementById("before").innerHTML,
diff: document.getElementById("after").innerHTML,
sourcelabel: "before",
difflabel: "after",
lang: "text",
};
var output = prettydiff(args);
var iframe = document.getElementById("output");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(output[0]);
iframe.contentWindow.document.close();
</script>
</body>
</html>
in...@prettydiff.com
Jun 18, 2015, 9:01:53 AM6/18/15
to prett...@googlegroups.com
James,
The problem appears to be that you are using document.write. This is very
old and archaic way of interacting with HTML. I suggest not using
document.write because it can be problematic. You are also using an
iframe. Iframes are meant to be populated via the "src" attribute, which
only takes a URI as a value instead of a file directly. What you can do
is save the Pretty Diff output directly to a file and then add the local
path to the file to the src attribute. You could also just not use an
iframe.
Thanks,
Austin
> --
> You received this message because you are subscribed to the Google Groups
> "Pretty Diff" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pretty-diff...@googlegroups.com.
> To post to this group, send email to prett...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretty-diff/ac93d11c-1ef9-4cfb-bf95-667d9199e261%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
The problem appears to be that you are using document.write. This is very
old and archaic way of interacting with HTML. I suggest not using
document.write because it can be problematic. You are also using an
iframe. Iframes are meant to be populated via the "src" attribute, which
only takes a URI as a value instead of a file directly. What you can do
is save the Pretty Diff output directly to a file and then add the local
path to the file to the src attribute. You could also just not use an
iframe.
Thanks,
Austin
> You received this message because you are subscribed to the Google Groups
> "Pretty Diff" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pretty-diff...@googlegroups.com.
> To post to this group, send email to prett...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretty-diff/ac93d11c-1ef9-4cfb-bf95-667d9199e261%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
George Cheyne
Jul 9, 2015, 4:32:06 PM7/9/15
to prett...@googlegroups.com
I've been having the same problem.
If you go to around line 2132 in your version of prettydiff.js there should be a line that looks like this:
return [
builder.head + builder.cssCore + builder.cssColor + builder.cssExtra + builder.body + builder.bodyColor + builder.title + auto + proctime() + a[0] + a[1][0] + builder.scriptOpen + builder.scriptBody + builder.scriptEnd + "</body></html>", ""
];
remove the "+ auto"
from the middle and bit of javascript will go.
Hope it helps,
George
in...@prettydiff.com
Jul 9, 2015, 4:48:59 PM7/9/15
to prett...@googlegroups.com
James,
If you just wish to create a diff and then save the result into a stand
alone file perhaps the easiest option is to run the application from Node.
Just follow these command line instructions:
npm install -g prettydiff
prettydiff source:"myfile" diff:"otherfile" output:"wheretosave"
readmethod:"file"
If just want to use the online web tool then run your diff. In the diff
report there should be a red or pink icon "S" near the top right corner.
Click on that guy. If you are using Firefox it will create the file for
you and you will need to rename the file extension from ".part" to
".xhtml". If you are in another browser it will create the contents of
the file for you to copy/paste into any text/code editor.
Austin
> https://groups.google.com/d/msgid/pretty-diff/2a7c9b18-61eb-4261-8a5a-d5be143d8c1b%40googlegroups.com.
If you just wish to create a diff and then save the result into a stand
alone file perhaps the easiest option is to run the application from Node.
Just follow these command line instructions:
npm install -g prettydiff
prettydiff source:"myfile" diff:"otherfile" output:"wheretosave"
readmethod:"file"
If just want to use the online web tool then run your diff. In the diff
report there should be a red or pink icon "S" near the top right corner.
Click on that guy. If you are using Firefox it will create the file for
you and you will need to rename the file extension from ".part" to
".xhtml". If you are in another browser it will create the contents of
the file for you to copy/paste into any text/code editor.
Austin
Reply all
Reply to author
Forward
0 new messages