使用 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 在服务器端编译，在 javascript 甚至到达客户端并被执行之前...所以你不能指望用 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。我假设其他一切都很好，我不知道你的模型，所以我无法测试它......