Closed CaedenPH closed 2 years ago
I can't quite understand what you're trying to do here. Are you running EJS on your server, or in the browser?
I can't quite understand what you're trying to do here. Are you running EJS on your server, or in the browser?
I am running express on the node server and rendering ejs files. The code shown is inside the ejs rendered files. Apologies for the miscommunication
If you're running EJS on your server, there's no need to be using any client-side JS like document.getElementById
. Just render HTML using EJS — that's what it's for. Looks like that's what you're doing in your first example. (Although the Object.keys
seems redundant. You could just use for (k in info) {
to iterate over the keys. (As long as you don't don't do weird shit like delete/reinsert, or use numeric keys, it's deterministic.)
I'm not sure what you mean about local state being preserved. Are you doing a hard refresh?
If you're running EJS on your server, there's no need to be using any client-side JS like
document.getElementById
. Just render HTML using EJS — that's what it's for. Looks like that's what you're doing in your first example. (Although theObject.keys
seems redundant. You could just usefor (k in info) {
to iterate over the keys. (As long as you don't don't do weird shit like delete/reinsert, or use numeric keys, it's deterministic.)I'm not sure what you mean about local state being preserved. Are you doing a hard refresh?
I mean that when I reload the text input value does not return to <% info[i] %>
. This is a html thing where if you edit the value it stays there even through a page reload. However, I need to make it so that on a reload the text input value will return to the value specified.
https://jsfiddle.net/ozfapyw1/ Here is an example of what I mean when I say the original value is lost. If you change the value to "e" and reload, the value does not return to "". Hope this makes sense
I have found a solution which is probably not the most ideal but it works.
<% for (var i = 1; i < Object.keys(info).length; i++) { %>
<% let x = Object.keys(info)[i]; %>
<label for=<% x %>><%= x %></label>
<input type="text" id="<%= x %>" value="<%= info[x] %>"><br>
<% } %>
This renders the inputs and the values on the input, and in the javascript of that page I added
document.getElementById("form").reset();
This means that the form is reset to the values passed into the html.
Thank you
Given that the persistence of client-side state is a browser issue, and not an EJS issue, it seems like your solution is actually the optimal one.
I am trying to render a form-like template as shown below.![image](https://user-images.githubusercontent.com/23421705/174096483-95a8d42b-5da3-41ae-ae51-29d940ad2dc2.png)
This method below works fine, however it is very manual which is not ideal for the form that I will be creating which will have many more text inputs.
I have tried 2 methods to automate my problem:
This works except for the fact that when I reload the page the local state is preserved and the value of the text input does not return back to
info[x]
.My other method was to loop through through each text input and apply the value as such;
However the problem with this is that
<% info[${i}] %>
does not format thei
into the template literal, but instead raisesSyntaxError: Unexpected token '{'
.I have read multiple issues similiar to this however none of them seemed to help. Does anyone have any ideas how I might be able to achieve an automated text input with value of the ejs variables without manually writing out each value?