Write ejs variable in jQuery

Question

I am appending some html to a div using jQuery:

public/js/writeInputs.js

$("#myDiv").append("<input type='search' value='<%= filters.title %>' name='filters[title]' class='form-control'>")

In this case filters is an object that I'm passing from my node express backend, the value of which I want to display in my input. However, the above renders the ejs variable as the string literal:

<%= filters.title %>

If I hardcode this value into the html it works as expected:

views/partials/inputs.ejs

<input type="search" name="filters[title]" value="<%= filters.title %>" class="form-control">

How can I write an ejs variable in jQuery?

I've tried these approaches in my append, but none work:

value="<%= filters.title %>"
value=${<%= filters.title %>}
value='"<%= filters.title %>"'

The append happens in a js file, but the element that it appears on is an ejs template — fugu
– fugu, Commented Jun 11, 2019 at 18:49
did you remember to make sure that writeInputs.js does not get served as static asset from your public dir but instead has its own GET routing function so that your server can load in the file and respond using respond.render(...)? — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 13, 2019 at 17:45
have a look at this answer. You can declare the variable in the browser with the ejs value and it'll be available for jquery. — k0hamed
– k0hamed, Commented Jun 13, 2019 at 17:50
you're using a server to render pages using ejs syntax. Any file with ejs syntax needs to be served that way, they cannot just be put in the static/public dir and loaded directly from that file by the user. The URL request for writeInputs.js needs to go to an actual serving route (like app.get('writeInputs.js', ...) if you're using express) and you have to use ejs rendering if you want your ejs syntax to get replaced. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 13, 2019 at 18:56

Munim Munna · Accepted Answer · 2019-06-14 01:36:04Z

2

+50

Node express first renders HTML and then browser do some requests based on HTML to get scripts, images, etc. For this reason <%= filters.title %> is not interpreted by EJS.

As an alternative render some data into HTML and rewrite JavaScript to read filters.title from HTML, like this:

<input type="hidden" id="filter" value="<%= filters.title %>" />

<script src="yourScript.js"></script>

yourScript.js:

    var filter = document.getElementById("filter").value;
    $("#myDiv").append("<input type='search' value='" + filter + "' name='filters[title]' class='form-control'>");

edited Jun 14, 2019 at 1:36

Munim Munna

17.6k6 gold badges31 silver badges60 bronze badges

answered Jun 13, 2019 at 17:48

Marcelo Vismari

1,1798 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

itsundefined · Accepted Answer · 2019-06-14 01:50:10Z

1

Only ejs files inside your views folder are rendered from the server so you will have to create the variable in that file instead. Here is an example:

view.ejs

<script>
    var ejsVal = <%= val %>; // You have to use var to make it global
</script>
<script src="script.js"></script>

script.js

console.log(ejsVal);

answered Jun 14, 2019 at 1:50

itsundefined

1,4462 gold badges13 silver badges33 bronze badges

1 Comment

Ahmad ul hoq Nadim Over a year ago

You have to write your ejs syntax inside QUOTES like, "<%= val %>"

Jigar · Accepted Answer · 2019-06-13 17:48:01Z

0

can you try like this?

var temp = <%= test  %>;
$("#myDiv").append("<input type='search' value='"+temp+"' name='filters[title]' class='form-control'>");

edited Jun 13, 2019 at 17:48

answered Jun 13, 2019 at 17:41

Jigar

3,2833 gold badges36 silver badges55 bronze badges

4 Comments

fugu Over a year ago

Thanks but it still gets rendered as a string literal: "<%= filters.title %>"

Jigar Over a year ago

@fugu changed can you try this

fugu Over a year ago

But <%= test %> won't be available in my .js file

Jigar Over a year ago

Sorry put filter value there

Collectives™ on Stack Overflow

Write ejs variable in jQuery

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related