I have an interesting issue. I have a website which sends emails.
The email templates are often straight forward but for one client he wants me to convert content from his public website into email friendly html.
I want to not just solve the problem for his specific website but for other unknown websites.
So I remembered that you can run Razor as a template engine.
Long story short. It is working and working well.
My issue comes down to this. When someone edits the template with razor style for loops Ckeditor acts quite strangely.
Any idea how to keep CKEditor from screwing up?
<table style="width: 100%;" width="100%">
<tbody>
#foreach (var row in body.indexPageRow) {
foreach (var cell in row.teaser) {
<tr>
<td class="row">#Raw(cell.teaserContent.a.Html)</td>
<td class="row">#Raw(cell.teaserContent.div.InnerHtml)</td>
</tr>
}}
</tbody>
</table>
The above code when saved in ckeditor removes the razor information and becomes an empty table
<table style="width: 100%;" width="100%">
<tbody></tbody>
</table>
The only way I can think of to achieve this would be to use html comments in conjunction with razor comments.
Initially you would author the razor template like so:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<tbody>
<tr><td>X</td><td>Y</td></tr>
#*<!--*#
#for (var x = 1; x < 5; x++) {
for (var y = 1; y < 5; y++) {
#*-->*#
<tr>
<td class="row">#Html.Raw(x)</td>
<td class="row">#Html.Raw(y)</td>
</tr>
#*<!--*#
}
}
#*-->*#
</tbody>
</table>
</body>
</html>
The code above is valid and will render without error. But when you put it into the html editor it will be rearranged by the browser, so you will need to alter it just before it is displayed for editing so that the razor comments are removed and only the html comments remain.
So, once you have removed the razor comments by replacing all instances of #*<!--*# with <!-- and all instances of #*-->*# with --> you should have the following
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<tbody>
<tr><td>X</td><td>Y</td></tr>
<!--
#for (var x = 1; x < 5; x++) {
for (var y = 1; y < 5; y++) {
-->
<tr>
<td class="row">#Html.Raw(x)</td>
<td class="row">#Html.Raw(y)</td>
</tr>
<!--
}
}
-->
</tbody>
</table>
</body>
</html>
This will render in the html editor and wont get mangled by the browser as pointed out by Alfonso, an example of this on jsfiddle http://jsfiddle.net/wPGLd/3/
Once the editing is complete you will need to capture the html and reapply the razor comments by replacing all instances of <!-- with #*<!--*# and all instances of --> with #*-->*#
Intercepting the html before and after it enters the ckeditor is fairly straight forward and well documented. I found the following article that explains a little about how to get the ckeditor content on submit
How to update CKEditor content on form submit – equivalent of OnAfterLinkedFieldUpdate FCKEditor
The following question also covers this
Update editor content immediately before save in CKEditor plug-in
You can't.
The browser will rearrange those contents: http://jsfiddle.net/wPGLd/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
alert(document.body.innerHTML)
}//]]>
</script>
</head>
<body>
<table style="width: 100%;" width="100%">
<tbody>
#foreach (var row in body.indexPageRow) {
foreach (var cell in row.teaser) {
<tr>
<td class="row">#Raw(cell.teaserContent.a.Html)</td>
<td class="row">#Raw(cell.teaserContent.div.InnerHtml)</td>
</tr>
}}
</tbody>
</table>
</body>
</html>
Related
So I’ve got a program that prints a html report with some numbers from within the program.
The output number includes 6 decimals, but I want to limit it to 2 decimals..
I’ve read a bunch of articles about coding it, but lacking basic understanding of this type of coding, I need help to write the code.
The code looks like this within the program:
<HTML>
<P align="center">
<img src="image.png">
</P>
<FONT face="Tahoma" size=4 color="Blue">
<P align="center">Rapport</P>
</FONT>
<FONT face="Arial" size=2 color="Black">
<P align="center"><strong>{Date} {Time}</strong></P>
<TABLE border="1" align="center">
<TR>
<TH bgcolor="lightYellow">Vatn 1</TH>
<TH bgcolor="lightYellow">Vatn 2</TH>
<TH bgcolor="lightYellow">Salt</TH>
</TR>
<TR>
<TD bgcolor="#C6DEFF">{vatn1}</TH>
<TD bgcolor="#C6DEFF">{vatn2}</TH>
<TD bgcolor="#C6DEFF">{salt}</TH>
</TR>
</TABLE>
<button onclick="myFunction()">Prenta síðuna</button>
<script>
function myFunction() {
window.print();
}
</script>
<input type="button" align="center" value="Lukka síðu" onclick="self.close()">
</FONT>
</HTML>
And after printed, ready to open in the browser:
<HTML>
<P align="center">
<img src="image.png">
</P>
<FONT face="Tahoma" size=4 color="Blue">
<P align="center">Rapport</P>
</FONT>
<FONT face="Arial" size=2 color="Black">
<P align="center"><strong>{Date} {Time}</strong></P>
<TABLE border="1" align="center">
<TR>
<TH bgcolor="lightYellow">Vatn 1</TH>
<TH bgcolor="lightYellow">Vatn 2</TH>
<TH bgcolor="lightYellow">Salt</TH>
</TR>
<TR>
<TD bgcolor="#C6DEFF">{1.000000}</TH>
<TD bgcolor="#C6DEFF">{2.000000}</TH>
<TD bgcolor="#C6DEFF">{3.000000}</TH>
</TR>
</TABLE>
<button onclick="myFunction()">Prenta síðuna</button>
<script>
function myFunction() {
window.print();
}
</script>
<input type="button" align="center" value="Lukka síðu" onclick="self.close()">
</FONT>
</HTML>
So as far as I know I need a script to process the number, what should it look like and where in my file do I place it? Also whatever tag the edited number ends up in, how do I insert it in the table?
Thanks in advance 🤓
Are you able to give any more info on the program you are using to do this, please?
At a basic level, (depending on your program) scripts can be put on a webpage in-between <script></script> tags.
Now, by looking at the <td>{number}</td> I would assume it is a template of some kind.
If it can do it, try <td>{nuumber.toFixed(2)}</td>
As it's been mentioned, using toFixed(2) on financial data can round numbers incorrectly.
Out of the scope of these question but this article explains why. (Slightly advance but linked for anyone else wondering why!)
I would suggest a better way but without knowing what you're using and the environment that would be too much assumption.
I'm not sure how the information is bound in HTML, so you can change it after the data is loaded.
you can change this block:
<script>
function myFunction() {
window.print();
}
</script>
to this one; This is not a good method but it works as a trick:
/*Important to know (1)*/
<script src="jquery-3.5.1.min.js"></script>
<script>
function myFunction() {
window.print();
}
setTimeout(() => {
$("td").each((i, e) => {
e = $(e);
let data = e.html().replace("}", "").replace("{", "");
e.html(parseFloat(data).toFixed(2));
});
}, 1000);
</script>
(1) Download JQuery and link the HTML to it.
Also if you do not want to use JQuery you can use pure javascript like this:
<script>
function myFunction() {
window.print();
}
setTimeout(() => {
let tags = document.getElementsByTagName("td");
for (let i = 0; i < tags.length; i++) {
let html = tags[i].innerHTML;
html = html.split("{").join("").split("}").join("")
tags[i].innerHTML = parseFloat(html).toFixed(2);
}
}, 1000);
</script>
I need to create an HTML file from R software. The problem is that javascript implies simple quote and styles double quote in the string generated.
cat() function returns a quite good text removing backslashs in front of ". But I did not found how to print it like this in an html file using write.table(Text, "index.html", sep="\t")
Thanks in advance for any help.
NB : I removed a "<" character in front of /script in order to be able to post it =)
For exemple :
Text=paste0('<html>
<script type="text/javascript">',
"function lang1(event) {
var iframe = document.getElementById('id1');
var target = event.target || event.srcElement;
iframe.src = event.target.innerHTML + '.html';
}
/script>",
'<body style="overflow:hidden; margin:0">
<div id="main">
<div id="content">
<table style="border: 0; height:100%;width:100%;">
<tr style="height:5%;">
<td colspan="2" style="text-align:center;">
<h2>',paste0("some text"),'</h2>
</td>
</tr>
<tr>
<td style="width: 10%;font-size:14px;">
<ul onclick="lang1(event);">',
paste('<li>',c("link1","link2"),'</li>',collapse=""),
'</ul>
</td>
<td style="width: 90%;">
<iframe id="id1" width="99%" height="99%"></iframe>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>')
Text=gsub("\n","",Text)
I'm not sure I fully understand the question but whenever I generate html files from text in R, I use the \ character to escape quote marks that are needed in the JavaScript.
Then I open a file connection and use the writeLines function to correctly write my text to the file
Text<-"<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<style>
body {
font-size : 16px;
font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif;
}
</style>
</head>
</html>
"
fileConn<-file("mywebpage.html")
writeLines(Text, fileConn)
close(fileConn)
Maybe that will help you.
I am creating a print option on a html table.
this table has hundreds of rows. Data are fetching from php and AJAX.
After getting this data i am creating a print option like below.
function PrintElem(elem){
Popup($(elem).html());
}//
function Popup(data)
{
var mywindow = window.open('', 'my div', 'width=100%');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>/resources/css/bootstrap.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); mywindow.focus(); //newwindow.focus();
mywindow.print(); mywindow.close();
return true;
}//
<span class="trial_balance_ajax" id="print_section">
<!---- Ajax table data loads here----->
</span>
Now I am trying to print table header column in each page of printed document.
But In this case Data header only shows in first page then data overflows in others page...
I want a Default Column header in Each page
please help
What does your generated table look like? My testing indicates that if you create a table with explicit <thead> and <tbody> the header is automatically set for you:
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
<!-- Many rows... -->
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
</tbody>
</table>
In other words, the above seems to work as requested.
Edit: The requested behaviour seems to occur automatically in Firefox, but is sadly not possible to achieve without compromises in other browsers. See this related question for suggestions.
Why dont you divide rows so you can create another table having header in it.
How to set values for the below div block (setting values in '?' placeholder).
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
? </div>
</td> </tr>
</table>
I have tried with following scenario, but not working
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Your script is working perfectly, it's just that you need to be sure that you are placing the script after the HTML is rendered, so first you need to print the tables out and than use the script tag, because if you place the script before the id="txt3" has rendered, it won't change anything as onload the script didn't find any, so this should be the order...
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
?
</div>
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Side Note : If you are using HTML5, you don't need
type="text/javascript" anymore, as now, default is JavaScript
$(document).ready(function(){
$('#txt3').html("New Text");
});
Be sure your page is loaded before you manipulate it:
<script type="text/javascript">
window.onload = function() {
document.getElementById('txt3').innerHTML = "TEST";
}
</script>
I have a HTML widget in my ui.xml which I am using in Uibinder to populate data as given below:
ui.xml ->
<g:HTML ui:field="operationsDetailTableTemplate" visible="false">
<table class="{style.LAYOUT_STYLE}" width="100%" border="1">
<tr>
<td><img src="images/indent-blue.gif"/></td>
<td>
<table class="{style.DEFAULT_STYLE}">
<thead>
<tr>
<th>OperationUuid</th>
....
</tr>
</thead>
<tbody>
<tr>
<td>%s</td>
...
</tr>
</tbody>
</table>
</td>
</tr>
....
</g:html>
Uibinder.java--->
String htmlText = operationsDetailTableTemplate.getHTML()
.replaceFirst("%s", toSafeString(operation.getOperationUuid()))
....
HTML html = new HTML(htmlText);
operationsDetail.add(html);
The above is done in a for loop for each of the operation retrieved from the database.
My question is how I can embed a hyperlink or an anchor tag on one of the cell (eg. operation id ) for each of the operation set retrieved. I also wish to have a listener attached to it.
P.S. - It does not allow me to have a anchor tag in HTML in ui.xml.
You'd better use the tools in the way they've been designed to be used: use ui:field="foo" on the <td> and #UiField Element foo + foo.setInnerHTML(toSafeString(...)) instead of extracting the HTML, modifying it and reinjecting it elsewhere. You could also use a <g:Anchor> and attach an #UiHandler to handle ClickEvents.
Your way of using UiBinder makes me think of SafeHtmlTemplates, or the new UiRenderer aka UiBinder for Cells: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Rendering_HTML_for_Cells