i'm a web noob and I couldn't find an answer that solved my case:
I'm trying to pass on a variable called catURL to my html file but when I try to render it, it fails.
This is how I pass the variable:
res.render('index', {catURL: url, error: null});
This is where I try to show it in my html:
<div id="Wax on" class="tabcontent">
<h3>Wax on</h3>
<p>Dont forget to wax off!!!</p>
<% if(catURL !== null){ %>
<img src="<%= catURL %>" />
<% } %>
</div>
This is the error msg that I get:
ReferenceError: /Users/nimrodshai/Documents/Projects/WeatherJS/views/index.ejs:21
19| <h3>Wax on</h3>
20| <p>Dont forget to wax off!!!</p>
>> 21| <% if(catURL !== null){ %>
22| <img src="<%= catURL %>" />
23| <% } %>
24| </div>
catURL is not defined
at eval (eval at compile (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/ejs/lib/ejs.js:618:12), <anonymous>:11:8)
at returnedFn (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/ejs/lib/ejs.js:653:17)
at tryHandleCache (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/ejs/lib/ejs.js:251:36)
at View.exports.renderFile [as engine] (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/ejs/lib/ejs.js:482:10)
at View.render (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/view.js:135:8)
at tryRender (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/application.js:640:10)
at Function.render (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/application.js:592:3)
at ServerResponse.render (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/response.js:1008:7)
at /Users/nimrodshai/Documents/Projects/WeatherJS/server.js:14:6
at Layer.handle [as handle_request] (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/layer.js:95:5)
at /Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:335:12)
at next (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:275:10)
at urlencodedParser (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/body-parser/lib/types/urlencoded.js:91:7)
at Layer.handle [as handle_request] (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:317:13)
at /Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:335:12)
at next (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/express/lib/router/index.js:275:10)
Appreciate your help
Got it.
I wasn't aware that I should declare this variable the same way.
This is how I did it:
<% var catURL; %>
And put it at the top of the html
Related
Here is my template.html.erb loop. I am trying to access the JSON object data. This works, if I use just straight json arrays, ["name","artist","details"] and access it via artwork[0] artwork[1] etc. However, Im trying to use a JSON object and things fall apart.
<% data.artworks.each_with_index do |artwork,index| %>
<div id="<%= slug_text artwork.name %>" class="port">
<div class="port_wrap">
<div class="grid">
<div class="c-50--lap-and-up grid__cell">
<div class="title-box">
<h1><%= artwork.name %></h1>
<h2>By: <%= artwork.artist %></h2>
Im getting "undefined method 'name' for #Array:0x000005584bcd3018 as an error.
I am working on a Nodejs project and currently working on delete requests to delete items (recipes) stored in a database. I have looked at other similar posts and around Google but can't seem to pinpoint the cause of my problem. I keep getting the following error:
And, I am unsure why. What I believe I am doing wrong is retrieving the Recipe _id incorrectly, but am not completely sure. The link to this project repo is: https://github.com/halsheik/RecipeWarehouse.git. Below, I have pasted the relevant portions of my code that I have added (not yet uploaded to repo). I'd appreciate any assistance.
$(document).ready(function(){
$(".secondaryContainer").hover(function(){
$(this).find(".deleteButton").fadeIn();
}, function(){
$(this).find(".deleteButton").hide();
});
$('.deleteButton').on('click', function(event){
$target = $(event.target);
const id = $target.attr('data-id');
$.ajax({
type:'DELETE',
url: 'article/' + id,
success: function(res){
window.location.href='/articles/myRecipes'
},
error: function(err){
console.log(err);
}
});
});
});
// Delete recipe
router.delete('/:id', function(req, res){
const query = {_id: req.params.id}
Recipe.remove(query, function(err){
if(err){
console.log(err);
throw err;
}
res.send('Success');
});
});
<%- include('../_partial/_header'); -%>
<!-- Container for all of a user's recipes -->
<div id="recipesContainer">
<div id="myRecipesContainer">
<label id="myRecipesLabel">My Recipes</label>
<!-- Button to Create a New Recipe -->
+ Create New Recipe
</div>
<!-- Displays each individual recipe (The name and image) -->
<div id="allRecipes">
<% if(recipes.length > 0) { %>
<% recipes.forEach(function(recipe){ %>
<% if(recipe.author == user._id){ %>
<div class="secondaryContainer">
<span class="deleteButton"><i class="fa fa-trash-o" data-id="<%= recipe._id %>" aria-hidden="true"></i></span>
<div class="recipeContainerIndv">
<img src="/uploads/<%= recipe.recipeImageFileName %>"/>
<%= recipe.recipeName %>
</div>
</div>
<% } %>
<% }); %>
<% } else { %>
<div id="noRecipesContainer">
<a id="noRecipes">You Currently Have No Recipes!</a>
</div>
<% } %>
</div>
</div>
<%- include('../_partial/_footer'); -%>
I can't understand the objective of the following code:
$('.deleteButton').on('click', function(e){
$target = $(e.target);
const id = $target.attr('data-id');
//...
When click event is triggered on deleteButton, the event's target is just the <span.deleteButton> itself which has no 'data-id' attribute.
In this way you can get 'id':
$('.deleteButton').on('click', function(){
const id = $(this).parent().attr('data-id');
//...
I am attempting to set up a ngb-datepicker to close on clicking outside of it. I am however receiving this error:
GamesComponent.html:9 ERROR TypeError: dp.close is not a function
at GamesComponent.push../src/web/apps/command-center/games/games.component.ts.GamesComponent.closeCalendar (games.component.ts:202)
at Object.eval [as handleEvent] (GamesComponent.html:12)
at handleEvent (core.js:10050)
at callWithDebugContext (core.js:11143)
at Object.debugHandleEvent [as handleEvent] (core.js:10846)
at dispatchEvent (core.js:7509)
at core.js:7953
at HTMLDocument.<anonymous> (platform-browser.js:1140)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3748)
The relevant html is below
<ng-template #popContent class="col-lg-3 align-items-center">
<ngb-datepicker (select)="convertNgbDatetoDate($event)"
name="dp" ngbDatepicker #d="ngbDatepicker"
(blur)="onInputBlur()"
(document:click)="closeCalendar($event, d)">
</ngb-datepicker>
</ng-template>
and the ts
closeCalendar(event, dp) {
console.log(dp)
const path = event.path.map(p => p.localName);
if ((!path.includes('ngb-datepicker') && !path.includes('ng-
container') && !path.includes('gns-sentient-dates') &&
!path.includes('howser-input'))) {
dp.close();
this.onInputBlur();
}
}
Any ideas as to what I am missing?
Closing ngb-datepicker with clicking outside is an open issue of ng-bootstrap since 2016. Have a look at this issue.
Possible workarounds:
A)
use view:
(click)="d.toggle(); $event.stopPropagation();" (document:click)="d.close()"
or B)
use component:
if(!this._eref.nativeElement.querySelector('ngb-datepicker').contains(event.target)
&& !this._eref.nativeElement.querySelector('.input-group-addon').contains(event.target)) {
let self = this;
setTimeout(function(){
self.dynamicId.close();
},10);
}
or C)
use view:
<input style="background-color: white;" class="form-control" placeholder="YYYY-MM-DD" name="date" [(ngModel)]="date" ngbDatepicker #eToggle="ngbDatepicker" (click)="eToggle.toggle(); sToggle.close();$event.stopPropagation()" (document:click)="decideClosure($event, eToggle)" readonly>
and component:
decideClosure(event, datepicker) { const path = event.path.map(p => p.localName); if (!path.includes('ngb-datepicker')) { datepicker.close(); } }
In an angular 4 / nodejs application, I am retrieving the following date field from MongoDB:
"2018-06-14T03:00:00.000Z"
Here is my HTML:
<div *ngIf="this.Lacador.dataAssociacao">
<p style="margin-top: 10px" type="text"> <label style="font-weight: normal"> {{ this.Lacador.dataAssociacao | date:"dd/MM/yyyy" }} </label></p>
</div>
In the screen, the date is displayed (as per image), but I have an error in the console which messes with all the scripts of the page:
ERROR Error: InvalidPipeArgument: 'function Date() { [native code] }' for pipe 'DatePipe'
at invalidPipeArgumentError (common.es5.js:2610)
at DatePipe.webpackJsonp.../../../common/#angular/common.es5.js.DatePipe.transform (common.es5.js:3506)
at checkAndUpdatePureExpressionInline (core.es5.js:11665)
at checkAndUpdateNodeInline (core.es5.js:12370)
at checkAndUpdateNode (core.es5.js:12303)
at debugCheckAndUpdateNode (core.es5.js:13167)
at debugCheckRenderNodeFn (core.es5.js:13146)
at Object.eval [as updateRenderer] (LacadoresViewComponent.html:96)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131)
at checkAndUpdateView (core.es5.js:12275)
Date displayed correctly:
Any clues on why it throws an exception, even through it formats the field as I want?
Edit: Added a missing quote.
I can't generate following file with this markup
<div class="animatedCarouselItems <%= site_name %>">
${utils.InlineStyleSheet.get("productions/<%= site_name %>/<%= site_name %>.css").raw()}
<div class="productionHomeStage">
<img class="stageBg" src="#{'/public/images/productionhomestage/<%= site_name %>/<%= site_name %>_bg.jpg'}" alt="">
</div>
Site_name should be overwritten with the appname.
I get following error:
vents.js:72
throw er; // Unhandled 'error' event
^
ReferenceError: utils is not defined
at eval (eval at <anonymous> (/Users/sergejr/Documents/development/_projects/yeoman-generator/generator-copyDev/node_modules/yeoman-generator/node_modules/lodash/index.js:10747:16), <anonymous>:10:10)
at underscore (/Users/sergejr/Documents/development/_projects/yeoman-generator/generator-copyDev/node_modules/yeoman-generator/lib/util/engines.js:23:45)
at actions.engine (/Users/sergejr/Documents/development/_projects/yeoman-generator/generator-copyDev/node_modules/yeoman-generator/lib/actions/actions.js:224:32)
at template (/Users/sergejr/Documents/development/_projects/yeoman-generator/generator-copyDev/node_modules/yeoman-generator/lib/actions/actions.js:198:19)
at yeoman.generators.Base.extend.copyMainFiles (/Users/sergejr/Documents/development/_projects/yeoman-generator/generator-copyDev/generators/app/index.js:60:10)
at /Users/sergejr/Documents/development/_projects/yeoman-generator/generator-copyDev/node_modules/yeoman-generator/lib/base
When there is no placeholder it can generate this file with
this.template("html/carousel/_carousel.html", folderHTML + "carousel/" + this.appName + ".html", siteTitle);
Any Ideas?