I insert data using summernote text editor. When i render this in my page than it is showing like <p>somthing</p>. And i want this as plain text.
JS Code
exports.Blog = function (req, res) {
if (req.session.Id != null) {
connection.init();
connection.query("select * from blog_posts where user_id=? order by date_created desc", [req.session.Id], function (reqest, row, fields) {
res.setHeader("Content-type", "text/html");
res.render('Blog', { rows: row });
});
}
else {
res.render('login');
}
};
ejs code
<%var result=rows%>
<%
for(var i=0;i<result.length;i++)
{
%>
<div class="well">
<div id="desc-<%=result[i].Id%>"></div>
<script type="text/javascript">
$(function () {
var desc='<%=result[i].description%>';
console.log(desc);
$('#desc-<%=result[i].Id%>').html(desc);
});
</script>
</div>
<%
}
%>
<%var result=rows%>
<%
for(var i=0;i<result.length;i++)
{
%>
<div class="well">
<div id="desc-<%-result[i].Id%>"><%-result[i].description%></div>
</div>
<%
}
%>
why are you generating script to insert html you can directly put description into div.
<%var result=rows%>
<%
for(var i=0;i<result.length;i++)
{
%>
<div class="well">
<div id="desc-<%-result[i].Id%>"><%=result[i].description%></div>
</div>
<%
}
%>
Related
I have the following code.
<body>
<div class="container">
<div class="row">
<% for(let i=0;i<seats.length;i++) { %>
<div class="col-lg-6">
<h3> <%= seats[i].name %> </h3>
<% if(<%= seats[i].isBook %> == false) { %>
<% document.querySelector("h3").disabled = true; %>
<% } %>
</div>
<% } %>
</div>
</div>
I get the following error:
Error: Could not find matching close tag for "<%".
at d:\seat booking\node_modules\ejs\lib\ejs.js:710:19
at Array.forEach()
...
The Problem is your if sentence. You are opening the tag <% and before closing it you are opening another one, which doesn't work and is not needed.
You can try the following:
<div class="container">
<div class="row">
<% for(let i=0;i<seats.length;i++) { %>
<div class="col-lg-6">
<h3> <%= seats[i].name %> </h3>
<% if(seats[i].isBook == false) {
document.querySelector("h3").disabled = true;
} %>
</div>
<% } %>
</div>
</div>
As you can see, I did not just remove the tags within the if(..). The other tags I removed are also unnecessary, because you don't have any HTML code in between your if sentence.
i have a list of projects, each have one tag :
project 1 : tag : Home
project 2 : tag : Appartement
...
And i want to be able to display only projects who includes one selected tag
If i put a tag it's working :
<% if (project.tags.includes('Appartements')) { %>
<h2 class="project-title"><%= project.title %></h2>
<%}%>
But i want to use button to change this tag :
<button onclick="changeSelectedTag('Appartements')">Appartements </button>
<button onclick="changeSelectedTag('Maisons')">Maisons </button>
<script type="text/javascript">
changeSelectedTag = function(tag) {
selectedTag = tag;
console.log(selectedTag)
}
</script>
The console log is working, i can see the selectedTag updated each time i press a button.
but i i put this code, i have 0 projects and selectedTag is empty :
<% if (project.tags.includes(selectedTag)) { %>
FullCode :
<div class="body-content">
<div class="body-tags">
<%selectedTag = 'Appartements'%>
<button onclick="changeSelectedTag('Appartements')">Appartements</button>
<button onclick="changeSelectedTag('Maisons')">Maisons</button>
</div>
<div class="projects-container">
<% projects.forEach((project) => { %>
<% if (project.tags.includes(selectedTag)) { %>
<div class="projects-content">
<h2 class="project-title"><%= project.title %></h2>
</div>
<%}%>
<% }); %>
</div>
</div>
<script type="text/javascript">
changeSelectedTag = function(tag) {
selectedTag = tag;
console.log(selectedTag)
}
</script>
RENDER in my controller
exports.list = (req, res) => Project.find((err, projects) => {
if (err) return next(err);
let selectedTag;
return res.render('../templates/projects.ejs', { projects: projects, selectedTag: selectedTag });
});
CONTENT i want to display :
<div id="here" class="items-container">
<% projects.forEach((project) => { %>
<%selectedTag = 'Appartements'%>
<% if (project.tags.includes(selectedTag)) { %>
<div class="items-content">
<img onmouseover="onProjectHover('<%=project.id%>-img', '<%=project.id%>-titles')" class="item-img" src="/<%=project.images.main.url%>" alt="<%=project.images.main.alt%>">
<div onmouseleave="onProjectLeave('<%=project.id%>-img', '<%=project.id%>-titles')" id="<%=project.id%>-img" class="item-hover-content">
<div class="item-hover-content-title">Surface : <span class="item-hover-content-value"><%=project.surface%> m2</span></div>
<div class="item-hover-content-title">Budget : <span class="item-hover-content-value"><%=project.budgect%></span></div>
<div class="item-hover-content-title">Durée : <span class="item-hover-content-value"><%=project.duration%> mois</span></div>
<button class="item-hover-content-btn">Voir le projet <i class="fas fa-arrow-right"></i></button>
</div>
<div id="<%=project.id%>-titles" class="item-titles">
<h2 class="item-title"><%= project.title %></h2>
<p class="item-city"><%= project.cities %></p>
</div>
</div>
<%}%>
<% }); %>
</div>
This ejs code works. I use pure javascript. You can also use jquery.
<div class="body-content">
<div class="body-tags">
<button id='Appartements' onclick="changeSelectedTag('Appartements',<%=JSON.stringify(projects)%>)">Appartements</button>
<button onclick="changeSelectedTag('Maisons',<%=JSON.stringify(projects)%>)">Maisons</button>
</div>
<div id='here' class="projects-container"></div>
</div>
<script type="text/javascript">
changeSelectedTag = function(tag, projects) {
selectedTag = tag;
console.log(selectedTag);
var main = document.getElementById('here');
main.innerHTML = '';
console.log(projects);
projects.forEach(el => {
if (el.tags.includes(selectedTag)) {
var div = document.createElement('div');
div.className = 'projects-content';
var h2 = document.createElement('h2');
h2.className = 'project-title';
h2.innerHTML = el.title;
div.appendChild(h2);
main.appendChild(div);
}
});
}
document.getElementById('Appartements').click();
//changeSelectedTag('Appartements',<%=JSON.stringify(projects)%>);
</script>
I am using $.getJSON in a jquery script to get data from a php file and display it in a template(underscore).
My template:
<script type="text/template" id="user-template">
<% _.each(users, function(user){%>
<div class="id"><%=user.id%> </div>
<div class="name"><%= user.name %></div>
<div class="city"><%= user.city %></div><br />
<% }); %>
</script>
My script:
$.getJSON(url, function(data){
var results = userTemplate({ users: data.users}),
$("#theresults").html(results);}
On each page im listing 10 users (or 10 results). The code works fine. I want to be able to show another div after every 4 results. Like an ad or a promotional content.
<div id="mycustomdiv">Custom DIV</div>
How do i do that?
Thanks.
Just use the second argument of the callback function to determine the current index
<% _.each(users, function(user, index){%>
<div class="id"><%=user.id%> </div>
<div class="name"><%= user.name %></div>
<div class="city"><%= user.city %></div><br />
<% if(index !== 0 && (index % 4) === 0) { %>
<div id="mycustomdiv">Custom DIV</div>
<% } %>
<% }); %>
I render a page with the data that ejs puts together. when the user presses a submit button a section (thirdRow)of the page should be refreshed with the new data that was submitted plus the old data. I got the new data in the db, I want to refresh the thirdRow that shows all the reviews.
basically my problem is the success method in the $.ajax . I could get all the data there but it seems weird to write everything over in html strings. There should be a better way.
I saw a method where I could put the .thirdRow into a template and include that into the main EJS page and also put that into my static public folder and do something like new EJS({url : 'public/thirdRow.ejs' }).update('.thirdRow', data); in this case is the data in the last code snippet the returned data from the success callback in the AJAX? How Do I get Access to the EJS There are alot of links for ejs can you show my how to include the EJS
I don't know if this is the correct method. How would you do it? I have a page that is basically made up of all the returned data and I want to click a button and have only one section have the new data.
One section inside main.ejs
<div class="thirdRow">
<div class="reviewSection">
<% if(reviews){%>
<% reviews.forEach(function(e, i){%>
<div class="indivReview">
<div class = "userRow row">
<div>
<span>user </span>
<% if( e.username) {%>
<span><%= e.username %></span>
<%}else{ %>
<span><%=e.user%></span>
<% }%>
</div>
<div><%= e.momented %></div>
</div><!--userRow-->
<div class = "companyRow row">
<div>
<span>Experince for</span>
<span><%=e.companyName%></span>
</div>
<div>
<span> industry</span>
<span>online retail</span>
</div>
</div> <!--companyRow -->
<div class="voteRow row">
<div>
Vote
</div>
<div><%= e.vote%></div>
</div>
<div class="reviewRow row">
<div>Review</div>
<div class = "displayReview">
<% e.reviewText.split("\n").forEach(function(e){ %>
<%= e %><br>
<%})%>
</div>
</div>
<div class="statementRow ">
// make a div for each object
<% e.statements.forEach(function(obj){%>
<div class="indivStatement">
<% var arr = []%>
<%for(var prop in obj) {%>
<% if(prop !== "name"){ %>
<% if(prop == "question"){%>
<% arr[0] = obj[prop] %>
<%} %>
<% if (prop == "result"){%>
<% arr[1] = obj[prop] %>
<%}%>
<% console.log(arr) %>
<%} %>
<%}%>
<div class = "question"><%= arr[0]%></div>
<div class = "bar" data-result ="<%= arr[1]%>"><%= arr[1]%></div>
</div>
<%})%>
</div>
<div> <span></span>
<span><%=e.companyName%></span></div>
<div><%= e.momented %></div>
</div>
<%})%>
<%}%>
</div> <!--reviewSection-->
</div> <!--thirdRow-->
inside client script
$(".submitButton").on("click",function(){
console.log(datum)
var empty;
if(datum.reviewText == "" && Object.keys(datum.statements) == 0 && datum.vote == null){
empty = true;
}else{
empty = false;
}
console.log("empty : " , empty)
scrollFunction(".thirdRow", ".submitButton, .shareButtonSection")
var data = datum;
if(!empty){
$.ajax({
type : "POST",
data : JSON.stringify(data),
contentType : "application/json",
url : "http://localhost:4000/submitreview",
success : function(data){
console.log("success")
$(".thirdRow").fadeOut(800, function(){
console.log("this", $(this))
$(this).html(data).fadeIn().delay(200)
})
console.log(data)
}
})
}
})
I never used EJS on the client side. Allways used with express
Here's an example of using EJS client side
https://github.com/tj/ejs/blob/master/examples/client.html
<% docs.forEach( function ( doc ){ %>
<div class="item">
<% if (doc.Active) { %>
<style> .item { background-color:red }</style>
<% } %>
</div>
<% }); %>
Imagine 3 docs,
doc1 (Active == true)
doc2 (Active == true)
doc3 (Active == false)
I want to give style to Active == true only. I coded like above, but the result is every div was given style. so finally all has red background, this is not what I expected.
How can I give style conditionally in EJS?
You would want to conditionally set a class like .active and have that with your CSS styles (such as the red background-color). Like this:
<% docs.forEach(function (doc) { %>
<div class="item <%= doc.Active ? 'active' : '' %>"></div>
<% }); %>
The syntax is:
<style> .item { background-color:red; } </style>
and to only set that to just one of the items, use:
<style>
.active { background-color:red; }
</style>
<% docs.forEach( function ( doc ){ %>
<% if (doc.Active) { %>
<div class="item acitve">
<% } else { %>
<div class="item">
<% } %>
...
</div>
<% }); %>