I am trying to make a link to a random file using ejs template engine. I have a javascript string variable named randomProject which is in a file called "case". However, I don't know how to concatenate these 2 strings together.
I have tried to use "plus" sign as in <a href=<% "/case/" + randomProject%>> but it did not work.
index.ejs (before I wanted to make a random link)
<a href='/case/portfolio-website'>
<h2>Portfolio Website</h2>
</a>
index.ejs (after I wanted to make a random link, which does not work now)
<a href=<% "/case/" + randomProject%>>
<h2><%= randomProject %></h2>
</a>
main.js
const projects = ['gochiso','junction','portfolio-website','tedx-flyer','tedx-website','thirty-logo-challenge']
const randomNum = Math.floor(Math.random() * projects.length);
const randomProject = projects[randomNum]
directory
case
gochiso.ejs
portfolio-website.ejs
thirty-logo-challenge.ejs
junction.ejs
tedx-website.ejs
A couple of ways you could concatenate:
Using template literal
<a href="<%= `/case/${randomProject}` %>">
Regular ejs to output escaped html
<a href="/case/<%= randomProject %>">
Related
first I'd like to thank you for your time trying to help. I am a designer and I suck at developing stuff, so I have no other option than to scream for help.
So this is the situation:
I was asked to add an image (country flag) that's gonna be dynamic, in an element that fetches info from a JSON file with, among others, Resorts (one of the elements being its country's long name, i.e. Australia) and Countries (by long name and shortcode, i.e. Australia, au).
I need to get the country shortcode printed in the img src, but the resort array is only containing its long name.
The code:
This is the way the JSON file presents the information:
{
"Countries":[
{"name":"Australia",
"code":"au",
"continent_code":"oc",
"slug":"australia"}],
"Continents":[
{"name":"Oceania",
"code":"oc",
"slug":"oceania"}],
"Resorts":[{
"id":"1",
"resort_name":"Resort Name",
"encoded_name":"resort-name",
...
"country":"Australia",
...}]
}
And this is my file bit:
const DesktopResort = ({resort}) => (
<Link href="/resort/[resort]" as={`/resort/${resort.encoded_name}`}>
<a target='_blank' className='resort-item'>
<div className="resort">
<div className="top">
<div className="title">{resort.resort_name}</div>
<img className="logo" src="/assets/img/resort-logo-sample.png" />
<span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
// Down below is the "dynamic" file call
<img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
</div>
<div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
</div>
</a>
</Link>
)
I know its badly done right now, for this australian resort my image src is /assets/img/flags/Australia.svg and what I would need to print is of course /assets/img/flags/au.svg
How would you do it?
Thanks again!
I'd write a little helper function to look up a country code based on the country name.
Note: you'll need to handle what should happen if the country is not found, or the code is not there. I'm just defaulting to an empty string here.
const countryCode = name => {
const country = yourData.Countries.find(country => country.name === name);
return country && country.code || '';
};
Then use this when you're passing the src to your img.
<img
className="flag-icon"
src={`/assets/img/flags/${countryCode(resort.country)}.svg`}
/>
Apologies if this is answered elsewhere, please point me in that direction.
Using Node and EJS, I have a form field for capturing the name of a brewery, this comes via an API...
<label>Brewery</label><br>
<input id="formBreweryName" class="form-control" type="text" name="breweryname" ><br>
<label>Beer Name</label><br>
<input id="formBeerName" class="form-control" type="text" name="beername" >
Here's the ejs that both displays the brewery name in a <ul> and contains the onclick handler for populating the form...
<ul>
<% BeerList.forEach(function(objsofbeer){ %>
<li>
<a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
<span><%= objsofbeer.brewery.brewery_name %></span><br>
<span><%= objsofbeer.beer.beer_name %></span><br>
</a>
</li>
</ul>
And the javascript for porting the brewery name up to the form...
var addFormText = function( breweryName, beerName) {
document.getElementById('formBreweryName').value = breweryName;
document.getElementById('formBeerName').value = beerName;
}
the API passes me a brewery name like so...
brewery_name: 'Reuben\'s Brews',
I added the beer name in the code above for good measure.
The Issue
When there is an apostrophe in the brewery name, the brewery name will not show in the appropriate form field, BUT the brewery name does show in the section.
For most examples, the brewery name does not have an apostrophe. So the API brewery name shows up in the form field as expected. But as in the example above, the brewery name has an apostrophe, so the name will not show up in my form field.
I am hoping there is a non-javascript, pattern attribute solution that will let me optionally include apostrophes (or other unforeseen special characters) in the text. If not, then I'm open to javascript or other suggestions.
I see many examples of 'use pattern to exclude certain characters' or 'use pattern to force users to only use this given text pattern'. But I don't see anything that would allow for the optional inclusion of a character like an apostrophe (or any other optional inclusion of special characters).
If it seems like this is an issue beyond my form input field, I am happy to share more of my coding.
Not sure but i think the problem is that you need a double escape character before the accent, one for the ejs on the server and one for the js on the browser. Can you try using <%- instead of <%= (EJS doesn't escape characters).
Sorry i never used ejs... other try, very ugly...:
<ul>
<% BeerList.forEach(function(objsofbeer){ %>
<% objsofbeer.brewery.brewery_name = objsofbeer.brewery.brewery_name.replace("'","\\'"); %>
<% objsofbeer.beer.beer_name = objsofbeer.beer.beer_name.replace("'","\\'"); %>
<li>
<a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
<span><%= objsofbeer.brewery.brewery_name %></span><br>
<span><%= objsofbeer.beer.beer_name %></span><br>
</a>
</li>
or try playng with ` character instead " or '
I have an application that uses bootstrap and JQuery. On the website page it displays some links. Based on a certain condition that I set in the JavaScript file, I want to strikethrough those links. On my HTML page, landing.html, I have this code for the links as follows:
<div class = "container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li><a target="_blank" href.bind="PreTestLink">PreTest Survey 1</a></li>
<li><a target="_blank" href.bind="PreTestLink2">PreTest Survey 2</a></li>
</div>
In my JavaScript file, landing.js, I have a constructor method with this field that I would like to use as the condition for setting the above links to be strikethrough-ed or not:
import {RouterConfiguration, Router} from 'aurelia-router';
var myApp;
export class Landing {
static inject() { return [Router]; }
constructor(router){
this.router = router;
myApp = this;
this.config = {}
this.surveyCode1 = "";
this.surveyCode2 = "";
this.surveyCompleted = false;
}
...
if(some condition){
this.surveyCompleted = true;
}
Now, I know that with JQuery, I can send a value from the html file (i.e perhaps typed in by the user into a textbox) over to the JavaScript file by inserting:
value.bind="username"
into the HTML tag. I also know that strikethrough in HTML can be done with a:
<del> tag
I'm just not sure how to connect this logic in reverse, to use my surveyCompleted conditional variable to set the tag within my HTML page.
You code seems like its using Aurelia. So i would recommend you use aurelia and not Jquery for this. So this should be quite easy as Aurelia supports conditional templates.
Official Docs. So what you can do something like this.
<div class="container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li>
<a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 1</a>
<a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 1</del></a>
</li>
<li>
<a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 2</a>
<a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 2</del></a>
</li>
I dont know aurelia but i think this must do the trick for you. Let me know if you still face issues.
Hope this helps :)
I have the following code inside my asp.net MVC view:-
<img class="thumbnailimag" src="~/Content/uploads/#item.ID.ToString()" + ".png" />
but I am unable to concatenate the .png to my href & src . can anyone advice please ?
Thanks
You'll want to wrap the code in parentheses, as explained here. No need to call .ToString() then:
href="~/Content/uploads/#(item.ID).png"
Your quotes are not closed properly.
href='#string.Format("~/Content/uploads/{0}.png", item.ID)'
Complete Code
<a href='#string.Format("~/Content/uploads/{0}.png", item.ID)'><img class="thumbnailimag" src='#string.Format("~/Content/uploads/{0}.png", item.ID)' /></a>
Alternatively, declare fileName outside of the href (IMO makes it more readable)
#{
var fileName = item.ID.ToString() + ".png";
}
<img class="thumbnailimag" src="~/Content/uploads/#fileName" />
I know how to use the smarty mailto function to create mailto anchor links with encoding. But I am wondering if it is possible for example to insert html image tags [<img>] into the output of this function.
I have tried:
[SMARTY]
{$text = '<img src="/images/qr_code.jpg" alt="member sign up qr code">'}
{mailto address="test#example.com" encode="hex" text={$text}}
[HTML RESULT]
<a href="mailto:%74%65%73%74#%65%78%61%6d%70%6c%65.%63%6f%6d">
<img src="/images/qr_code.jpg"
alt="member sign up qr code" >
</a>
I am after this output rather:
<a href="mailto:%74%65%73%74#%65%78%61%6d%70%6c%65.%63%6f%6d">
<img src="/images/qr_code.jpg"
alt="member sign up qr code">
</a>
It seems, from reading this code https://bitbucket.org/pferor/dbless/src/04b228943e39/dbless/lib/smarty/plugins/function.mailto.php, that when you use the "hex" encoding it not only encodes the address but also the text (line 147):
$text_encode = '';
for ($x=0; $x < strlen($text); $x++) {
$text_encode .= '&#x' . bin2hex($text[$x]).';';
}
Not sure if that's the problem though.
If you don't mind editing the Smarty source youmight be able to change this line (153):
return '<a href="'.$mailto.$address_encode.'" '.$extra.'>'.$text_encode.'</a>';
To this:
return '<a href="'.$mailto.$address_encode.'" '.$extra.'>'.$text.'</a>';
To make it work.
If you try "none" encoding does it show the image then?