How to render ejs variable as HTML using <script> - javascript

I'm making a simple blog project and I came up to this problem.
I'm using EJS and I'm trying to render variable as HTML using tag
What I tried:
<div class="container-fluid">
<script>
document.write(<%= content %>)
</script>
</div>
I thought this would work but it doesn't show
anything at all, if I type <p><%= content %></p> it shows it as words, not HTML.

Related

Use ejs or header and footer templates for static hosting with github pages?

I have around 10 html documents that only differ due to one div. Is there any way to make a header and footer document, and link them together for each html document? I have used EJS in the past, so I would prefer using it. I am using github pages to host my site, so I cannot use any backend.
Yup! These are called partials in EJS, and you insert them with an include function:
<%- include('header') %>
<!-- Main content -->
<%- include('footer') %>
EJS will look for them in the local directory. Any parameters you passed into app.render in your Express route are passed down to partials too.
If you need to re-use partials on the same page with unique data, you can pass them a data object too:
<% msgs.forEach((msg) => { %>
<%- include('msgPartial', { msg: msg }) %>
<% }) %>

Use ejs template name inside template itself

I am using ejs templates to generate some contents inside different divs.
let's say it looks kind of like this:
<% include test1 %>
<% include test2 %>
<% include test3 %>
and in each of these templates, I would like to know what template I'm in automatically. for example, let's say I'm in "templatei.ejs" file (where i is the index of the ith template). now is there any way for me to know the template name inside it?
this is how each template file looks:
<div>
<h2>header info</h2>
<p>some text comes here</p>
<a href="/<% this.fileName() %>">now I want this url to be a link to a seperate page that only loads one template<a>
</div>
this.fileName() will not work it was just to express what I mean.
I actually want to add a link to a separate page for each of my divs.
the reason I don't use javascript to generate urls is that I want
crawlers to find it and I dont think a crawler would scrape the page
after js changes.
send the filename (which you want to render) in include statement.
<%- include('test1', {filename: 'data'}) %>
inside test1 ejs
<div>
<h2>header info</h2>
<p>some text comes here</p>
<a href="/<% filename %>"><a>
</div>

Ruby on Rails: Pulling HTML string of specific element from within controller

If I have a view that is rendered with the following element:
View
<div id="content">
<!-- More HTML -->
</div>
In my controller, is there such a method where I could retrieve the HTML string of a specific element using its id? For example, it might look something like:
def myview
contentString = get_html_element_string("content")
...
end
where contentString would contain the value <div id="content"> <!-- More HTML --> </div> as a string.
I understand you can fetch the HTML of the whole rendered page using render_to_string, but I'd rather not parse through that.
It's not really possible to access the rendered content after the fact in the controller.
I would recommend creating a helper function to create the content that goes inside the content div. Then call the helper in the myview if you need it there.
The following post gives some options for calling a helper within a controller:
Rails - How to use a Helper Inside a Controller
I actually ended up putting the HTML I need within a partial and rendering it from within the controller (and again later in my view using <%= render partial: "content_partial" %>).
_content_partial.html.erb
<div id="content">
<!-- More HTML -->
<%= #my_value.function %>
</div>
And within my controller:
def myview
contentString = render_to_string(:partial => 'content_partial', :layout => false, :locals => {:my_object => #my_value})
...
end

How to render html into a page but not as the entire view into an Node.js + express app?

Intent
I need to render portion of hmtl into a page.
Problem
The page is being rendered without styling or layout.
I have a page that I need to be in plain html and not jade. But will still be using jade elsewhere.
I followed along to a similar question and that works to direct to an html page. BUT the styles and layout if not being passed in.
My previous page was cases.jade and started like this
extends layout
block content
.row
.twelve.columns
h1 title
Now my new page is cases.html and starts like this
<div class="row">
<div class="twelve columns">
<h1>Before & After Case Gallery</h1>
and is routed to like this
app.get('/cases', function (req, res)
{
res.render('cases.html');
});
and has this above it
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
It seems like in your jade file, you're extending the layout page, so you include all your layout info. But in the HTML version you aren't importing any of the layout information.
I see you're using ejs. Check out layouts, to see what to put into your template:
<% include head %>
<h1>Title</h1>
<p>My page</p>
<% include foot %>
Here you'll want to do something like <%include layout %>, with your layout page stuff in layout.html. The include line will basically copy-paste the file's content into that spot.

rendering a html.erb in rails with javascript

I create a page and some parts of it are layout files that are rendered. However I want to render one of these rendered part again with javascript code.
I want to render these part again
<div id="dialog" title="Bookmark Folders" style="resize: both;">
<%=render "layouts/filetree.html.erb"%>
</div>
It render function creates this:
<div id="accordion">
<% #user.folders.each do |f| %> <h3 id="<%= f.folder_name%>" class="folderBar"><b id="folderName"><%= f.folder_name%></b> created <%=distance_of_time_in_words(f.created_at, Time.now)%> before</h3>
<div class="<%= f.folder_name.delete(" ")%>">
<%if f.docs.empty?%>
<b>-No document currently!-</b>
<%else%>
<% f.docs.each do |r|%>
<%= r.title%><br/>
<b><%=r.url%></b><br />
<%= r.snippet%><hr/>
<%end%>
<%end%>
</div>
<%end%>
</div>
Because after some execution there are some changes over "folders", I want to render this part again to see the update.
You shouldn't attempt to render erb with javascript - it's not how it's done (not to mention you'd have to write yourself a erb parser and eventually call the server for data anyway).
If on the other hand, you're asking how to issue the render of some template using Javasript and then replace old content with new one then...
Watch this http://railscasts.com/episodes/205-unobtrusive-javascript,
read this Rails 3 and RJS to get the idea of how to trigger some content updates via javascript.
General idea is
Render the initial full page
Trigger ajax call (either after some time or by manual user request) to do a request to your rails application
Handle that request and respond to it with javascript script (the script content should contain all the functionality and content to replace what you want)
It's possible to share templates between the server and the client. One library that allows for this is called mustache.
But if this is the only case you need it I'd go with the RJS approach as well.
Instead of rendering I did it AJAX way and update it on the page. Thanks for the answers but I did not use any of these.

Categories

Resources