I have the following scenario
<select name="dropdown_Source" onchange="call()">
<% for (int i=0 ; i < a1.length; i++) { if (a1[i]==n ull) break; %>
<option value="<%=a1[i]%>">
<%=a1[i]%>
</option>
<% } %>
</select>
<script>
function call() {
var source = document.forms[0].dropdown_source.value;
// Now this 'source' value i have to pass to jsp function
<%
Admin a = new Admin(); //this is class defined
a.getResult(source); //but source is not resolved here
%>
}
</script>
How this source value should I pass in JSP function?
a.getResult() - function will return me list of dropdown elements and that list
I have to populate in another <option> tag.
You cannot do that. JavaScript executes on the client side after JSP page is already compiled and sent to the browser as response.
You can not mix javascript and java code. when you do
<%
Admin a = new Admin(); //this is class defined
a.getResult(source); //but source is not resolved here
%>
This means that code snippet will be processed at server side as this is plain java code.Now variable "source" is not java variable but a javascript variable which will come into picture when your html page loads on browser. So its a compilation error.
The best thing to do here is, once the javascript executes, take that source value and make an AJAX call to your server, process it and send the values back to the client and then populate your dropdown.
Related
I'm working on a Node.js app (it's a game). In this case, I have some code set up such that when a person visits the index and chooses a room, he gets redirected to the proper room.
Right now, it's being done like this with Express v2.5.8:
server.get("/room/:name/:roomId, function (req, res) {
game = ~databaseLookup~
res.render("board", { gameState : game.gameState });
}
Over in board.ejs I can access the gameState manner with code like this:
<% if (gameState) { %>
<h2>I have a game state!</h2>
<% } %>
Is there a way for me to import this into my JavaScript logic? I want to be able to do something like var gs = ~import ejs gameState~ and then be able to do whatever I want with it--access its variables, print it out to console for verification. Eventually, what I want to do with this gameState is to display the board properly, and to do that I'll need to do things like access the positions of the pieces and then display them properly on the screen.
Thanks!
You could directly inject the gameState variable into javascript on the page.
<% if (gameState) { %>
<h2>I have a game state!</h2>
<script>
var clientGameState = <%= gameState %>
</script>
<% } %>
Another option might be to make an AJAX call back to the server once the page has already loaded, return the gameState JSON, and set clientGameState to the JSON response.
You may also be interested in this: How can I share code between Node.js and the browser?
I had the same problem. I needed to use the data not for just rendering the page, but in my js script. Because the page is just string when rendered, you have to turn the data in a string, then parse it again in js. In my case my data was a JSON array, so:
<script>
var test = '<%- JSON.stringify(sampleJsonData) %>'; // test is now a valid js object
</script>
Single quotes are there to not be mixed with double-quotes of stringify. Also from ejs docs:
"<%- Outputs the unescaped value into the template"
The same can be done for arrays. Just concat the array then split again.
I feel that the below logic is better and it worked for me.
Assume the variable passed to the ejs page is uid, you can have the contents of the div tag or a h tag with the variable passed. You can access the contents of the div or h tag in the script and assign it to a variable.
code sample below : (in ejs)
<script type="text/javascript">
$(document).ready(function() {
var x = $("#uid").html();
alert(x); // now JS variable 'x' has the uid that's passed from the node backend.
});
</script>
<h2 style="display:none;" id="uid"><%=uid %></h2>
In the EJS template:
ex:- testing.ejs
<html>
<!-- content -->
<script>
// stringify the data passed from router to ejs (within the EJS template only)
var parsed_data = <%- JSON.stringify(data) %>
</script>
</html>
In the Server side script:
ex: Router.js
res.render('/testing', {
data: data // any data to be passed to ejs template
});
In the linked js (or jquery) script file:
ex:- script.js
In JavaScript:
console.log(parsed_data)
In JQuery:
$(document).ready(function(){
console.log(parsed_data)
});
Note:
1. user - instead of = in <% %> tag
2. you can't declare or use data passed from router to view directly into the linked javascript or jquery script file directly.
3. declare the <% %> in the EJS template only and use it any linked script file.
I'm not sure but I've found it to be the best practice to use passed data from router to view in a script file or script tag.
This works for me.
// bar chart data
var label = '<%- JSON.stringify(bowlers) %>';
var dataset = '<%- JSON.stringify(data) %>';
var barData = {
labels: JSON.parse(label),
datasets: JSON.parse(dataset)
}
You can assign backend js to front end ejs by making the backend js as a string.
<script>
var testVar = '<%= backEnd_Var%>';
</script>
This should work
res.render("board", { gameState : game.gameState });
in frontend js
const gameState = '<%- JSON.stringify(gameState) %>'
Well, in this case you can simply use input text to get data. It is easy and tested when you use it in firebase.
<input type="text" id="getID" style="display: none" value="<%=id%>">
I know this was answered a long time ago but thought I would add to it since I ran into a similar issue that required a different solution.
Essentially I was trying to access an EJS variable that was an array of JSON objects through javascript logic like so:
<script>
// obj is the ejs variable that contains JSON objects from the backend
var data = '<%= obj %>';
</script>
When I would then try and use forEach() on data I would get errors, which was because '<%= obj %>' provides a string, not an object.
To solve this:
<script>
var data = <%- obj %>;
</script>
After removing the string wrapping and changing to <%- (so as to not escape html going to the buffer) I could access the object and loop through it using forEach()
Suppose you are sending user data from the node server.
app.get("/home",isLoggedIn,(req,res)=>{
res.locals.pageTitle="Home"
res.locals.user=req.user
res.render("home.ejs");
})
And now you can use the 'user' variable in the ejs template. But to use the same value using client-side javascipt. You will have to pass the data to a variable in the tag.
Passing ejs variable to client-side variable:
<script>
let user= '<%- JSON.stringify(user) %>';
</script>
<script>home.js</script>
Now you can access the user variable at home.js
I have a model as List<Collaborateur> coming from my Controller Action to my JSP. And I have the following function in JQuery/Javascript:
function showCollaborateurEmail(index) {
alert("${collaborateurs[1].email}"); // Works
alert("${collaborateurs[2].email}"); // Works
//....
alert("${collaborateurs[index].email}"); // Not working
}
So I want to show the email of my Collaborateur model dynamically by calling the function showCollaborateurEmail(index).
Thank you for your help!
The problem that you face is the exchange of data between code on server side and code on client side. There are multiple ways to achieve your goal. You can...
store the list-elements in a hidden form-field (escaping of delimiter might be a challenge) or
generate javascript - code on server side in JSP that creates a javascript array with the list-elements or
use ajax.
1 and 2 are rather ad hoc - solutions for a small problem. 3 is rather a bigger solution (depending on your technical environment) which additionally provides the possibility to avoid page reloads.
Two approaches to explore:
1) generate a javascript array with all the elements of the list, and access the at will on the client side (javascript)
2) access the "collaborateurs" via an ajax request
I would not recommend to mix server and client code like this through jsp.
Instead you should create a servlet and call what you need with ajax.
If you want to use a dirty/quick trick I think you can build back the array from the server side to the client side inside a <script> tag
For example:
<script>
var emailArray = [
<%for (int i = 0; i > collaborateurs.length; i++){ %>
"<%=collaborateurs[i].email %>"
<%
if(i < collaborateurs.length - 1){
%>, <%
}
}%>
];
</script>
(I wrote this by hand so I'm not sure the syntax is correct, but I hope you got the idea)
One more option you will have is converting your List object to json and then set it to a variable in jsp while compiling phase and the on client side parse json and make an object and iterate over it. This way you can access your list even after loading your page also.
You can use API like gson,Jackson etc.
Example :-
List<Object> list1=new ArrayList<>();
// Add values to list here
JSONArray obj=new JSONArray(list1);
In JSP :
var collaborateursList=${collaborateurs};
function showCollaborateurEmail(index) {
alert(collaborateursList[1].email);
alert(collaborateursList[2].email);
alert("collaborateursList[index].email);
}
Please verify the index is passing correctly to the function and try using this
alert("${collaborateurs[" + index + "].email}");
I've been looking into how to use a javascript variable within erb <% %> tags. This will have to be done via AJAX (see How to pass a javascript variable into a erb code in a js view?). I'm quite new to JS and especially new to AJAX and finding an example of this in action would be awesome.
Consider the following simple scenario where all that is needed to be passed from the JS to the ERB is a simple bit of text:
HTML:
<input id="example-input" type="text">
$(function() {
$('input#example-input').keyup(function(e) {
if(e.keyCode == 13){
var input = $('input#example-input').val();
<% puts input.upcase %>
}
}
});
Notice that the input will not be defined within the erb tags, and hence this will throw an error.
I believe you're assuming that the line <% puts input.upcase %> will execute ruby code after your javascript line var input = $('input#example-input').val();. If that is what you were thinking, this is incorrect. In the example you've given:
The <% puts input.upcase %> gets executed when the page loads.
input in <% puts input.upcase %> is a ruby variable
input in var input = $('input#example-input').val(); is a javascript variable
If you had a variable that you set on the server side, you could say something like this in your javascript:
var my_js_var = '<%= a_str_in_ruby %>';
and that would work fine for intializing a variable on the javascript side.
However since you want to request data from the client side (aka javascript) to your server side (to be handled by rails controller), what you should be doing is submitting an ajax request. There's a section in the rails documentation that contains examples, and a good railscasts episode (if you're a paying member).
How to set the JSTL variable value in java script?
<script>
function function1()
{
var val1 = document.getElementById('userName').value;
<c:set var="user" value=""/> // how do i set val1 here?
}
</script>
How do I set the 'user' variable (JSTL) value from 'val1' (Java script)?
It is not possible because they are executed in different environments (JSP at server side, JavaScript at client side). So they are not executed in the sequence you see in your code.
var val1 = document.getElementById('userName').value;
<c:set var="user" value=""/> // how do i set val1 here?
Here JSTL code is executed at server side and the server sees the JavaScript/Html codes as simple texts. The generated contents from JSTL code (if any) will be rendered in the resulting HTML along with your other JavaScript/HTML codes. Now the browser renders HTML along with executing the Javascript codes. Now remember there is no JSTL code available for the browser.
Now for example,
<script type="text/javascript">
<c:set var="message" value="Hello"/>
var message = '<c:out value="${message}"/>';
</script>
Now for the browser, this content is rendered,
<script type="text/javascript">
var message = 'Hello';
</script>
Hope this helps.
one more approach to use.
first, define the following somewhere on the page:
<div id="valueHolderId">${someValue}</div>
then in JS, just do something similar to
var someValue = $('#valueHolderId').html();
it works great for the cases when all scripts are inside .js files and obviously there is no jstl available
<script ...
function(){
var someJsVar = "<c:out value='${someJstLVarFromBackend}'/>";
}
</script>
This works even if you dont have a hidden/non-hidden input field set somewhere in the jsp.
Just don't. Don't write code with code. Write a JSON object or a var somewhere but for the love of a sensible HTTP divide, don't write JavaScript functions or methods hardcoded with vars/properties provided by JSTL. Generating JSON is cool. It ends there or your UI dev hates you.
Imagine if you had to dig into JavaScript to find something that was setting parameters in the middle of a class that originated on the client-side. It's awful. Pass data back and forth. Handle the data. But don't try to generate actual code.
You have to use the normal string concatenation but you have to make sure the value is a Valid XML string, you will find a good practice to write XML in this source http://oreilly.com/pub/h/2127, or if you like you can use an API in javascript to write XML as helma for example.
This variable can be set using value="${val1}" inside c:set if you have used jquery in your system.
As an answer I say No. You can only get values from jstl to javascript. But u can display the user name using javascript itself.
Best ways are here.
To display user name,
if u have html like
<div id="uName"></div>
You can display user name as follows.
var val1 = document.getElementById('userName').value;
document.getElementById('uName').innerHTML = val1;
To get data from jstl to your javascript :
var userName = '<c:out value="${user}"/>';
here ${user} is the data you get as response(from backend).
Asigning number/array length
var arrayLength = <c:out value="${details.size()}"/>;
Advanced
function advanced(){
var values = new Array();
<c:if test="${empty details.users}">
values.push("No user found");
</c:if>
<c:if test="${!empty details.users}">
<c:forEach var="user" items="${details.users}" varStatus="stat">
values.push("${user.name}");
</c:forEach>
</:c:if>
alert("values[0] "+values[0]);
});
You can save the whole jstl object as a Javascript object by converting the whole object to json. It is possible by Jackson in java.
import com.fasterxml.jackson.databind.ObjectMapper;
public class JsonUtil{
public static String toJsonString(Object obj){
ObjectMapper objectMapper = ...; // jackson object mapper
return objectMapper.writeValueAsString(obj);
}
}
/WEB-INF/tags/util-functions.tld:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
version="2.1">
<tlib-version>1.0</tlib-version>
<uri>http://www.your.url/util-functions</uri>
<function>
<name>toJsonString</name>
<function-class>your.package.JsonUtil</function-class>
<function-signature>java.lang.String toJsonString(java.lang.Object)</function-signature>
</function>
</taglib>
web.xml
<jsp-config>
<tablib>
<taglib-uri>http://www.your.url/util-functions</taglib-uri>
<taglib-location>/WEB-INF/tags/util-functions.tld</taglib-location>
</taglib>
</jsp-confi>
mypage.jsp:
<%# taglib prefix="uf" uri="http://www.your.url/util-functions" %>
<script>
var myJavaScriptObject = JSON.parse('${uf:toJsonString(myJstlObject)}');
</script>
How to set the JSTL variable value in java script?
<script>
function function1()
{
var val1 = document.getElementById('userName').value;
<c:set var="user" value=""/> // how do i set val1 here?
}
</script>
How do I set the 'user' variable (JSTL) value from 'val1' (Java script)?
It is not possible because they are executed in different environments (JSP at server side, JavaScript at client side). So they are not executed in the sequence you see in your code.
var val1 = document.getElementById('userName').value;
<c:set var="user" value=""/> // how do i set val1 here?
Here JSTL code is executed at server side and the server sees the JavaScript/Html codes as simple texts. The generated contents from JSTL code (if any) will be rendered in the resulting HTML along with your other JavaScript/HTML codes. Now the browser renders HTML along with executing the Javascript codes. Now remember there is no JSTL code available for the browser.
Now for example,
<script type="text/javascript">
<c:set var="message" value="Hello"/>
var message = '<c:out value="${message}"/>';
</script>
Now for the browser, this content is rendered,
<script type="text/javascript">
var message = 'Hello';
</script>
Hope this helps.
one more approach to use.
first, define the following somewhere on the page:
<div id="valueHolderId">${someValue}</div>
then in JS, just do something similar to
var someValue = $('#valueHolderId').html();
it works great for the cases when all scripts are inside .js files and obviously there is no jstl available
<script ...
function(){
var someJsVar = "<c:out value='${someJstLVarFromBackend}'/>";
}
</script>
This works even if you dont have a hidden/non-hidden input field set somewhere in the jsp.
Just don't. Don't write code with code. Write a JSON object or a var somewhere but for the love of a sensible HTTP divide, don't write JavaScript functions or methods hardcoded with vars/properties provided by JSTL. Generating JSON is cool. It ends there or your UI dev hates you.
Imagine if you had to dig into JavaScript to find something that was setting parameters in the middle of a class that originated on the client-side. It's awful. Pass data back and forth. Handle the data. But don't try to generate actual code.
You have to use the normal string concatenation but you have to make sure the value is a Valid XML string, you will find a good practice to write XML in this source http://oreilly.com/pub/h/2127, or if you like you can use an API in javascript to write XML as helma for example.
This variable can be set using value="${val1}" inside c:set if you have used jquery in your system.
As an answer I say No. You can only get values from jstl to javascript. But u can display the user name using javascript itself.
Best ways are here.
To display user name,
if u have html like
<div id="uName"></div>
You can display user name as follows.
var val1 = document.getElementById('userName').value;
document.getElementById('uName').innerHTML = val1;
To get data from jstl to your javascript :
var userName = '<c:out value="${user}"/>';
here ${user} is the data you get as response(from backend).
Asigning number/array length
var arrayLength = <c:out value="${details.size()}"/>;
Advanced
function advanced(){
var values = new Array();
<c:if test="${empty details.users}">
values.push("No user found");
</c:if>
<c:if test="${!empty details.users}">
<c:forEach var="user" items="${details.users}" varStatus="stat">
values.push("${user.name}");
</c:forEach>
</:c:if>
alert("values[0] "+values[0]);
});
You can save the whole jstl object as a Javascript object by converting the whole object to json. It is possible by Jackson in java.
import com.fasterxml.jackson.databind.ObjectMapper;
public class JsonUtil{
public static String toJsonString(Object obj){
ObjectMapper objectMapper = ...; // jackson object mapper
return objectMapper.writeValueAsString(obj);
}
}
/WEB-INF/tags/util-functions.tld:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
version="2.1">
<tlib-version>1.0</tlib-version>
<uri>http://www.your.url/util-functions</uri>
<function>
<name>toJsonString</name>
<function-class>your.package.JsonUtil</function-class>
<function-signature>java.lang.String toJsonString(java.lang.Object)</function-signature>
</function>
</taglib>
web.xml
<jsp-config>
<tablib>
<taglib-uri>http://www.your.url/util-functions</taglib-uri>
<taglib-location>/WEB-INF/tags/util-functions.tld</taglib-location>
</taglib>
</jsp-confi>
mypage.jsp:
<%# taglib prefix="uf" uri="http://www.your.url/util-functions" %>
<script>
var myJavaScriptObject = JSON.parse('${uf:toJsonString(myJstlObject)}');
</script>