Sendgrid: render an ejs template and then send as an email. - javascript

So I have index.ejs which renders perfectly when I start my nodejs server:
<!DOCTYPE html>
<html>
<head>
<title<%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<h3><%= yesterday %></h3>
<h1> Number of Spins: <%= count %></h1>
<h1> Active User Count: <%= userCount %></h1>
<h1> Users that did not validate: </h1>
<ul>
<% for(var i=0; i<unvalid.length; i++) {%>
<li><%= unvalid[i] %></li>
<% } %>
</ul>
</body>
</html>
The thing is, I would like to send this on an email using Sendgrid. So far what i've been doing is using the .setHTML method to sort of "brute-force" it:
email.setHtml('<h1> Spotluck Daily Report </h1><h3>'+ yesterday + '</h3><h1> Number of Spins: '+cuenta+'</h1><h1> Active User Count: '+userCount+'</h1>' +'<h1> Users that did not validate: </h1>');
But this would never work because it would be unable to render the ejs for loop. So my question is: How do I tell the Sendgrid email to render my ejs and send it as an email without having to resort to .setHTML?

You can achieve this using the ejs.render(str, subs) function inside of setHtml.
email.setHtml(ejs.render(yourTemplate, {foo: 'bar'}));
But I'd recommend using SendGrid's Template Engine since our node library supports it.

Related

How to fix error with parts of the data passed through to partial being added as attributes

I'm pretty new to web design and I'm trying to set up my partial for my portfolio website. I want to be able to pass data through the ejs file to the partial in order to set the title and the description.
Using some information I already found on passing data, I created two variables, title and description and then pass them to the partials/header.ejs.
At the top of home.ejs:
<% var title = "The title for the Home Page" %>
<% var description = "The description for the home page" %>
<%- include partials/header.ejs {title: title, description: description} %>
Header.ejs
...
<head>
<!-- Page Title -->
<% if (title !== null) { %>
<title><%= title %></title>
<% } else { %>
<title>Default Title</title>
<% } %>
<!-- Page Description -->
<% if (description !== null) { %>
<meta name="description" content= <%= description %>>
<% } %>
...
I expect that the title should be set to the variable title ("The title for the Home Page") and that the description content attribute should be set to the variable description ("The description for the home page").
The title works correctly, but the description outputs:
<meta name="description" content="The" description for the home page>
with description, for, the, home, page all as attributes.
Is there something I'm just not seeing or am I using the <%= %> incorrectly?
Bonus question: Is what I'm doing reasonable/expected/standard, or is there a better way of accomplishing this task in typical sites?
The right way is to put description in double quotes
<meta name="description" content=" <%= description %>">

Using 'javascript:' inside html tag

