CODEWITHSUNDEEP
javajavascriptjqueryjspjstl
nahid
nahid

Reputation: 407

JSTL inside jQuery or JavaScript

I want to pass array elements from Java code into jsp page so that if I click the button it will show the array elements in the page.

I tried to use JSTL forEach tag inside JavaScript or jQuery but it doesn't work and I don't get any error when I run the program!

.jsp page joining jQuery and JSTL

<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<stripes:submit name="showData" value="Show" id="button"></stripes:submit>

<script>
    $(document).ready(function() {
        $("button").button().click(function(){
            <c:forEach var="array" items="${actionBean.myArray }">
                <c:out value="${array }"></c:out>
            </c:forEach>
        });
    });
</script>

.jsp page joingin JS and JSTL

<stripes:submit name="showData" value="Show" onClick="myFunc"></stripes:submit>

<c:set var="newVar">
    <c:forEach var="array" items="${actionBean.myArray }">
        <c:out value="${array }"></c:out>
    </c:forEach>
</c:set>

<script type="text/javascript">
    var my_js_data = <c:out value="${newVar}"/>
    function myFunc() {
        return my_js_data;
    }
</script>

Upvotes: 1

Views: 10500

Answers (3)

Master Slave
Master Slave

Reputation: 28539

mplungjans solution is complete and should be the accept answer. VPK and Matthew Werny tell you what are the issue with your current code.

As VPK indicated you're not properly assigning array value to JSTL variable, though, his proposal will assign only the latest value, following should concatenate all

<c:forEach items="${actionBean.myArray}" var="array" varStatus="stat">
  <c:set var="newVar" value="${stat.first ? '' : newVar} ${array}" />
</c:forEach>

than as Matthew mentioned, JSTL is processed server side, and if e.g. your array holds only one value test you end up with

var my_js_data = test

while instead you wanted

var my_js_data = 'test';

Your complete solution is to either go for what mplungjans said, or do 

<c:forEach items="${actionBean.myArray}" var="array" varStatus="stat">
  <c:set var="newVar" value="${stat.first ? '' : newVar} ${array}" />
</c:forEach>
<script type="text/javascript">
    var my_js_data = '<c:out value="${newVar}"/>';
    function myFunc() {
        return my_js_data;
    }
</script>

note the commas around <c:out value="${newVar}"/>

Upvotes: 1

mplungjan
mplungjan

Reputation: 178094

Do you mean

var arr = [];
<c:forEach var="array" items="${actionBean.myArray }">
arr.push("<c:out value="${array }"></c:out>");
</c:forEach>

$(document).ready(function() {
  $("#button").click(function(){
    $("#somecontainer").html(arr.join("<br/>"));
  });
});

Upvotes: 2

Matthew Werny
Matthew Werny

Reputation: 59

The JSP renders server side and the browser takes that output and parses and runs the Javascript. You will want to view source on your page output to make sure that what is being output is valid Javascript. As currently shown it is unlikely that it would be.

Upvotes: 1

Related Questions