I'm looping through users (with Express.js) and displaying cards for them. For the users without profile pictures, I'm using the random photo generator at http://lorempixel.com/. It pulls a random photo every time:
<% users.forEach(function(user) { %>
<div class="user">
<div class="user-container">
<div class="img-container">
<!-- Image User -->
<div class="img-user" id="<%= 'img-div' + user.id %>">
<% var picture = user.get("profilePictureMedium");
if (picture) { %>
<img id="<%= 'img-' + user.id %>" src="<%= user.get("profilePictureMedium").url() %>" width="220"
/>
<% } else { %>
<img id="<%= 'img-' + user.id %>" src="http://lorempixel.com/g/220/220/animals/" width="220" >
<% } %>
<!-- /Image User -->
What's happening is that the same photo is generated for every user without a profile photo. However, if I manually load http://lorempixel.com/g/220/220/animals/ into a browser window I'll get a different photo everytime.
I stuck in:
<img src="http://lorempixel.com/g/220/220/animals/" width="220" />
Outside of the loop and it pulled the same photo as the photo in the loop, so I suppose the browser is catching the result of the first call.
Is there a way to avoid this caching so that it calls and retrieves a random photo each time?
One common solution is to append a redundant query string to the url. For example:
<img src="http://lorempixel.com/g/220/220/animals/?v=1404442966794" />
This random number could be the current timestamp or, perhaps better in this use case, the id for a given user, that way caching can still be utilized once an image has been acquired for a given user. i.e.
src="http://lorempixel.com/g/220/220/animals/?v=<%= user.id %>"
Related
I am looping over an array of objects, these objects contains links to images. Some of these images return with status 403 and do not display.
Here is what I have in ejs
<% Recipes.forEach(recipe => { %>
<div class="basis-2/12 min-w-max">
<% if (recipe.image) { %>
<img class="w-60 h-40 object-cover bg-slate-100 rounded-xl" src="<%= recipe.image %>" />
<% } else { %>
<img class="w-60 h-40 object-cover bg-slate-100 rounded-xl" src="/images/placeholder.png" /> <% } %>
</div>
<% }) %>
The if (recipe.name) itself only check whether there is a link or not, which is always true.
How should I go for this?
This solution works, the recipe.image (in this case) must have a value of null
You'd have to actually fetch the image on the server before rendering the page, which would slow down the loading.
If using JavaScript on the client side is possible, consider implementing the fallback there. See for example this answer: https://stackoverflow.com/a/1588899/240963
<img
src="<%= recipe.image %>"
onerror='this.onerror = null; this.src="/images/placeholder.png"'
/>
Alternatively you could implement a proxy on the server, and serve the fallback in case the image on the origin is not found; useful package for this is for example: https://github.com/http-party/node-http-proxy
I have a form in which I iterate an input checkbox field n times, as follows:
<form class="" action="" method="post">
<% availableDirezione.forEach((direzione, index) => { %>
<p>
<input class="checkbox" type="checkbox" name="checkArray" id="check0" value="1">
<span><%= direzione.usr_udf_direzione %> (<%= direzione.usr_udf_dirid %>) </span>
</p>
<% }) %>
<button type="submit" class="btn btn-primary float-right mb-5">Add Mapping</button><br>
</form>
I would like that in the post method, even the unchecked values are passed in the checkArray object.
Let's suppose the forEach iterates 5 times, and only the first and last checkbox are checked, I would like that the checkArray object is as following:
...
body : {
checkArray : [1,0,0,0,1]
}
...
I tried adding the hidden checkbox with a 0 value. It fills the checkArray object 5 times but in wrong error. Any tips?
Sorry but is not possible. This is not due to a Node.js limitation but rather a HTML standard. See second 'note' block in
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox (under value section)
Hence you may try to fight against it with some front-end js code, but I wont suggest it. What you need to do is have a mean to reconstruct the array at the end like this:
<form class="" action="" method="post">
<% availableDirezione.forEach((direzione, index) => { %>
<p>
<input class="checkbox" type="checkbox" name="checkArray" id="check0" value="<%= index %>">
<span><%= direzione.usr_udf_direzione %> (<%= direzione.usr_udf_dirid %>) </span>
</p>
<% }) %>
<button type="submit" class="btn btn-primary float-right mb-5">Add Mapping</button><br>
</form>
Then when you receive your POST:
availableDirezione.map((direzione, index) => checkArray.indexOf(index) !== -1 0 : 1)
This will produce a [0, 1, 1, 0, 0 ... ] array
availableDirezione.map((direzione, index) => checkArray.indexOf(index) !== -1 direzione : none)
Were this will produce a [none, {direzione}, {direzione}, ... ] array
The trick is to use value as your value media and set there something adequate. In this case i used the index of the value inside availableDirezione array, but you may even put set it to something even more meaningful like a unique id present in your direzione objects.
I'm new to ASP and definitely new to Kentico. but i am fairly moving along.
Anyway. i am building this layout where there is a hidden div element:
<div style="display: none;">
<cms:CMSWebPartZone ZoneID="someContentZoneHere" runat="server" />
</div>
The problem with this script is that is does not show the Web Part Zone on the Design Page and i cannot add a Data inside it. Si i need to remove the style only when it is on the CMSdesk.
i have been thinking to use if else to solve the problem, but i do not know what to compare?
<% if(site is not in CMSDESK || CMSSITEMANAGER) { %>
//with style attribute
<div style="display: none;">
<% }else{ %>
//no style attribute
<div>
<% } %>
or are there any other ways to do this.
The condition you are looking for is:
if(CMS.PortalEngine.PortalContext.ViewMode != CMS.PortalEngine.ViewModeEnum.Edit &&
CMS.PortalEngine.PortalContext.ViewMode != CMS.PortalEngine.ViewModeEnum.Design)
You can also do it the other way round and check for CMS.PortalEngine.ViewModeEnum.LiveSite. Check the full list of possible values.
function and I want to render an EJS-Partial or a Template with the returned data and finally append it to the DOM. I tried it with
var html = <%- partial('comment') %>"
but this gives me an Error and I tried it with the EJS templates like this
var html = new EJS({url: '/comment.ejs'}).render(comment);
but here I have the problem, that the code doesn't recognize the view folder nor the assets folder where I also tried to copy my partial file into.
Here is the code snippet of my ajax-function
<script>
function postComment(){
if ($('#inputContent').val() != ''){
$.post( "/comment/create/", $('#commentForm').serializeArray(), function(comment) {
//var html = new EJS({url: '/comment.ejs'}).render(comment);
//var html = "<%- partial('comment') %>";
$(html).appendTo('.comments').hide().fadeIn(2000);
$('#inputContent').val('');
});
}
}
</script>
has anyone a solution for my problem? thank you very much
Here's an example that might help to get you where you want to go.
You can put a template in /assets/linker/template directory. The linker directory is created when you create a new sails app using the --linker argument. So, for example, let's say I have a template file called: addUser.ejs with the following code which adds a user to an existing table:
<tr data-id="<%- user.id %>" data-model="user">
<% if (user.online) { %>
<td><img src="./images/icon-online.png"></td>
<% } else { %>
<td> <img src="./images/icon-offline.png"></td>
<% } %>
<td><%= user.id %></td>
<td><%- user.name %></td>
<td><%- user.title %></td>
<td><%- user.email %></td>
<% if (user.admin) { %>
<td> <img src="/images/admin.png"></td>
<% } else { %>
<td> <img src="/images/pawn.png"></td>
<% } %>
<td>Show</td>
<td>Edit</td>
<td><form action="/user/destroy/<%- user.id %>" method="POST">
<input type="hidden" name="_method" value="delete"/>
<input type="submit" class="btn btn-sm btn-danger" value="Delete"/>
<input type="hidden" class="_csrf" name="_csrf" value="<%- _csrf %>" />
</form></td>
</tr>
I can now use that template, in this example, in a separate javascript file contained in /assets/linker/js with the following:
$( 'tr:last' ).after(
JST['assets/linker/templates/addUser.ejs']( obj )
);
So this take the template and uses obj which I passed in with the template to produce the desired html that gets appended in the dom.
edit
In addition, go into Gruntfile.js around line 80 should be the following:
var templateFilesToInject = [
'linker/**/*.html'
];
Change *.html to *.ejs.
Finally, add the underscore.js library to your assets/linker/js directory.
It's also important to have the linker directory structure. I believe the Gruntfile.js are identical whether you use the --linker designation or not, so make a directory off assets called linker with sub directories of js, styles, and templates. Move the existing files under assets/js assets/styles under your new linker directory.
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.