Проблема с добавлением HTML и JSTL-кода в объект DIV с использованием jQuery

Question

Что должно произойти: Каждый раз, когда я щелкаю элемент в списке (одиночный выбор), информация в этом объекте отображается в отдельном элементе 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 даже достигнет клиента и будет выполнен ... Так что вы не можете ожидать, что вы напечатаете некоторую строку "как JSTL" с jQuery и ожидаете, что она будет работать .

Решением для вас является управление Javascript, который вы пишете на страницу, с помощью JSTL, а не наоборот:

<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>

пс. Я предполагаю, что все остальное в порядке, я не знаю вашу модель, поэтому я не могу проверить это ...