I have a webpage with a form. On click of the button My webserver has to take all the stored chat of a profile in an sql db and it has to send this chat in a webpage. I used json messages and I can assure that the logic is working.
Now I have to:
Render the html webpage
Send the json message to this html webpage so that it could display it in a proper way (not flat)
How can I do that? I am using express and handlebars.
Here is my code:
router.get('/chatlist', ensureAuthenticated, (req,res)=>{
let mittente = req.user.id;
findUsersChat(mittente)
.then(Chats=>{
getChatData(Chats,mittente).then(ChatList=>{
console.log("Lista2: " +ChatList);
var obj=JSON.parse(ChatList);
res.render('chatlist');
// res.render('chatlist', {obj});
})
.catch(err=>console.log(err))
});
})
chatlist.handlebars
<section id="gigs" class="container">
<h1>Chats Available</h1>
{{#each obj}}
<h1>{{Nome}}</h1>
<div class="form-group">
<form method="POST" action="/users/chat">
<p>Utente numero : {{#index}}</p>
<label for="name" value={{Nome}}>{{Nome}}</label>
</form>
</div>
{{/each}}
</section>
Related
I am using summernote rich text editor, and I want to edit my posted data(stored in DB). I am sending the value to the text area and inputs but not showing into the text area and showing into the input. kindly share some solutions and suggestions with me. any jquery and js function like this...
here is rendered data to web page
route.get('/edit/:id', async (req, res) =>{
const id = req.params.id
const article = await Article.findById(id)
res.render('editarticle',{article:article})
})
and here is ejs or HTML
<%- include('header'); -%>
<div class="container-9">
<h2>Create Article Here</h2>
<hr>
<form action="/create/blog" method='post'>
<input type="text" name="title" id="" placeholder="Enter Title" value='<%=article.title%>'/>
<input type="text" name="description" id="dics" placeholder="Enter Description" value='<%=article.discription%>'/>
<hr>
<button id='btn-post' type="submit">Post</button>
<textarea name='content' id="body" rows="10" value="<%=article.content%>" ></textarea>
</form>
</div>
<%- include('footer'); -%>
I have solved this problem with help of one line of code. I have got the solution after 2 month
var value = $('#value').val()
console.log(value);
$('textarea#body').summernote('pasteHTML', value);
if want to render the HTML for edit this will work, var value = $('#value').val() it just receiving the value (HTML) from the backend and $('textarea#body').summernote('pasteHTML', value); this line of code pesting the HTML into summernote editor.
#tushar Very useful !!
I use it on summer note as like
Put Content in a div, and set it display none
<div id="contentDumpDiv" style="display:none;">
<?php echo $post['content'] ?>
</div>
then use this javascript code
var value = $('#contentDumpDiv').html();
$('textarea#saContent').summernote('pasteHTML', value);
I have this issue:
I have a get request that I serve using router.get (Express).
In this function I use to take datas from my sql db. Now i have this data in JSON format. I want to pass the json datas to handlebars and to send the response to the client with the datas rendered inside the html only (Render is completely made on server side).
Maybe I' m getting a little bit confusing:
Is there a solution for what I want to do?
Express:
//CHAT
router.get('/chatlist', ensureAuthenticated, (req,res)=>{
let mittente = req.user.id;
findUsersChat(mittente)
.then(Chats=>{
getChatData(Chats,mittente).then(ChatList=>{
console.log("Lista2: " +ChatList);
var obj=JSON.parse(ChatList);
res.render('chatlist') ;
})
.catch(err=>console.log(err))
});
})
Handlebars
<section id="gigs" class="container">
<h1>Chats Available</h1>
{{#each obj}}
<h1>{{Nome}}</h1>
<div class="form-group">
<form method="POST" action="/users/chat">
<p>Utente numero : {{#index}}</p>
<label for="name" value={{Nome}}>{{Nome}}</label>
</form>
</div>
{{/each}}
</section>
It looks like you are not passing the array (ChatList) to your view.
You can do that by changing your code to this:
...
getChatData(Chats,mittente).then(ChatList=>{
console.log("Lista2: " +ChatList);
res.render('chatlist', {objects: ChatList}) ;
})
...
By doing this an array "objects" will be available in your view and you can iterator over it.
Your page now should become:
<section id="gigs" class="container">
<h1>Chats Available</h1>
{{#each objects}}
<h1>{{./Nome}}</h1>
<div class="form-group">
<form method="POST" action="/users/chat">
<p>Utente numero : {{#index}}</p>
<label for="name" value={{./Nome}}>{{./Nome}}</label>
</form>
</div>
{{/each}}
</section>
I'm trying to create a blog site that has the ability to comment on a blog/article. I have the end point
app.get('/post/:slug', function(req, res) {
var _slug = req.params.slug;
var blog_post = _.findWhere(_DATA, { slug: _slug });
if (!blog_post) return res.render('404');
res.render('post', blog_post);
});
that handles the display of a blog/article using HandleBars. It retrieves a post from database _DATA and simply display it using the template post.handlebars. It right now does nothing else.
I would like to add the ability to comment on this article. I'm very new to web programming and don't know how to handle requests like that. Right now, my idea is to add
<article>
<form method="POST" action="/comment">
<div class="input-field">
<label>Comment:</label>
<textarea type="text" name="comment" rows="20" placeholder="What's on your mind?"></textarea>
</div>
<button type="submit">Add Comment</button>
</form>
</article>
to the bottom of my post.handlebars and add the end point app.post('/comment', function(req, res) {});
But this presents multiple problems, namely, how would I know which article I'm commenting on? In this new end-point, my req.body would contain nothing except the contents of the comment.
What is the proper way to handle this?
Put the ID of your article in the comment form as an hidden input. When you'll submit the form you'll get the article-id value.
I've used handlebar to place the article id in the form change the value of article.id according to your data.
<article>
<form method="POST" action="/comment">
<div class="input-field">
<label>Comment:</label>
<textarea type="text" name="comment" rows="20" placeholder="What's on your mind?"></textarea>
</div>
<input type="hidden" name="article-id" value="{{article.id}}">
<button type="submit">Add Comment</button>
</form>
</article>
I am trying to display data from my mongodb backend to an hbs template by trying to port over this tutorial. I do not get any errors from the server logs or the console in the browser, but I do not get any data represented on the template. Interestingly enough, however, it is generating html markup. Please help me see the issue.
*Note using express framework (and still learning)
app.js:
app.post("/", function(req, res){
res.render("default", {title:"posts", entries:myRoute.getBlogEntries()});
});
myRoute.js:
exports.getBlogEntries = function(res) {
mongo.connect("mongodb://localhost:27017/myDB", function(err, db){
if(err) { return console.dir(err); }
var collection = db.collection("posts");
collection.find({},{},function(e,docs){
res.render("default", {
"entries" : docs
});
});
});
};
hbs template:
{{#each entries}}
<form method="POST">
<div class="well">
<div class="row">
<div class="col-md-1">
<div>
<button type="submit" value="{{_id}}" class="btn btn-lrg btn-primary" name="voteup" title="Vote post up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
</div>
<div style="text-align:center;padding-right:5px;padding-top:7px;padding-bottom:7px;"><span class="badge">{{voteCount}}</span></div>
<div>
<button type="submit" value="{{_id}}" class="btn btn-lrg btn-danger" name="votedown" title="Vote post down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
</div>
</div>
<div class="col-md-10">
<h4>{{title}}</h4>
<label style="font-weight:normal;font-style:italic">Posted: {{published}}</label>
<div>
{{body}}
</div>
</div>
</div>
</div>
</form>
{{/each}}
Thanks in advance!
I assume you are using the mongodb driver,which you did not specify.
collection.find returns a mongodb cursor , not an array of documents. You can use toArray to get the documents :
collection.find().toArray(function(e,docs){
...
}
I suggest your read the documentation of the library before using it,because you just can guess what an api does.
I'm using Node/Express (most recent production versions)
I have a form where I collect new account info. The user can add a username, etc.
In the view handler, I check a mongodb database to see if the username is unique. If it is not, I generate a message and reload the original view. Since the original request was a post, all of the data the user posted is in req.body. I would like to add the data the user submitted on the response. I could do it by specifically adding each value to the response. But isn't there an easier way to add all the request data back to the response? And is there a way to render that in the view (i'm using ejs) I tried res.send(JSON) coupled with ejs variables. Doing so generates errors saying the variables aren't available.
Here's my function (ignore the users.createUser(req) - it's not finished yet):
createAccount: function(req, res, next){
users.createUser(req);
res.render('create_account', {
layout: 'secure_layout',
title: 'Create Account',
givenName: req.body.givenName,
username: req.body.username,
familyName: req.body.familyName
});
},
And here's my view:
<form action="/createAccount" method="post">
<div>
<label>First Name:</label>
<input type="text" name="givenName" value="<%= givenName %>"/><br/>
</div>
<div>
<label>Last Name:</label>
<input type="text" name="familyName" value="<%= familyName %>"/><br/>
</div>
<div>
<label>Username:</label>
<input type="text" name="username" value="<%= username %>"/><br/>
</div>
<div>
<label>Password:</label>
<input type="password" name="password"/>
</div>
<div>
<input type="submit" value="Submit"/>
</div>
</form>
It seems overly complex to have to add each of the values. I tried {body: req.body} but values were never added to the view.
I'm not quite sure what you're after, but if you want to render an ejs view with data that was on the request body, you would do something along these lines:
app.post('/foo', function(req, res, next) {
res.render('view', {body: req.body});
});
view.ejs:
<ul>
<% for(var key in body) { %>
<li><%= key %>: <%= body[key] %></li>
<% } %>
</ul>