I need help for connect js functions with ejs file - javascript

I wonder how I can insert JS functions into an EJS file?
I have this function:enter image description here
I tried to create a separate .ejs file where I will insert a function between the tags <% %> and also import it into the ЕЈS file that I need, but it doesn't work for me

EJS does not provide a DOM. Output from EJS is generated using <%= and similar.
The document object is only (that's a slight simplification) available in JS running in an HTML document in the browser.
To use that code you would need to include it in a <script> element output from the EJS into an HTML document and run in a browser.

Related

How to put script file in the head of view using EJS

I included layout to my view and also i need to make JS script to load for this view directly in the head. How to do that ?
// view file
<%- layout('/layout/boilerplate.ejs') %>
<script>
// want to load script in the HEAD of my boilerplate file.
</script>
I tried to add head tag and expected it to combined with head in boiler plate but didn`t. Do not want to add to boilerplate because it be downloaded for every route then.
There are a few steps that needs to be followed.
Put your JS files in the /public folder of your project.
Configure the Node server to serve your Static files.
Use a script tag to reference your JS in your ejs file
Hope this will be helpful.
Cheers!!

How do relative paths to ejs templates work?

I am trying to render some ejs. I'm not using any frameworks. So right now I have an ejs navigation bar template and a template for a random other site (in this example it is just a form).
My directory:
root
rendered (cache for already rendered sites)
sites (ejs templates for sites)
form.ejs
test.ejs (template I am trying to insert into form.ejs)
templates (ejs templates for reusable stuff like the nav-bar)
bar.ejs
server.js (logic for the server: including rendering of ejs)
So now comes the actual question: How do I reference an other ejs template in an ejs template? The docs say:
%- include('user/show') %>
Includes ./user/show.ejs into the template (As I understood it relative to the current ejs file if no absolute path is given)
<% include user/show %>
is not supported after v3.0, but would have done (almost) the same.
So now I thought I could just do
<%- include('test') %>
in my form.ejs, but it throws an error:
Could not find the include file "test.ejs"
So I wondered what was going on and included the absolute Path to the file and voila it works.
I was curious so i included
<%- process.cwd(); %>
into form.ejs and that return the root directory probably because it is being executed from server.js.
So now the question is: How do I get relative paths? Do I have to create a variable at runtime with the root directory and add that to my include paths like this? (even this wouldn't be relative)
const root = process.cwd(); //inside server.js
<%- include(root+'/sites/test.ejs') %>
This seems inelegant. What am I missing? Thanks for your help.
Ok I'm guilty of RTFM: It didn't work before, because i had to set the views option in my ejs.render(str, data, options). With
ejs.render(contents.toString(),null,{views:["./sites"]}); //in server.js
<%- include('test') %> // in form.ejs ('test.ejs' works as well)
It now renders, but still, the path is relative to the one set in views.
Ok that's a workaround and after digging a bit more i found this line from the docs literally a line after what i originally posted:
You must specify the filename option for the template with the
include call unless you are using renderFile().
renderFile() is asynchronous, so that wouldn't work for me. So finally the solution is to modify my original ejs.render function:
html = ejs.render(contents.toString(),null,{filename: ejspath}); //ejspath being the path to the ejs file to render
//contents is the contents of the ejs file
This Method works with paths like ../templates.bar inside of form.ejs

share one or more variables to ejs file

I want to pass only one variable from a js file to ejs file.
I know about app.locals.Variable and about using <% include (./app.js) %> in the ejs file.
But , I don't want to include the whole app.js , only the specific one or more variables.
If using Express?
res.render('ejsfile', {
variable_for_ejs: source_of_variable
});

Will an .html file recognize .NET scriptlets or does it have to be convert to an aspx

I believe that I'm trying something that is not possible, but wanted to make sure. I'm trying to set a JavaScript variable inside of an html page. The index.html page to be specific.
I'm doing this:
<script type="text/javascript"> var theLimit = '<%=ConfigurationManager.AppSettings["TheLimit"]%>'</script>
Will it be recognized in an html file, or does it need to be converted to an aspx file?
HTML will not process the server-side command "<%", so you will have to change the page to a format that will process it, such as .aspx (not .ashx).

JQuery not working when referred from external file in Grails

I have to dynamically load a set of values based on value I chose in another drop down.
In a controller I have the following code,
def ajaxGetCities(params){
println params.id
def userCustPlantDetails = utilitySummaryService.fetchUserCustPlantDetails('PHILL00')
def data = []
userCustPlantDetails?.get('UserPlantList').collect{
data << it.pwr_plt_nme
}
[data: data]
}
In a GSP I have :
<g:select class="btn btn-default" name="viewValue" from="${view}" onchange="${remoteFunction(
action:'ajaxGetCities',
params:'\'id=\' + escape(this.value)',
onSuccess :'updateCity(data)')}"></g:select>
When I change the value of dropdown, I see the trigger and controller action is called. Post that Javascript(JQuery) updateCity is working perfectly. I have the script under in the same .gsp file. If I move this script to a external file in the proj folder ( under assets/javascript) . The page is not rendered properly. I mean few components are not rendered. I placed the external file reference just before the tag also tried putting before all the contents of the GSP. Without the mentioned javascript above all other scripts in the file run great wherever the refer the file. When i move the javascript from GSP to index.js. This problem is occuring.
That's not JavaScript. It's a Grails GSP expression using a taglib and Groovy code. It generates JavaScript at runtime which gets written to the HTML sent to the browser, and that's why it works when it's in the GSP. But there is no processing of .js files to look for GSP expressions, taglib calls, Groovy code, etc. - those files are assumed to be just static JavaScript.
To use this in a .js file you need to get the generated JavaScript code, and this is available from your browser - view the source of the generated page to see it.

Categories

Resources