Using variable in a[rel=...], JQuery
<p>I've got an issue in a fairly trivial block of code, as it seemed to me. I'm passing an attribute from Spring MVC Model to the jsp view:                </p>

<pre><code>&lt;script type="text/javascript"&gt;
    var pic= '&lt;c:out value="${pictures.pic}"/&gt;';
    $(document).ready(function() {
    $("a[rel=shareit"+pic+"], #shareit-box").click(function() {     
        &lt;!--bunch of code here--&gt;
    });
&lt;/script&gt;
</code></pre>

<p>The problem is that <code>a[rel=shareit"+pic+"]</code> doesn't turn out to the needed data but remains exactly the same as in the script. I've tried all possible combinations with single and double quotes but none of them has helped. BTW, as I can see in Firebug, <code>var pic</code> is being properly assigned to the value I need. I would really appreciate your help.</p>

<p>The whole snippet of the web page, where the code is executed, looks like this:</p>

<pre><code>&lt;!-- Images list --&gt;
        &lt;div style="padding-left:10px; width:60%; float:right;"&gt;
            &lt;c:forEach items="${allPictures}" var="pictures"&gt;
                    &lt;a href="#" rel="shareit${pictures.pic}"&gt;&lt;img class="border" src="resources/uploadedImages/${pictures.pic106} /"&gt;&lt;/a&gt;   

                    &lt;div id="shareit-box"&gt;
                        &lt;div id="shareit-header"&gt;&lt;/div&gt;
                        &lt;div id="shareit-body"&gt;
                            &lt;div id="shareit-blank"&gt;&lt;/div&gt;
                            &lt;div id="shareit-icon"&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;a href="image/${pictures.pic106}"&gt;image&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;&lt;spring:message code="label.banImage" /&gt;&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="image/delete/${pictures.pic}.jpg"&gt;&lt;spring:message code="label.deleteImage" /&gt;&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;script type="text/javascript"&gt;
                        var pic= '&lt;c:out value="${pictures.pic}"/&gt;';
                        mylink = 'a[rel=shareit'+pic+'], #shareit-box';
                        $(document).ready(function() {
                            $(myLink).click(function() {        
                                var height = $(this).height();
                                var top = $(this).offset().top;
                                var left = $(this).offset().left + ($(this).width() /2) - ($('#shareit-box').width() / 2);      
                                $('#shareit-header').height(height);
                                $('#shareit-box').show();
                                $('#shareit-box').css({'top':top, 'left':left});
                            });
                            $('#shareit-box').mouseleave(function () {
                                $('#shareit-field').val('');
                                $(this).hide();
                            });
                        });
                    &lt;/script&gt;

            &lt;/c:forEach&gt;
        &lt;/div&gt;
</code></pre>

<p>UPD:
Some sort of magic is happening here:)
I've made some experiments:
When I manually assign to pic variable the String (e.g. Img04_03_12_22_16_12_336) everything is working</p>

<pre><code>var pic= 'Img04_03_12_22_16_12_336';
                        var pic1='a[rel="shareit' + pic + '"], #shareit-box';
                        $(document).ready(function() {
                            $(pic1).click(function() {  
</code></pre>

<p>But when I'm trying to assign pic data, extracted from the model attribute, it's not working, despite the fact I see in Firebag that pic has been assigned absolutely proper value. Why is it so?</p>

<p><strong>SOLUTION:</strong>
Ok, I finally picked up all the pieces together and made them to work. I'm posting the final variant, just for the case somebody else will experience the same problem. Thanks for everyone for their participation.</p>

<pre><code>&lt;!-- Images list --&gt;
        &lt;div style="padding-left:10px; width:60%; float:right;"&gt;
            &lt;c:forEach items="${allPictures}" var="pictures"&gt;
                    &lt;a href="#" rel="shareit${pictures.pic}"&gt;&lt;img class="border" src="resources/uploadedImages/${pictures.pic106} /"&gt;&lt;/a&gt;   

                        &lt;div id="${pictures.pic}" style="position:absolute; display:none;"&gt;
                            &lt;div id="shareit-header"&gt;&lt;/div&gt;
                            &lt;div id="shareit-body"&gt;
                                &lt;div id="shareit-blank"&gt;&lt;/div&gt;
                                &lt;div id="shareit-icon"&gt;
                                &lt;ul&gt;
                                    &lt;li&gt;&lt;a href="image/${pictures.pic106}"&gt;image&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;&lt;spring:message code="label.banImage" /&gt;&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="image/delete/${pictures.pic}.jpg"&gt;&lt;spring:message code="label.deleteImage" /&gt;&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                    &lt;script type="text/javascript"&gt;
                        $(document).ready(function() {
                            $('a[rel="shareit&lt;c:out value="${pictures.pic}"/&gt;"], #&lt;c:out value="${pictures.pic}"/&gt;').click(function() {     
                                var height = $(this).height();
                                var top = $(this).offset().top;
                                var left = $(this).offset().left + ($(this).width() /2) - ($('#shareit-box').width() / 2);      
                                $('#shareit-header').height(height);
                                $('#&lt;c:out value="${pictures.pic}"/&gt;').show();
                                $('#&lt;c:out value="${pictures.pic}"/&gt;').css({'top':top, 'left':left});
                            });
                            $('#&lt;c:out value="${pictures.pic}"/&gt;').mouseleave(function () {
                                $('#shareit-field').val('');
                                $(this).hide();
                            });
                        });
                    &lt;/script&gt;

            &lt;/c:forEach&gt;
        &lt;/div&gt;
</code></pre>
