Iterate hidden value in jstl tag

Question

I am using Ajax call to set a hidden value, then I need to iterate it to form a table.

Value is getting set in hidden value but I am not able to form table using jstl tag.

Hidden Field:

<input type="hidden" name="hiddenResult" id="hiddenResult" />

Table body:

<tbody>
        <c:set var="searchresult" value="${hiddenResult}"></c:set>
        <c:forEach items="${searchresult}" var="searchresult" varStatus="loop">
            <tr>
                <td>${searchresult.schoolName}</td>
                <td>${searchresult.districtName}</td>
                <td>${searchresult.ltiKey}</td>
                <td>${searchresult.ltiSecret}</td>
                <td>
                    <input type="checkbox" name="selectedLtiKeys" id="selectedLtiKeys${loop.index}" style="display: none;" value="${searchresult.ltiKey}"> 
                    <c:if test="${searchresult.status == 'Active'}">
                        <img id="activate${loop.index}" src="../image/activate_button.png"
                                                    onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},false);">
                        <img id="inactivate${loop.index}" style="display: none;" src="../image/inactivate_button.png"
                                                    onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},true);">
                    </c:if> 
                    <c:if test="${searchresult.status == 'InActive'}">
                        <img id="inactivate${loop.index}" src="../image/inactivate_button.png"
                                                        onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},true);">
                        <img id="activate${loop.index}" src="../image/activate_button.png" style="display: none;"
                                                onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},false);">

                    </c:if>
                </td>
            </tr>
        </c:forEach>
</tbody>

Answer 1

I didn't know any response class definition. so what I am telling you about the basic on how to update your table via ajax call.At first load the table data page. suppose after loading your table be like :

<table summary="search result" id="data-table" class="search-result" cellspacing="0" style="">
    <thead>
        <tr>
            <th scope="" class="" id="">id</th>
            <th scope="" class="" id="">name</th>
            <th scope="" class="" id="">email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>some name</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Now make an ajax call and update your table by the the code snippet below.

function updateData() {

    var obj = $("#data-table tr");

    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'updateData.html',
        data: '', // what you want to sent
        success: function(responseData,textStatus) {
            if (textStatus == 'success' && responseData.length > 0) {
                $('#data-table tbody').html('');

                var row = '';
                for(var i = 0; i< responseData.length;i++){

                var id = responseData[i].id;
                var name = responseData[i].name;
                var email = responseData[i].email;
                // Now prepare the data for the table
                row += '<tr>'+'<td>'+id+'</td>'+'<td>'+name+'</td>'+'<td>'+email+'</td></tr>';

            }
            $('#data-table tbody').html(row);   

            }
        }, error: function(responseData) {
            // show your error message
        }
    });

}

JsFiddle