Executing an Javascript function inside html tags

Question

I have the following code:

 <h2> <c:out value="${Name}"/> </h2>
 <img id="deleteSpecialCharacters('screenshot0<c:out value="${Name}"/>Preview')" class="screenshotImg" src="#" alt="screenshot"/>

With the javascript function:

function deleteSpecialCharacters(String) {
        var NewString = String;
        NewString =  NewString.replace(/[^A-Z0-9]+/ig, "_");
        return NewString;
    }

Since the Java string contains special characters, i want to filter them before its used inside the ID. But since the Javascript function is inside the ID tag, it sees the function as a String.

So how do i call the javascript function inside the id filtering the Java code

why not filter the variable in java directly, why use javascript? — madalinivascu
– madalinivascu, Commented Dec 8, 2016 at 9:58
Because i need the variable including the special characters on the same page — Jelle
– Jelle, Commented Dec 8, 2016 at 10:00
Java, I print the java variable first, and then put that name without special characters inside the id. — Jelle
– Jelle, Commented Dec 8, 2016 at 10:07
can't you have 2 java variable one with special character one without?? — madalinivascu
– madalinivascu, Commented Dec 8, 2016 at 10:09

Adrian Ber · Accepted Answer · 2016-12-08 10:21:09Z

1

You cannot execute JavaScript functions this way. You have two options: you either do it on the server side using java and generate the id id="${...}" or you do it on the client side on the onload event.

answered Dec 8, 2016 at 10:21

Adrian Ber

21.5k12 gold badges72 silver badges122 bronze badges

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

1 Comment

Jelle Over a year ago

The first one isn't an option for me since the code is inside an foreach loop. I'll try the second one thanks

karthik · Accepted Answer · 2016-12-08 10:28:03Z

0

You could try calling the js function before the HTML page loads.

You could try writing the javascript function deleteSpecialCharacters just after the body.

<body>
<script type="text/javascript">
    your js function
</script>

Hope this helps!!

answered Dec 8, 2016 at 10:28

karthik

172 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:20Z

<h2> <c:out value="${Name}"/> </h2>
<img class="screenshotImg" src="#" alt="screenshot"/>
<input type="hidden" id="replacement_name" value='screenshot0<c:out value="${Name}"/>Preview'/>

Then read value of hidden field and pass it to javascript method and assign resulting value as id to img element.

<script>
   function deleteSpecialCharacters(String) {
      var NewString = String;
      NewString =  NewString.replace(/[^A-Z0-9]+/ig, "_");
      return NewString;
    }
   $(document).ready(function() {
      var cleanStr = deleteSpecialCharacters($('#replacement_name').val());
      $('.screenshotImg').attr('id', cleanStr);
   });
</script>

This will work only if you are sure that there is going to be only one img element with that class.

The better is solution is to pass actual and cleaned values from server itself or have a look at this thread Regular expression to remove special characters in JSTL tags.

Collectives™ on Stack Overflow

Executing an Javascript function inside html tags

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related