JSTL for display purposes

Question

is JSTL core/functions are only for display purposes? like javascript can't it be used to display to a input field instead of mixing javascript and JSTL.

when i try to fill a select element with options i ended up with this.

function fill(){

var select=document.getElementById("sel");

<c:foreach items="${value}" var="op">

var option=document.createElement("option");
option.text='${op.optionname}';

select.add(option);

</c:foreach>

}

what i am trying to do here is to fill a select element with options when a button is clicked.is there a way to achieve this using only jstl? i am a bit confuse using jstl.

Answer 1

is JSTL core/functions are only for display purposes?

Generally speaking, yes.

You don't need JavaScript when your JSTL is being proccessed on the server. You could do this like:

<select>
  <c:forEach items="${value}" var="op">
    <option value="${op.optionname}">${op.optionname}</option>
  </c:forEach>
</select>

Note also that depending on which framework you're using, it may provide an easy way for your Java objects to back HTML form fields like select lists or input boxes. Spring MVC has an expanded set of tags to do this, but you can mix regular HTML and JSTL with no problems.

Javascript in JSTL will be ignored by the server and only executed on the client side (i.e. the end user's computer), by that time the server will have taken the JSTL and rendered into HTML (or whatever else you're returning).

So, if you want to dynamically populate the list when a user clicks on something, you'll need to use pure JavaScript and not JSTL, since JSTL is only processed on the server side.

You could potentially combine the two approaches using something like this:

<div id="hidden-div" style="display:none">
  <select>
    <c:forEach items="${value}" var="op">
      <option value="${op.optionname}">${op.optionname}</option>
    </c:forEach>
  </select>
</div>

and then add a jQuery click listener to the button you want the user to click before showing the list:

$('#special-button').on('click', function(e){
  $('#hidden-div').show();
}

Answer 2

you can try this .

function fill(){ 
  var select=document.getElementById("sel"); 
  var options = [<c:foreachitems="${value}" var="op">'${op.optionname}',</c:foreach>];  
  $(options).map(function(index,optionValue){ 
      var option=document.createElement("option");
      option.text = optionValue; 
      select.add(option); 
  }); 
}