I am developing a web server with node.js. But I got a problem just now.
Below code is my HTML code.
<%
var tagID = 'something';
%>
...
I know that if I use 'javascript:' inside a HTML tag. then it can execute javascript code. but it did not work when I checked it on my browser.
Or should I use DOM to do this?
You can use javascript: in a href. Like so
Hi
There are 3 ways to do what you are asking:
Using a single page application like angular, reacts ...
Use your own custom design pattern that will replace whatever you want to replace
var global = this;
global.id1 = 10;
global.id2 = 30;
document.querySelectorAll("*").forEach(function(dom) {
[...dom.attributes].forEach(function(attr) {
if (attr.value.startsWith("javascript:")) {
dom.setAttribute(attr.name, global[attr.value.replace("javascript:", "")]);
}
});
});
<div id="javascript:id1">Div 1</div>
<div id="javascript:id2">Div 2</div>
Do the update manually
document.getElementById("1").id = "10";
document.getElementById("2").id = "20";
<div id="1">Div 1</div>
<div id="2">Div 2</div>
If you are creating a big app then I would reccomand using a single page application (though it might take some time getting to know how it works if you are familiar with it).
If you are feeling adventurous or don't want to bother learning or using an SPA you could create your own framework/design pattern.
If the example you have shown is not a common occurence (and you don't expect it to be more common in the future), easiest solution would be to just manually update the dom.
You can use https://www.npmjs.com/package/ejs
// server.js
// load the things we need
var express = require('express');
var app = express();
// set the view engine to ejs
app.set('view engine', 'ejs');
// use res.render to load up an ejs view file
// index page
app.get('/', function(req, res) {
res.render('pages/index');
});
// about page
app.get('/about', function(req, res) {
res.render('pages/about');
});
app.listen(8080);
console.log('8080 is the magic port');
you can embed javascript like this
<ul>
<% drinks.forEach(function(drink) { %>
<li><%= drink.name %> - <%= drink.drunkness %></li>
<% }); %>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>

Wicked PDF and Javascript loading

I have tried a number of methods to load jQuery and Google Maps API in to my Wicked PDF generator. I am trying to load an image of an address in the PDF. I seem to have an issue with the javascript tag not working.
pdf.erb file:
<html>
<head>
<%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" %>
<%= javascript_include_tag "application" %>
<script src="https://maps.googleapis.com/maps/api/js?key=######"></script>
<%= csrf_meta_tags %>
</head>
<body>
controller file:
respond_to do |format|
format.html
format.pdf do
render :pdf => "location",
:template => "pdf_generation/location_show.pdf.erb",
:javascript_delay => 5000,
:show_as_html => params.key?('debug')
end
end
show.html.erb file:
<div class='row'>
<div class='col-lg-12'>
<div class='ibox float-e-margins'>
<div class='ibox-title'>
<%= link_to 'Edit', edit_location_path(#location), class: 'btn btn-default' %>
</div>
<div class='ibox-content'>
<iframe src="<%= location_path(#location) %>.pdf" style="width:100%; height:700px;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
I have tried debugging with no success. I may not understand the debugging method for this.
Now I have also tried loading jQuery min file from the CDN and also tried wicked pdf javascript include tag. When I try either of these approaches I get the following error:
Failed to execute: ["/usr/local/rvm/gems/ruby-2.2.1/bin/wkhtmltopdf", "-q", "--javascript-delay", "5000", "file:////tmp/wicked_pdf20171005-21437-hwy6l4.html", "/tmp/wicked_pdf_generated_file20171005-21437-gop4gw.pdf"] Error: PDF could not be generated! Command Error: Fontconfig warning: ignoring C.UTF-8: not a valid language tag Error: Failed loading page file:////tmp/wicked_pdf20171005-21437-hwy6l4.html (sometimes it will work just to ignore this error with --load-error-handling ignore) Exit with code 1, due to unknown error.
I could really use some guidance. I have not been able to get any javascript files to load. CSS files have been a little difficult to, for instance if I try to load a local scss file it typically just won't load, it seems to just ignore it.
(ie stylesheet link tag 'application' )
EDIT
I found the offending code. the FontConfig warning had nothing to do with the loading of any resource. It related to this code that I had been using to pass ruby variables to javascript:
var location = jQuery.parseJSON( '{"main": "<%= #location.main %>", "lat": <%= #location.lat %>, "lng": <%= #location.lng %> }');
I have modified the google map to show in the PDF now, however what I did isn't DRY, and it makes me think there is another way to pass the ruby variable to my javascript code. Any thoughts or pointers?

Using Rails, how do I execute a javascript file on a specific page in the application?

I am attempting to load a javascript file onto my rails application, but only for a specific page in my application, not the homepage. How would I get my javascript file to load for a specific page is using rails.
The javascript I have now, located in programs.js in assets/javascript, looks like this:
document.addEventListener('DOMContentLoaded', (event) => {
let program = document.getElementsByClassName('program-name')
console.log(program)
})
Again, the code itself works fine. The problem is that it executes for the homepage, and not for any particular page that I want it to. How would I go about getting the code to execute for a specific page within my rails application?
Why wouldn't you add the javascript tag to the View you want it to run on?
If you wanted a bit better rendering speed, you could add a end-of-page yield to your layout and then specify your javascript in the View like this:
layout/application.html.erb
<!DOCTYPE html>
...
<%= yield(:scripts) %>
</body>
</html>
view/.../index.html.erb
<!-- regular view code here -->
...
<% content_for :scripts %>
<%= javascript_tag do %>
document.addEventListener('DOMContentLoaded', (event) => {
let program = document.getElementsByClassName('program-name')
console.log(program)
});
<% end %>
<% end %>
An other way is to do the following:
app/views/layouts/application.html.erb
<body class="<%= controller_name %> <%= action_name %>">
<!-- This will add your page's controller and action as classes, for example, "blog show" -->
Then, in your script file, you can do the following:
if($('body').is('.yourcontroller.youraction'){
// Do something
}

How to properly embed script tags from 3rd party vendor into into rails view

I am using a really handy service called typecast. One of the perks is that there are licensing agreements with different font providers, myfonts, fonts.com, etc.
To access the fonts you've designed with, typecast gives you an embed link like so:
<script type="text/javascript" src="http://typecast.com/project_css/DBmVWZKx7n/164947d5a8ce64.js"></script>
I'm developing this in a rails app (Rails 4) and to quickly see the results, I am putting the above script at the bottom of my application layout file.
<!DOCTYPE html>
<html lang="en">
<%= yield :head %>
<body class="page">
<div class="ca-root"> <!-- root element required for sticky footer -->
<%= yield :header %>
<%= yield :hero %>
<%= yield :main_content %>
<div class="ca-root-footer"></div> <!-- Need this elementfor the sticky footer -->
</div> <!-- End root for sticky footer -->
<%= yield :footer %>
</body>
</html>
<script type="text/javascript"
src="http://typecast.com/project_css/DBmVWZKx7n/164947d5a8ce64.js"></script>
This gives me a strange 502 bad gateway error. Is it something I'm doing wrong with rails?
Have you tried adding the next line inside the body tag?
<%= javascript_include_tag 'http://typecast.com/project_css/DBmVWZKx7n/164947d5a8ce64.js' %>
Just after <%= yield :footer %>.

Categories

Resources