I'm writing an application that uses a given email template to generate multiple messages.
The e-mail parser works fine. I'm using RazorEngine to create the e-mail template.
The problem is that I need to generate a table using the following construct (a simple foreach):
<table>
<tbody>
<tr><th>Pedido</th><th>NF</th><th>Boleto</th><th>Vencimento</th><th>Valor</th></tr>
#foreach (dynamic item in Model.PagamentosEmAtraso) {
<tr>
<td valign="top" width="76">
<p align="center"><span style="font-size: small;">#item.NumeroPedido</span></p>
</td>
<td valign="top" width="60">
<p align="center"><span style="font-size: small;">#item.NumeroNotaFiscal</span></p>
</td>
<td valign="top" width="88">
<p align="center"><span style="font-size: small;">#item.NumeroBoleto</span></p>
</td>
<td valign="top" width="128">
<p align="center"><span style="font-size: small;">#item.DataVencimento.ToString("dd/MM/yyyy")</span></p>
</td>
<td valign="top" width="119">
<p align="center"><span style="font-size: small;">#item.ValorLiquido.ToString("C2") </span></p>
</td>
</tr>
}
</tbody>
</table>
When I exit the html editor, tinymce messes up my code, "fixing" my code using like this:
#foreach (dynamic item in Model.PagamentosEmAtraso) {}
<table>
This is issue is happening on newer versions of tinymce - it used to accept this kind of markup.
Is there any viable solution to let tinymce accept a possibly broken html without trying to fix it?
My tinymce configuration is:
function initializeTinyMce() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/Scripts/tinymce/tiny_mce.js',
// General options
theme: "advanced",
plugins: " pa geb reak,legacyoutput,style,layer,table,save,advimage,advlink,emotions,iespell,inlinepopups,preview,media,searchreplace,print,c o nt extmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
width: "960",
height: "500",
entity_encoding: "raw",
// Theme options
theme_advanced_buttons1: " bo ld, italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontse l ec t,fontsizeselect",
theme_advanced_buttons2: " cu t,c opy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,help,code,|,insert d at e,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,||,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
//content_css: "/Content/site.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
}
Since 3.4 it is not possible anymore to turn off the tinymce validator using a config setting.
The html needs to be valid, but you may define what gets accepted as valid by the tinymce validator and what not. Have a closer look at the tinymce config params valid_elments and valid_children.
Related
So I am having trouble getting the variable values to be shown in an email template. The 3rd party email templating provider is Postmark and it uses Mustache. My template is set up like this (I have ommitted some of the irrelevant html to keep things shorter):
{{#discount_group.delivery_fee}}
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{delivery_fee}}</p>
</td>
</tr>
{{/discount_group.delivery_fee}}
{{#discount_group.discount}}
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{discount}}</p>
</td>
</tr>
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total_bold">{{grandtotal}}</p>
</td>
</tr>
{{/discount_group.discount}}
And my json payload looks like this:
"discount_group": {
"delivery_fee":"delivery_fee_Value",
"discount": "discount_Value",
"grandtotal": "grandtotal_Value"
}
But when I send out the email, the sections render properly but the variable values are blank (red box):
If I remove "delivery_fee" from the json payload, the section is not rendered as expected but the values are sill missing:
I have also tried {{discount_group.delivery_fee}} and {discount_group.discount}} etc but that still had the missing values.
What am I doing wrong?
Thanks in advance
So I figured it out. I'm not sure why it has to be this way but it does. My problem was in the payload. The payload should be formatted like this:
"discount_group": {
"delivery_fee":{
"delivery_fee":"delivery_fee_Value"
},
"discount": {
"discount":"discount_Value",
"grandtotal": "grandtotal_Value"
}
}
When you wrap a block of code in mustache, what you're doing is stepping into that object in your data in an effort to make your code more readable. Postmarks documentation calls it 'Scoping'. You can read up on here!
Therefore, by starting blocks with, for example, {{#discount_group.delivery_fee}}, you are already at delivery_fee and calling it again will return nothing since it doesn't exist.
With how your data was originally structured, you had everything you needed nested in discount_group, so you didn't need to nest further in your brackets. I know you have found a resolve, but in the future, instead of changing your data to match your code, you could consider instead update your code to be as follows:
{{#discount_group}}
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{delivery_fee}}</p>
</td>
</tr>
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{discount}}</p>
</td>
</tr>
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total_bold">{{grandtotal}}</p>
</td>
</tr>
{{/discount_group}}
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 have a list of tables with various elements on a page. I want to have the display order of the various tables change randomly each time a page is loaded. Any ideas on how to do this? For reference, the code below shows the first two tables. Say I wanted to randomly change their display order - how would I do that?
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/CleanFund_LOGO.jpg" alt="Clean Fund LLC" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Clean Fund LLC</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $500K - $15M
<strong>Types of Projects:</strong> Any
<strong>Contact:</strong> Josh Kagan
www.cleanfund.com
</span>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/Greenworks-Lending-Logo.jpg" alt="Greenworks Lending" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Greenworks Lending</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $30K - $5M
<strong>Types of Projects:</strong> Any Eligible Technologies and Properties
<strong>Contact:</strong> azech#greenworkslending.com
www.greenworkslending.com
</span>
</td>
</tr>
</table>
Are you able to use javascript on that page? My suggestion would be to write a javascript function that selects the table elements and then appends them back to their parent element in a random order.
This shows how to do with jQuery. You would need to use some JavaScript to accomplish this and jQuery is one option. You need a language like JavaScript to do this type of dynamic content.
https://css-tricks.com/snippets/jquery/shuffle-dom-elements/
Here is the code on the page in case it gets deleted, this was take from that page:
$.fn.shuffle :
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
And the usage is as follows:
// Shuffle all list items within a list:
$('ul#list li').shuffle();
// Shuffle all DIVs within the document:
$('div').shuffle();
// Shuffle all <a>s and <em>s:
$('a,em').shuffle();
In your case, you would:
Include jQuery js file in your webpage
Save the code for $.fn.shuffle and save in a js file, and in include that in your webpage
Include the javescript to call the shuffle: $('table').shuffle();
I am working on the rails 3 application where i need to pass the html code in to the string variable and pass it to the web services as parameter.
I have the following code with the loop inside but since it is declare in to the string it is not working with the <%%> and #{} tag
#emaildata = "<H3>FLOOR VIEW ACTION REQUEST</H3>
<table border='0' cellspacing='4'>
<tr>
<td>Submitted On:</td>
<td align='left'><strong>#{Date.today}</strong></td>
</tr>
<tr>
<td> Originator: </td>
<td align='left'><strong>#{session[:user_name]}</strong></td>
</tr>
</table>
<table border=0 width=100%>
<tr bgcolor='##006699'>
<td align='center'><font color='##FFFFFF'><strong>ACTION CODE</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>PART<BR />NUMBER</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>LOCATION</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>BIN QTY</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>PACK QTY</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>UM</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>SCAN CODE</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>REASON / COMMENTS</strong></font></td>
</tr>
<% (1..PartNoListInEmail.length).each_index do |i|%>
<tr bgcolor='##E0E5E5'>
<td align='center'>#{#ActionCodeListInEmail[i]}</td>
<td align='center'>#{#PartNoListInEmail[i]}</td>
<td align='center'>#{#SendToListInEmail[i]}</td>
<td align='center'>#{#OrderQtyListInEmail[i]}</td>
<td align='center'>#{#PackQtyListInEmail[i]}</td>
<td align='center'>#{#UMListInEmail[i]}</td>
<td align='center'>#{#ScancodeListInEmail[i]}</td>
<td align='center'>#{#reasonForActionIn[i]}</td>
</tr>
<%end%>
</table>"
Please help me .
Save your html as partial as a html.erb
#emaildata = "<%= escape_javascript(render :partial=>'some_partial_name', :locals => {:PartNoListInEmail => #PartNoListInEmail}).html_safe %>"
For combining strings with HTML, you want to use a template system like Erb or Haml. If you don't intend to immediately render the template back to a browser, you can still use Erb to do this by calling Erb directly, having it parse the HTML string and variables and return the result as a string.
Once you go down this road, be extra careful of user provided content and escape anything untrustworthy. When you render erb templates normally in rails, rails does a fair amount of work for you to avoid these sorts of problems, but once you do something like what your example showed, or if you use Erb directly to parse it, you no longer benefit from Rails' safety checks, and therefore will need to put in your own checks.
I want to create a form (will be filled by users) and store the data in excel stylesheet without using php just HTML ,is that possible?
I dont want to store data an a database.
I have tried to use google doc but it's not that good because the validation messages are generated depending on the browser language.
The unqualified response of "You can't write a file from HTML" is inaccurate. While you may need to add some "hidden" fields in your HTML (in order to simplify the exporting of only the data requested and not the questions or other text) it is ABSOLUTELY possible to do this. I've done JUST THAT in the code below - and all I use is JavaScript. No Server required, No Database required, No PHP required.
Below is the code and a link to the JSFiddle page where you can see it in action:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fillHidTable(){
var htqf; //-- hidden field
var rf; //-- retrieved field
for ( var i = 1; i < 5; i++ ) {
rf = "htqf"+i;
document.getElementById(rf).innerHTML = document.getElementById("Q"+i+"CALC").value;
}
tableToExcel('hidTable', 'Analysis Results');
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
<title>HTML Form Data to Excel</title>
<style type="text/css" media="screen">
.divCenMid{font-family:Arial,sans-serif;font-size:14pt;font-style:normal;font-weight:700;text-align:center;vertical-align:middle;margin:0;}
.allbdrCenMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:middle;margin:0;}
.allbdrCenTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:top;margin:0;}
.allbdrLtMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:middle;margin:0;}
.allbdrLtTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:top;margin:0;}
</style>
</head>
<body>
<table width= "565px" cellspacing="0" cellpadding="0" style="border-spacing:0;" id="QMSTable">
<col width="25px"/>
<col width="120px"/>
<col width="360px"/>
<col width="60px"/>
<tr>
<td class="divCenMid" colspan = "4"> QMS Assessment</td>
</tr>
<tr>
<td class="allbdrCenMid"> No</td>
<td class="allbdrCenMid"> Criteria</td>
<td class="allbdrLtMid"> Question</td>
<td class="allbdrCenMid"> Score</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q1</td>
<td class="allbdrLtTop"> Quality Unit Independency</td>
<td class="allbdrLtTop"> Do you have the Quality Unit?</td>
<td class="allbdrCenMid">
<input id="Q1CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q1CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q2</td>
<td class="allbdrLtTop"> Apply PICS GMP</td>
<td class="allbdrLtTop"> Which GMP regulation do you use?</td>
<td class="allbdrCenMid">
<input id="Q2CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q2CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q3</td>
<td class="allbdrLtTop"> Deviation or Non-conformance</td>
<td class="allbdrLtTop"> Do you have a deviation or non-conformance procedure?</td>
<td class="allbdrCenMid">
<input id="Q3CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q3CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q4</td>
<td class="allbdrLtTop"> Complaint</td>
<td class="allbdrLtTop"> Do you have a customer complaint procedure?</td>
<td class="allbdrCenMid">
<input id="Q4CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q4CALC"/>
</td>
</tr>
</table>
<div id="hidTable" style="display: none">
<table id="testTable">
<caption>Supplier Risk Analysis</caption>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>No.</th>
<th>Question</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1</td>
<td>Do you have the Quality Unit?</td>
<td id="htqf1">-</td>
</tr>
<tr>
<td>Q2</td>
<td>Apply PICS GMP?</td>
<td id="htqf2">-</td>
</tr>
<tr>
<td>Q3</td>
<td>Do you have a deviation or non-conformance procedure?</td>
<td id="htqf3">-</td>
</tr>
<tr>
<td>Q4</td>
<td>Do you have a customer complaint procedure?</td>
<td id="htqf4">-</td>
</tr>
</tbody>
</table>
</div>
<input type="button" onclick="fillHidTable()" value="Export Data to Excel">
</body>
</html>
Here is the JSFiddle link: https://jsfiddle.net/MitchinThailand/LV9vr/
if you want more details feel free to holler.
No, HTML pages cannot write files. You need a server to do this.
The best you can do is generate CSV data in a textarea that the user could then copy and paste to a local file, then load that into Excel.
As it is not possible to save html form data to a file using javascript because of some security reason so for my solution i just use the TCPDF for this.
You can generate a data: URL with the download attribute:
<a download="test.csv" href="data:text/csv,foo,bar,baz">
You'll need to use JavaScript to build such URL from form data and insert/update appropriate link in the document.
To do what you want to do simply it will not be possible without php or some advanced HTML5 local storage.
I've done this by using simple PHP script to have form data get saved to a .txt file and then open the resulting .txt file in Excel and use the text to columns feature.
I have a HTML form which collects a field where people enter their email address. I want the form to post the email address to a text file. Please help! Will award maximum points to the one who will answer me correctly!
2 years ago Report Abuse
Additional Details
Please paste entire code to do this!
2 years ago
Form:
<form method="post" action="nameofyourscripthere.php">
Name: <input type="text" name="name" id="name" />
Email: <input type="text" name="email" id="email" />
<input type="submit" name="submit" value="Send Form" />
</form>
PHP:
Create a new page saved as .php with this code. All you need is the form and the PHP script on the server for this to work :)
<?php
// Get the name they entered in the form
// We'll be naming the file this
$file = $_POST['name'];
// Get the email from the form
$email = $_POST['email'];
// We want the file to be a text file right?
$ex = ".txt";
// Try to open a file named $file$ex (johndoe.txt for example)
// Because this file doesn't exist yet the server creates it
$write = fopen("$file$ex","w");
// Now open the file up again but this time save the email in it
fwrite($write,$email);
// MAKE SURE you close the file!!!
fclose($write);
// The folder that this script is in on the server is where the file we just made was saved
// We can 'rename' it to another folder
// The folder on the server we want to move it to
$data = "../emails/";
// Now put it all together: This example goes out of the folder we're in and into the folder 'emails'
// The new 'name' would be this now (../emails/johndoe.txt): So now the file is moved to where we want for storage
rename ("$file","$data$file$ex");
// The script is done, send the user to another page (Just read the address below and you'll get it)
// Its just an example fyi change to what you want
header('Location: http://YourWebsiteNameHere.com/contactFo…
exit;
?>