CODEWITHSUNDEEP
javajavascripthtmljsp
robinrjoe
robinrjoe

Reputation: 349

How to write Java code inside of innerHTML

My requirement is as below.

  1. Whenever user clicks on Additem button One new row should be added in the table.(Table Name : additionalInfoTable).
  2. The must have three cells.
  3. First two cells must have Text field.
  4. Second cell must have dropdown with a list of Values.

For this I have written code in Javascript as below. But When I generate dropdown values from Java ArrayList, Java snippet is not running inside InnerHTML. 

function addAdditionalRow() {
        var table = document.getElementById("additionalInfoTable");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        cell1.innerHTML =   '<input type="text" size="15" name="additionalCost" />';
        cell2.innerHTML =   '<input type="text" size="15" name="totalCost" />';
        cell3.innerHTML =   '<select name="recoveryType">'+                             
                            '<option>--Select Recovery Type--</option>';

                            <% for(String recType: details.getRecoveryTypeList()) { %>
                            var recType = '<%=recType%>';
        cell3.innerHTML =   '<option value="'+recType+'">'+recType%+'</option>';
                            <%}%>

        cell3.innerHTML =   '</select>';    
      cell4.innerHTML =     '<input type="button" value="Delete" onclick="deleteRow(this)"/>';  
    }

My JSP code for the table is below.

<table border ="1" width="100%" id="additionalInfoTable">
<thead>
    <tr>
        <td align="center" ><b>Additional Cost $</b></td>
        <td align="center" ><b>Total Cost</b></td>
        <td align="center" ><b>Recovery Type</b></td>
        <td align="center" ><b>Delete</b></td></tr>

    </tr>
</thead>        
    <tbody id="addBillbackdata">
        <tr>
            <td align="center">
              <input type="text" size="15" name="additionalCost" />
            </td>
            <td align="center">
              <input type="text" size="15" name="totalCost" />
            </td>
                <select name="recoveryType">
                    <option>--Select Recovery Type--</option>
                    <% for(String recType: details.getRecoveryTypeList()) { %>
                    <option value="<%=recType%>"><%=recType%></option>
                    <%}%>
                </select>
            </td>
            <td align="center">
              <input type="button" value="Delete" onclick="deleteRow(this)"/>
            </td>
        </tr>
    </tbody>
</table>

Please help me to get Java ArrayList values inside innerHTML of javascript

Upvotes: 0

Views: 1719

Answers (1)

OhleC
OhleC

Reputation: 2890

Your javascript modifies the HTML in the browser. JSP code is compiled serverside before it is being delivered to the browser. It is not possible to use JSP code in javascript, because the browser has no way of interpreting it. You have to either

  • create the desired html with jsp, hide it (e.g. with display:none), and attach it dynamically with javascript
  • create a global javascript variable in jsp within a <script>-Tag and reference it from your button callback
  • create a different jsp or servlet to deliver the data and use AJAX to request it

Upvotes: 1

Related Questions