Setting a href inside of template literals - javascript

I'm trying to make use of a nice email template for when a user signs up with their email, I'm using express & node mailer to accomplish this. Previously my code looked like:
"Hello, " +
user.username +
",\n\n" +
"Please complete your registration by clicking the link:
\nhttp://" + req.headers.host + "/confirmation/" + user.username + "/" + token.token +
"\n\nThank you!\n"
Inside of my HTML template, which is a template literal ive tried this:
const output = ` <a href="${req.headers.host} + "/confirmation/" + ${user.username} + "/" + ${token.token}" `
but this doesn't work, theres no href on the <a> inside of the email.
I must be missing something really basic... thanks for looking =)

With `` you don't need to concatenate the string with +, so it should look like this:
const output = ``

Related

Adding <a> element to an existing Javascript variable for use in .html statement

I'm trying to add an <a> element around a string that currently exists as a Javascript variable.
The resulting element should display as: 'copyright symbol' + 'companyName' + 'this year's date'. BUT with ONLY the variable 'companyName' acting as an html link
Existing JS
const companyName = "ANY BUSINESS NAME";
function setCopyrightText() {
$("#ifcCopyright").html("© " + companyName + " " + new Date().getFullYear());
}
Existing HTML
<span class="textHeavy fontWhite" id="ifcCopyright"></span>
I've tried several approaches and I'm beginning to realise there must be a simpler solution but I'm missing it _ I've been through several answers on Stack but unsuccessful in finding what I need
Thanks in advance for any suggestions
.html() takes A string of HTML to set as the content of each matched element. Did you try this :
const companyName = "ANY BUSINESS NAME";
function setCopyrightText() {
$("#ifcCopyright").html("© <a href='https://www.google.com' target='_blank'>" + companyName + "</a>" + new Date().getFullYear());
}
setCopyrightText();
Codepen
Please put link to your company site where the # is currently placed.
const companyName = "Peuconomia Int'l Pvt. Ltd.";
function setCopyrightText() {
$("#ifcCopyright").html("© " + companyName + " " + new Date().getFullYear().toString());
}
setCopyrightText();

How to render html tag inside Template literals (LitElement)?

I want Template literals with foo-nr1, foo-nr2 ... and use them as HTML Tag.
render(
html `<foo-nrX></foo-nrX>`,
document.querySelector('#bigfoo')
);
Because X is a placeholder, I tried everything like this:
html `<${fooplaceholder}></${fooplaceholder}>`,
or this from similar q/a here:
const getHTML = message => unescape(message).replace('\\', '');
const setHTML = escape('<' + foo-nrX + '></' + foo-nrX + '>');
html `${getHTML(setHTML)}`,
However, best results are:
"<foo-nrX></foo-nrX>"
instead of:
<foo-nrX></foo-nrX>
So he doesnt parse it as HTML Tag, instead it shows up as String into the website.
I found the solution by myself:
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
const foo = '<' + fooNrX + '></' + fooNrX + '>';
render(
html `${unsafeHTML(foo)}`,
document.querySelector('#bigfoo')
);

encodeURIComponent not working with Twitter button

I'm currently trying to make an app that tweets out the quote that's currently in the text bubble. However, when I use this line of code,
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text" + encodeURIComponent(quote.quote + ' - ' + quote.author);>Tweet</a>
It doesn't take me anywhere. Is there any way I could get this working or would I need to use an external Twitter button?
Thanks!
CodePen Link: http://codepen.io/Jelani/full/rOmrOJ/
You can't embed javascript in your markup like that. One approach you could take would be to add some code to your randomQuote function like this:
var randomQuote = function() {
... // current code
var text = quote.quote + ' - ' + quote.author;
$('.twitter-share-button').attr('href', "https://twitter.com/intent/tweet?text="+encodeURIComponent(text));
}
Another approach would be to move your quote variable declaration out of the randomQuote function and set an onclick on the twitter-share-button
<a class="twitter-share-button" onclick="goTweet()">Tweet</a>
that calls a function that does something like:
function goTweet() {
var text = quote.quote + ' - ' + quote.author;
window.location.href = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text);
}

jQuery append trouble with url parameter

I've been working for hours trying to get the single and double quotes nested correctly in order for this search result display to work, with having a dynamically appended "uniqueId" in part of the URL string on output.
Basically, the part of the JS code that is giving me trouble is this:
$('#results-list').append("<li rel='" + this.uniqueId + "'>" + this.dateTimeStamp + " — " + this.message + " — " + "<a class='iframeSmaller' href='commentDetails.php?uniqueId='" + this.uniqueId + "''>XXX</a>" + "</li>");
I want to have the "this.uniqueId" after the equal sign so that it generates a dynamic URL, which I then am going to link to a "details" page for that unique ID.
Can anyone please help me with the "this.uniqueId" syntax to get this correctly inserted into the URL for output?
Sorry if I am being unclear, I am learning all of this by the day :)
thanks!
ps... this does work, but it has a hardcoded uniqueID... what I want is a dynamic one based on the row, which is working as far as the "rel" part goes, just not the anchor part...
$('#results-list').append("<li rel='" + this.uniqueId + "'>" + this.dateTimeStamp + " — " + this.message + " — " + "<a class='iframeSmaller' href='commentDetails.php?uniqueId=32'>XXX</a>" + "</li>");
thanks again for any help with this syntax (or if there's a better way to go about what I'm trying to do)...
The quoting in your HTML for the anchor isn't quite right. You have this:
+ "<a class='iframeSmaller' href='commentDetails.php?uniqueId='" + this.uniqueId + "''>XXX</a>" +
I think it should be this (fix quoting on the link URL):
+ "<a class='iframeSmaller' href='commentDetails.php?uniqueId=" + this.uniqueId + "'>XXX</a>" +
You could see what's going on better if you build the string into a variable and then do a console.log() on the string of HTML you've built or look at its contents in the debugger.
Replace this part of your code:
... uniqueId='" + this.uniqueId + "''>XXX</a>" + "</li>");
for this one:
... uniqueId=" + this.uniqueId + "'>XXX</a>" + "</li>");

Blinking page title

I'm trying to get some notifications working for AJAXChat. To do this all I want to do is get the title of the page to blink until focused. To do this I'm using the jquery-titlealert plugin. The problem is the html that is generated for the onload event is generated inside a js file shown here
return '<div id="'
+ this.getMessageDocumentID(messageID)
+ '" class="'
+ rowClass
+ '">'
+ this.getDeletionLink(messageID, userID, userRole, channelID)
+ dateTime
+ '<span class="'
+ userClass
+ '"'
+ this.getChatListUserNameTitle(userID, userName, userRole, ip)
+ ' dir="'
+ this.baseDirection
+ '" onload="$.titleAlert('New Message');">'
+ userName
+ '</span>'
+ colon
+ this.replaceText(messageText)
+ '</div>';
return
When I use this, it breaks the page. If I replace ('New Message') with (New Message) the page loads again but the notification isn't working. I think this is because its displaying a Javascript function inside Javascript. Anyone see anything here I'm missing?
Have you tried escaping your quotes? I.e.:
+ '" onload="$.titleAlert(\'New Message\');">'
Any single quote (') inside a single quoted string (or double quote (") inside a double quoted string) needs a backslash (\) before it. See the MDN String Literals documentation for more information about strings and proper character escaping.
You need to escape the quotes.
Change this
'" onload="$.titleAlert('New Message');">'
to this
'" onload="$.titleAlert(\'New Message\');">'
Try escaping the apostraphe's correctly:
+ '" onload="$.titleAlert(\'New Message\');">'

Categories

Resources