passing a jstl list to a javascript function under onclick event

Question

as the title says. I got an object gotten from the Controller, on which one of its attributes is a List. Now i want to pass this List to an external file javascript function.

Something like this:

<a href="#" onClick="showAuthorityOverlay(<c:out value='${userDetail.grantedAuthorityList}'/>)">[SHOW AUTHORITY]</a>

Now the value passed to the javascript is something like this:

[ADMIN_USER, COMMON_USER]

So when i click in that link, i get a javascript error saying:

ADMIN_USER isn't defined.

What's wrong here? is it taking the ADMIN_USER and COMMON_USER as variable names? or what? Kinda weird.

Tried even making an inner script in my jsp to get the list like this:

<script type="text/javascript>
    function showAuthorityOverlay() {
          var obj = "<c:out value='${userDetail.grantedAuthorityList}'/>";
          sendToExternalJSFile(obj);
    }
</script>

But still getting the same results. Looks like the values aren't passing correctly through as a List parameter.

The generated JavaScript will look like showAuthorityOverlay([ADMIN_USER, COMMON_USER]). Is this right, or maybe should be showAuthorityOverlay('[ADMIN_USER, COMMON_USER]')? — Luiggi Mendoza
– Luiggi Mendoza, Commented Apr 10, 2013 at 15:04
Yeah but how can I achieve that? Tried but is hard because of the quotes. <a href="#" onClick="<c:out value=\'${userDetail.grantedAuthorityList}\'/>">[SHOW AUTHORITY]</a> — msqar
– msqar, Commented Apr 10, 2013 at 15:17
You can do it at server side appending the ' when building the String or using an EL function to add the ' symbol from that input. I would recommend changing this at server side. — Luiggi Mendoza
– Luiggi Mendoza, Commented Apr 10, 2013 at 15:21

JB Nizet · Accepted Answer · 2013-04-10 15:13:30Z

4

JSTL code is executed at server-side. In this case, instead of being used to generate HTML, it's also being used to generate JavaScript code (which is perfectly valid).

The toString() method of your list, which <c:out> calls, returns the toString representation of every Java object in the list, separates them by commas, and surrounds them with brackets. The end result being

[ADMIN_USER, COMMON_USER]

The generate HTML + JavaScript is then downloaded by the browser, which interprets the JavaScript code:

showAuthorityOverlay([ADMIN_USER, COMMON_USER]);

This happens (by accident) to be syntaxically correct JavaScript code. It means: call the function showAuthorityOverlay() with a JavaScript array as argument. The array contains the value of the two JavaScript variables ADMIN_USER and COMMON_USER.

I assume that you in fact want a JavaScript array of strings instead, which should be written as ['ADMIN_USER', 'COMMON_USER'].

What you should do is transform the Java array into a JSON string in the controller, and then use this JSON string inside the JavaScript code:

showAuthorityOverlay(${jsonString})

answered Apr 10, 2013 at 15:13

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

3 Comments

msqar Over a year ago

Mmm yeah, that could be a possible solution. Let me check. Wouldn't i be able to use something like this too? '[ADMIN_USER], [COMMON_USER]' ? Thanks for replying

msqar Over a year ago

I ended up doing what you said. Passing a Json String to the VIEW from the Controller. Quite better. :D Thanks pal!

JB Nizet Over a year ago

To answer your comment question: that wouldn't create an array of two strings, but a single string containing brackets and a comma. Quite different.

Collectives™ on Stack Overflow

passing a jstl list to a javascript function under onclick event

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related