Question

I have a jsp webpage which is dynamically generated. I want to have tooltips on some of the images and the tooltip script I am using requires that each image to have a unique id and the $(document).ready(function(){}); refer to that image id. Is this possible? I can easily generate a unique id for the html img tag but when I try to do the same for the script it gives an error. I have included my code.

<logic:iterate id="results" name="appStatus" scope="session">
    <logic:equal name="results" property="name" value='<%= name%>'> 
        <td>
            <logic:equal value="up" name="results" property="status">
                <img src="img/status_up.png">
            </logic:equal>
            <logic:equal value="down" name="results" property="status">
                <img id="alert" src="img/status_alert.png">
                <div class="tooltip">
                    <bean:write name="results" property="description"/>
                </div>
                <script>
                    $(document).ready(function() {
                        $("#alert").tooltip({ position: 'right top', effect: 'slide'});
                    });
                </script>
            </logic:equal>
            <logic:equal value="other" name="results" property="status">
                <img id="other" src="img/status_info.png">
                <div class="tooltip">
                    <bean:write name="results" property="description"/>
                </div>
                <script>
                    $(document).ready(function() {
                        $("#other").tooltip({ position: 'right top', effect: 'slide'});
                    });
                </script>
            </logic:equal>
        </td>
    </logic:equal>
</logic:iterate>

so for this code each img with id “alert” would need to have its own unique id and the document ready script would need to refer to that.

Answer 1

Give the <img> a unique id:

<img id="alert<c:out value='${indexNum}' />" src="img/status_alert.png">

and likewise in the script:

$(document).ready(function() {
                        $("#alert<c:out value='${indexNum}' />").tooltip({ position: 'right top', effect: 'slide'});
                    })

So the ids will be alert0, alert1, etc. indexNum is the name I’ve given the iteration number variable, specify the name for it like this:

<logic:iterate id="results" name="appStatus" scope="session" indexId="indexNum">