Problem with appending HTML and JSTL code in a DIV object using jQuery

Question

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.

Are you sure your getting selected value in the right way? http://stackoverflow.com/questions/1643227/jquery-get-selected-text-from-dropdownlist see this. — morphles, Jun 11 '11 at 10:37
Yep, I'm sure. To double check, I used the code in the link you gave me and compared it with the value I'm already getting. It's the same. — Tintin, Jun 11 '11 at 11:01
I'm a bit confused here - jQuery is client-side code; JSTL is server-side code, which gets converted to Java, compiled, and rendered as HTML before it ever gets to the client. Why would you want to produce JSTL code with jQuery? — nrabinowitz, Jun 11 '11 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, Jun 13 '11 at 03:44

pedrofalcaocosta · Accepted Answer · 2011-06-11T14:14:44.877

5

JavaScript and jQuery gets executed client side, and JSTL gets compiled 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...

edited Jun 11 '11 at 14:14

answered Jun 11 '11 at 14:09

pedrofalcaocosta

811
7
9

I see. I wasn't aware that you can put in JSTL code inside javascript too. Is this separate from the HTML code or do you put it in within the div tag (see example)? e.g.
// above code here
– Tintin Jun 13 '11 at 03:47
Thanks for your answer @pedrofalcaocosta. I didn't know that JSTL inside javascript was possible. Accepted your answer. :) – Tintin Jun 13 '11 at 07:50
Note that the JSTL doesn't run inside the JavaScript. In this case you are using JSTL to produce the JavaScript conditionally. Then JSTL is translated to a java servlet, and then that servlet (after compiling) is served as HTML (with you JavaScript in it), and finally that JavaScript runs on the client browser. – pedrofalcaocosta Jun 22 '11 at 00:11
Sorry for the late reply. It confused me a little at first but your answer helped. :) – Tintin Aug 15 '11 at 05:30

Problem with appending HTML and JSTL code in a DIV object using jQuery

1 Answers1