How to pass JSTL value to javascript function

Hi friend,

I am newbie in struts and also JSTL.

I would like to avoid java codes in my jsp. So, how i have to write JSTL code for the give java codes

<% ArrayList <Mainmenu> menuList = new ArrayList <Mainmenu>(); StringBuilder menuNames = new StringBuilder(); if(request.getAttribute("MenusList") != null) { menuList = (ArrayList <Mainmenu> ) request.getAttribute("MenusList"); for(Mainmenu menuPOJO : menuList){ menuNames.append(menuPOJO.getName()).append(":"); } } %> [color=red]This is my JSTL code and how to pass this value ([color=orange]names[/color]) into java script function() as indicated with bold and green color [/color][size=18] [/size] <c:forEach var="Mainmenu" items="${MenusList}" > <c:set value="${Mainmenu.name}" var="names"></c:set> </c:forEach> <script > [b][color=blue]function menuAutoSearch(){ var description = '<%=menuNames.toString() %>';[/color][/b] $(document).ready(function() { description = description.split(":"); $("#name").autocomplete(description); } ); } </script>

My requirement is when i type word on the text box this will bring matching words under neath of the text box and more less auto complete.

It urgent to my application. Your suggestion and comments are welcomes

Thanks
Saran.

Hi there, please do not add color tags and size tags (and not other tags) inside your code, it only messes up everything.

Check this:
<c:forEach var="Mainmenu" items="${MenusList}" > <c:set value="${Mainmenu.name}" var="names"></c:set> </c:forEach>
You are setting to names the name of the current element, imagine a list with three elements [A, B, C], when it finishes your variable 'names' will have value C, why do you append it in Java code and you don't do the same in JSTL?

Also "urgency" is not really taken in account in this forum.

Please read: EaseUp.

It should be something like this:

<c:forEach var="Mainmenu" items="${MenuList}"> <c:set value="${names}${Mainmenu.name}:" var="names"></c:set> </c:forEach>

Then from JavaScript code you can access it simply using EL:
var description = '${names}';

Hi,

I followed as it is what you said. But i did not get the result. I think i made the mistakes while wrote the code in <html:form> itself.

I don't know where should i write the code.

Code should be in javascript itself?

please give me idea.

Here i posted my entire code.

