This is a bit of a strange one and I think it's a basic syntax error, but I cannot seem to pin it down.
I have successfully got my controller in Sails (NodeJS) sending some JSON through to the view (an EJS file). It's an object called "Profile" (pulled from a DB, which I have connected & working).
The JSON my page is receiving looks like this:
[{
"personal_photo_url": "bing.jpg",
"show_profile": false,
"id": 1
}]
The relevant code snippet on my .ejs file (view) looks like this:
<h3>Personal photo: {{profile.personal_photo_url}}</h3>
<h3>Show profile to others?: {{ profile.show_profile }}</h3>
<h3>User ID:{{ profile }}</h3>
When the page loads, I'm not seeing any text against "welcome sound" or the "show profile to others?" line, however when I just show "profile" without referencing the fields in the "User ID" line, I receive the following HTML displayed on the page:
Personal photo:
Show profile to others?:
User ID: [ { "personal_photo_url": "bing.jpg", "show_profile": false, "id": 1 } ]
It's worth pointing out that when I do some querying all the fields are listed as "undefined", even though they are showing per above.
So my question is pretty simple - how do I get the values from these fields showing without all the JSON formatting?
Ok, after a bit more trial and error I realised what had happened is that I was sending in an array to the page.
When I adjusted my search result from the database to use the .findOne() method instead of .find() the data was presented as I needed it (ie just one record), and my code above worked perfectly.
Related
I am working upon the project using node.js with express.js framework and view engine set to "ejs". The project's functions is to:
1. Get an input from a user.
2. Using the input send the request to the website's API.
3. Print the certain data from that API (including the ID to be used later).
4. When user clicks on the item (that is an 'a' tag) in the list consisting of the aforementioned data - use the ID of this item to send another request to the same website to get a more detailed info about the item.
I am stuck at the step 4. And the question is: How to send this id from the .ejs file to post request in node.js when the user clicks on the item?
Doing it the other way is simple: response.render("view name", {nodeJsVar: ejsVar}); But how to pass it back?
Thanks for the help!
First of all, you cannot send any data "from the .ejs file" - what you can do is to send it from the browser, that has a rendered HTML (and possibly JavaScript) and not EJS.
You can do it with some client-side JavaScript in which case you can do whatever you want.
You can do it by embedding the variable's value in a URL as a route parameter or a query parameter if you're using standard <a href="..."> links.
You can put a hidden input in a form if you're using forms and buttons.
You can put it in any part of the request if you're using AJAX.
Just to make sure you know what is what because it can be confusing - here X is a path parameter:
http://localhost/something/X
and here X is a query parameter:
http://localhost/something?x=X
try this (assuming you use jQuery):
$.ajax({
url: '/routename_to_handle_id',
type: 'POST',
data: { id: id }
}).done(function(response){
//callback to handle if it's successful
})
I'm attempting to add an image to a page type using a singleton set to the slideshow widgetType
The interface is working fine (can upload image, limits uploads to the set variable), but I cannot access the object in the templates
I am logging the page object with the below script in the page template, every other custom field works fine, just not the slideshow widget.
var data = {{ page | json }};
console.log(data);
Here is what is set in app.js
project: {
extend: 'apostrophe-fancy-page',
name: 'project',
label: 'Project',
addFields: [
{
name: 'thumb',
label: 'Thumbnail',
type: 'singleton',
widgetType: 'slideshow',
options: {
limit: 1
}
}
]
}
Any advice?
Hmm. You don't specify, but my suspicion is that you're trying to access the thumbnail from the template for a different page that has access to it as related-page information, e.g. page.ancestors or page.children. If the singleton were being rendered on the template for the page itself, you would have no trouble with this.
The thing about related-page information is that for performance reasons, Apostrophe limits how much information it includes in those arrays.
However, you can specify that you want more information. Here is an example from the pages property of the app.js file of one of our projects:
pages: {
// other config like page types goes here, then...
ancestorOptions: {
children: true,
areas: [ 'thumbnail' ]
},
descendantOptions: {
depth: 2,
areas: [ 'thumbnail' ]
}
}
Here we are enabling:
Include a .children array for each ancestor in page.ancestors, for accordion nav
Include the area called thumbnail for each ancestor
Include the area called thumbnail for each child of the current page (page.children)
Also include grandchildren page.children[0].children for dropdown nav
When you load more data, the price you pay is a little more time. This is a good compromise setup when you need a lot but you don't want to fetch thousands of pages and "hydrate" all of their widgets by fetching even more data.
If I'm mistaken and you are doing this on the page template for the page itself and it still doesn't work, please provide some examples and I can review those.
(I am one of the lead developers on Apostrophe. Apologies for not seeing this question sooner. StackOverflow is a good place for it and we'll be monitoring more closely in the future now that 2.0 stable has been released.)
According to this update...
https://developers.facebook.com/blog/post/2013/06/19/platform-updates--new-open-graph-tags-for-media-publishers-and-more/
...I thought article:publisher (with page ID or URL) would put a like button for the representative page when shared links are posted to walls? The debugger seems to think differently... what am I missing?
Debugger info:
Object at URL 'http:// domain.com/post/' of type 'article' is invalid because the given value 'http:// www.facebook.com/mypage' for property 'article:publisher' could not be parsed as type 'profile'
article:publisher is for Facebook pages, article:author is for individuals.
The "Follow" and "Like" buttons will only appear for people who haven't already followed the author or liked the publisher page.
I need to do the following,
I have a <select> (a list of team names), when the user selects a team, I get relevant information re: the team and display it.
How do I do this in jade?
I'm trying the following, (but I'm wrong obviously, I don't see a lot of documentation out there).
Briefly, I'm doing a include test.jade on my main page, and a res.render('test', {team: team_obj});
jade:
h1 #{team}.name
h2 #{team}.homeGround
h3 #{team}.manager
h4 #{team}.aka
nodejs:
collection.findOne(query, function(err, team_obj){
res.render('test', {team: team_obj});
});
I'm getting the information correctly in team_obj.
Get the following error when I run the app,
team is not defined
Now this is happening because test.jade is getting rendered before I feed it the team_obj.
Questions:
1) Am I doing this right? is include the correct way of partially rendering jade views? if yes, how do I make sure it renders only when the user has selected an option?
2) Is there a partial views concept in jade I'm unaware of?
1) you should use #{team.name}
2) you can't change the team object once the selector is changed. the template was rendered once with the database result. - such functionality should be handled by client side JavaScript and AJAX calls. partials in templates are just a way to share common pieces of templates, and its done in Jade via include.
I don't know what you're rendering and including and when.. but id you use a template variable like #{team.name} you have to make sure that the template was rendered with the team object.
Here is what I have in index.jade.
And yes I am using express.js
extends layout
block content
h1 Invoices:
!= partial("invoice")
This matches what I see in every single Jade/Express tutorial. But I get "Reference error: partial not defined". Any ideas why?
Use include, without quotes (This example is from the jade documentation)
users = [{ name: 'Tobi', occupation: 'Ferret' }]
each user in users
.user
include invoice
Where invoice is your "partial" template.
Jade newest version doesn't support partials. You might be following outdated tutorials. Please read up on jade documentation here