embedded content xslt plus jquery help - XSLT

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Djan Blom 99 posts 161 karma points

Apr 18, 2013 @ 17:59

Embedded Content Xslt + jQuery help

XSLT

Hi guys,

I am making a skill set page with Embedded Content, and i am trying to make a progressbar with the percentage of each skill I entered. But the problem is, all the bars acquire the lastest percent value added. (or in reverse order O.o)

Here is the page :

http://djan.se/about/my-skill-set.aspx

And my Xslt/JS :

<xsl:param name="currentPage"/>

<xsl:template match="/">
  
  <ul>
        <xsl:for-each select="$currentPage/addASkill/data/item">
            <li>
                Skill: <xsl:value-of select="embedSkill" /><br />
             <xsl:value-of select="embedPercent" />%<br />
             
              <script type="text/javascript">
                 var percVal = <xsl:value-of select="embedPercent" />
                    $(function() {
                    $( ".skillBar" ).progressbar({
                    value: percVal
                    });
                   });
               </script>
               Skillbar: <div class="skillBar"></div>
                
          </li>
       </xsl:for-each>
 </ul>
        
        
</xsl:template>

Can anyone tell me what I am doing wrong here? =)

Kind Regards,
Djan

Copy Link

Djan Blom 99 posts 161 karma points

Apr 18, 2013 @ 18:03

And here is the XSLT/JS for the reversed order :

<xsl:paramname="currentPage"/>

<xsl:templatematch="/">
        
        <ul>
                <xsl:for-eachselect="$currentPage/addASkill/data/item">
                        <li>
                                Skill: <xsl:value-ofselect="embedSkill"/><br/>
                                <xsl:value-ofselect="embedPercent"/>%<br/>
                                
                                <scripttype="text/javascript">
                                        $(function(){
                                        $(".skillBar").progressbar({
                                        value:<xsl:value-of select="embedPercent"/>
                                        });
                                        });
                                </script>
                                Skillbar: <divclass="skillBar"></div>
                                
                        </li>
                </xsl:for-each>
        </ul>
        
        
</xsl:template>

Copy Link

Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib

Apr 18, 2013 @ 22:53
0
Hi Djan,

This happens because all your bars get the same class name (.skillBar) so the last chunk of JavaScript emitted will set the value for all bars.

You really shouldn't generate huge amounts of JavaScript with XSLT - ideally, you would set some values and have a single chunk of JavaScript perform everything when the page is rendered - try this approach instead:
```
<xsl:template match="/">
    <ul>
        <xsl:for-each select="$currentPage/addASkill/data/item">
            <li>
                Skill: <xsl:value-of select="embedSkill"/><br/>
                <xsl:value-of select="embedPercent"/>%<br/>
                Skillbar: <div class="skillBar" data-value="{embedPercent}"></div>
            </li>
        </xsl:for-each>
    </ul>

    <script type="text/javascript">
        $(function() {
            $(".skillBar").progressbar({
                value: this.data('value') // (**)
            });
        });
    </script>
</xsl:template>
```
I've highlighted the spot that may need attention - I've not tested this, but standard jQuery plugins will set the this variable to the current item, so you should be able to grab the value of the data-value attribute set in the for-each earlier. You may need to do $(this) instead - or check the docs for the progressbar plugin for how to access the jQuery item at that point.

/Chriztian
Copy Link
is working on a reply...

Please Sign in or register to post replies