使用jQuery在DIV对象中附加HTML和JSTL代码的问题

Question

应该发生什么: 每次单击列表中的项目(单个选择)时,该对象中的信息将显示在单独的div上.

问题: 我无法将信息显示在单独的div上.

包含列表和预览区域的表应显示:

<table id="preview" style="width: 100%;" class="border">
    <tr>
        <td style="width: 25%;">
             <!-- List here -->
         </td>
         <td style="width: 75%;">
             <div id="template_preview" style="overflow:auto">
             </div>
         </td>
    </tr>
</table>

加载时,将调用:

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
         changePreview();
    });
</script>

该 changePreview() 函数:

function changePreview()
{
    var selectedValueFromListId = $('#listId').val();

    $('#template_preview').html('<c:forEach var="some_var" items="${model.someList}">');
    $('#template_preview').append('<input type="hidden" id="someTemplateId" value="${some_var.someListId}" />');

    var someTemplateId = $('#someTemplateId').val();

    if (selectedValueFromListId == someTemplateId) 
    {
        $('#template_preview').append('test');
        $('#template_preview').append('<c:if test="${some_var.objectOne.objectTwo.objectTwoId == valueOfSomething}">');
        $('#template_preview').append('some text here - <c:out value="${some_var.label}" />');
        $('#template_preview').append('</c:if>');
    }

    $('#template_preview').append('</c:forEach>');
}

我之前没有测试过jQuery .html()或.append()函数所以我不确定我是否正确使用它们或者我正在尝试做什么是可能的.

我希望我已经足够详细地解释了我的问题.我试过在搜索网站上研究它,但到目前为止我还没有找到解决方案.

提前致谢.

Answer 1

JavaScript和jQuery得到客户端执行,JSTL得到编译​​服务器端,BEFORE甚至到达客户端并执行...所以你不能指望用jQuery打印一些'JSTL like'字符串并期望它工作.

您的解决方案是使用JSTL控制您写入页面的javascript,而不是相反:

<script type="text/javascript">

 function changePreview() {
    var selectedValueFromListId = $('#listId').val();
    <c:forEach var="some_var" items="${model.someList}">
        $('#template_preview').append('<input type="hidden" id="someTemplateId" value="${some_var.someListId}" />');
        var someTemplateId = $('#someTemplateId').val();

        if (selectedValueFromListId == someTemplateId) {
        $('#template_preview').append('test');
            <c:if test="${some_var.objectOne.objectTwo.objectTwoId == valueOfSomething}">
                $('#template_preview').append('some text here - ${some_var.label}');
            </c:if>
        }

    </c:forEach>
}

</script>

PS.我假设其他一切都还可以,我不知道你的模型,所以我无法测试它...