<%@ taglib uri = "/WEB-INF/lib/struts-html.tld" prefix = "html" %> <%@ taglib uri = "/WEB-INF/lib/struts-bean.tld" prefix = "bean" %> <%@ taglib uri = "/WEB-INF/lib/struts-logic.tld" prefix = "logic" %> <%@ taglib uri = "/WEB-INF/lib/c.tld" prefix = "c" %> <%@ page import = "java.util.*" %> <%@ page import = "com.emergys.ae.Hibernate.Menus.*"%> <script src = "js/validate.js" type = "text/javascript" > </script> <script src = "js/jquery.js" type = "text/javascript" > </script> <script src = "js/jquery.autocomplete.js" > </script> <% ArrayList <Mainmenu> menuList = new ArrayList <Mainmenu>(); StringBuilder menuNames = new StringBuilder(); if(request.getAttribute("MenusList") != null) { menuList = (ArrayList <Mainmenu> ) request.getAttribute("MenusList"); for(Mainmenu menuPOJO : menuList){ //menuNames.append(menuPOJO.getName()).append(":"); } } %> <script > function menuAutoSearch(){ //var description = '<%=menuNames.toString() %>'; var description ='${names}'; $(document).ready(function() { description = description.split(":"); $("#name").autocomplete(description); } ); } </script> <html:form action="/TitleManipulate" method="post"> Search Menu Name <html:text property="name" styleId="name" onfocus="menuAutoSearch();"></html:text> <c:forEach var="Mainmenu" items="${MenuList}"> <c:set value="${names}${Mainmenu.name}:" var="names"></c:set> </c:forEach> is it correct way to write the code here, and how i will pass it to javascript. I am struggling here. <html:submit styleClass="button" value="searchMenu" property="parameter"></html:submit> <table border="0" class="gridlist" width="100%"> <tr><td></td></tr> <tr> <th width="30"><input type="checkbox" name="all" value="yes" onClick="CheckBoxIsChecked(this.form.check_list, this.form.name, this.checked)" /></th> <th width="50">#</th> <th width="300">Name</th> <th width="100">Parent Id</th> <th width="100">Order</th> <th width="200">Status</th> <th width="200">Created By</th> </tr> <tr> <td colspan="7"> <div id="content-scroller"> <table class="gridlist" width="100%" border="0" cellpadding="0" cellspacing="0"> <c:forEach var="mainmenu" items="${MenusList}" varStatus="rowCounter"> <c:choose> <c:when test="${rowCounter.count % 2 == 0}"> <c:set var="rowStyle" scope="page" value="odd"/> </c:when> <c:otherwise> <c:set var="rowStyle" scope="page" value="even"/> </c:otherwise> </c:choose> <tr class="${rowStyle}"> <td><input type="checkbox" name="check_list" value ='<c:out value="${mainmenu.id}" />,<c:out value="${mainmenu.status}" />'> </td> <td width="45"> <c:out value="${rowCounter.count}" /> </td> <td width="315"> <c:out value="${mainmenu.name}" /> </td> <td width="100"> <c:out value="${mainmenu.parentId}" /> </td> <td width="100"> <c:out value="${mainmenu.menuOrder}" /> </td> <td width="210"> <c:out value="${mainmenu.status}" /> </td> <td width="180"> <c:out value="${mainmenu.createdBy}" /> </td> </tr> </c:forEach> </table> </div> </td> </tr> <tr> <td colspan="2"> <input type="hidden" id="selctedIds" name="selctedIds" ></td> <!-- <input type="button" value ="Print" onclick="haii()"/> --> </tr> </table> </html:form>

How do I pass a JSTL object to JavaScript? I see how to pass simple values, but when I try to pass the object so that JavaScript can do something with the object's fields, it gets a syntax error trying to handle the string version of the object.

So I have an Employee object that I want to pass to a JavaScript function and do something with it (clearly this is a bare-bones test, not a useful app).
<%@ page session="false" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <html><head /> <body> <h1>Test passing JSTL object to JavaScript</h1> <input type="checkbox" id="check" onchange="testObject(${emp})"/> ID: ${emp.id}; Name: ${emp.firstName} ${emp.lastName}; ZIP: ${emp.zip} </body> <script type="text/javascript"> function testObject( myobj) { alert ("First: "+myObj.firstName+", Last: "+myobj.lastName) } </script> </html>
When I click the checkbox the action fails with"
Employee is not defined
[Break On This Error] testObject(Employee[id = 1, fi... John, lastName = Doe, zip = 12345]);

Depending on what I have in the Employee.toString, I have also seen:
missing ] in index expression

Clearly the function is receiving emp.toString, not emp, the Employee object. How can you instead pass the object to the JS function?

The object is on the server and only exists while the JSP is used to create the HTML page that is sent to the browser. You can see what's being sent to the browser, where JavaScript is evaluated, by doing a View Source.

In other words. the question "how can I pass a Java object to a JavaScript function?" is completely impossible. Please read this article to understand what JSP is and how it operates.

If you need the full object on the client, you'll need to recreate it by using the JSP to create the JavaScript markup that recreates the data for the object. The original object itself cannot be "passed" to the client.

Thanks, Bear. I appreciate the reminder that JSP is used only for building the page, not scripting its operation. I knew that but lost my way as I got excited about the JSTL magic. I guess I if I really need the whole object, I would need to build a parser, like something that would let me construct a JavaScript object from the Java/JSP toString (but I'm not sure I need it that bad!). Much thanks for setting me straight!

Check out JSON. It's a format that is easily digestible in JavaScript and there are lots of libraries to serialize Java objects as JSON.