javascript - Problem with appending HTML and JSTL code in a DIV object using jQuery - Stack Overflow

What's supposed to happen: Every time I click an item in a list (single selection), information in that object is displayed on a separate div.

The problem: I can't get the information to display on the separate div.

Table containing the list and the preview area is supposed to display:

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

On load, this will be called:

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

The changePreview() function:

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>');
}

I haven't tested out jQuery's .html() or .append() functions before so I'm not sure if I'm using them right or if what I'm trying to do is possible.

I hope I've explained my problem in enough detail. I've tried researching it in search sites but so far I haven't found a solution.

Thanks in advance.

What's supposed to happen: Every time I click an item in a list (single selection), information in that object is displayed on a separate div.

The problem: I can't get the information to display on the separate div.

Table containing the list and the preview area is supposed to display:

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

On load, this will be called:

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

The changePreview() function:

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>');
}

I haven't tested out jQuery's .html() or .append() functions before so I'm not sure if I'm using them right or if what I'm trying to do is possible.

I hope I've explained my problem in enough detail. I've tried researching it in search sites but so far I haven't found a solution.

Thanks in advance.

• javascript
• jquery
• html
• jsp
• jstl

Share Improve this question Follow edited Jun 11, 2011 at 10:20 Tintin asked Jun 11, 2011 at 9:46 TintinTintin 1311 silver badge44 bronze badges 4

• Are you sure your getting selected value in the right way? stackoverflow./questions/1643227/… see this. – morphles Commented Jun 11, 2011 at 10:37
• Yep, I'm sure. To double check, I used the code in the link you gave me and pared it with the value I'm already getting. It's the same. – Tintin Commented Jun 11, 2011 at 11:01
• 1 I'm a bit confused here - jQuery is client-side code; JSTL is server-side code, which gets converted to Java, piled, and rendered as HTML before it ever gets to the client. Why would you want to produce JSTL code with jQuery? – nrabinowitz Commented Jun 11, 2011 at 14:06
• @nrabinowitz - Sorry to have confused you. I guess I haven't mentioned it but I'm fairly new to coding with jQuery & JSTL so I wasn't aware what I was asking wasn't possible. – Tintin Commented Jun 13, 2011 at 3:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

JavaScript and jQuery gets executed client side, and JSTL gets piled server side, BEFORE javascript even reach the client and get executed... So you can not expect to print some 'JSTL like' string with jQuery and expect it to work.

The solution for you, is to control the javascript you write to the page with JSTL, and not the contrary:

<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. I'm assuming that everything else is ok, i don't know your model so i can not test it...