Copied to clipboard

Flag this post as spam?

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


  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 11:04
    Fredrik
    0

    getElementById from XSLT

    Right now I foreach loop through a set of nodes.

    For each iteration I create a textfield with unique ID based on the nodes articleNr value as shown below:

    <input type="text" value="1" size="3">
    <xsl:attribute
    name="id"><xsl:value-of
    select="articleNr"/></xsl:attribute>
    </input>

    For each node I also add an image with an onClick method in which I wish to use the same  ID as in the text input field...right now I can only set at static ID which always will point to the first iterated element.

    <input type="image" src="~/media/28631/add_button.png" alt="buy" 
    onClick="alert(document.getElementById(' A124').value);"/>
     

     Ideas?

  • Rich Green 2246 posts 4008 karma points
    Apr 07, 2011 @ 11:08
    Rich Green
    0

    I'm not sure I understand your question.

    However if you are in a loop you can use position to get a unique id?

    <input type="text" value="1" size="3">
        <xsl:attribute name="id"><xsl:value-of select="articleNr"/><xsl:value-of select="position()"/></xsl:attribute>
    </input>

    Rich

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 11:14
    Fredrik
    0

    My problem is

    <input type="image" onClick="alert(document.getElementById('Here I want to use the same ID as in my previously created textbox').value);"/>

     

  • Rich Green 2246 posts 4008 karma points
    Apr 07, 2011 @ 11:15
    Rich Green
    1

    Is the image in the same loop?

    Might help if you post your full xslt

    Rich

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 11:19
    Fredrik
    0
    <xsl:for-each select="$currentPage/descendant::* [@isDoc and string(umbracoNaviHide) != '1'] ">
      <div style="width: 180px; float: left; padding-right: 10px;">
        <div style="width: 180px; float: left; height: 207px; background-image: url(../../../media/818/product_back1.png); background-repeat: no-repeat; padding-top: 3px; padding-left: 3px; padding-right: 10px;">
          <!--Bild--><div style=" text-align: center;">
          <xsl:variable name="mediaId" select="number(./image)" />
          <xsl:if test="$mediaId > 0">     
            <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />     
            <xsl:if test="$mediaNode/umbracoFile">       
              <img src="{$mediaNode/umbracoFile}" alt="[image]"  height="122" />     
            </xsl:if>   
          </xsl:if></div>
    <!--Vid inloggad-->
    <xsl:variable name="sessionVariable" select="umbraco.library:Session('loggedInAs')" />
    <xsl:if test="string-length($sessionVariable)!=0">
    <span class="productText">
      <div style="padding-top: 2px;">
    <!--Textfält med artikelnummer som unik identifierare-->
    <input type="text" value="1" size="3">
    <xsl:attribute
    name="id"><xsl:value-of
    select="articleNr"/></xsl:attribute>
    </input>
    <input type="image" src="~/media/28631/add_button.png" alt="buy" onClick="alert(document.getElementById(' ').value);"/>
      
      </div>
    </span>
    </xsl:if>    
          <span class="productTitle"><xsl:value-of select="name"/></span><br />
      <span class="productText">
      <a>
      <xsl:attribute name="href"><xsl:value-of
      select="concat('~/1250.aspx?showproduct=', articleNr)"/></xsl:attribute>
      Läs mer 
      </a>
     
      </span> 
          </div>
      </div>
      </xsl:for-each>
  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Apr 07, 2011 @ 11:20
    Lee Kelleher
    0

    As Rich says, post your XSLT - will give more context. Edit: Opps cross-posted with Fredrik

    Try...

    <input type="image" src="/media/28631/add_button.png" alt="buy" onClick="alert(document.getElementById('{articleNr}').value);"/>

    Cheers, Lee.

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 11:35
    Fredrik
    0

    Thanks lee, it worked!

    By the way, is there a way to set document.getElementById('{articleNr}').value to a xsl variable?

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Apr 07, 2011 @ 11:40
    Lee Kelleher
    2

    Hi Fredrik,

    Sure, but it will look a bit messy - mostly due to how XSLT mixes up the single/double quotes... but I'd do something like this:

    <xsl:variable name="jsDocById">
        <xsl:text><![CDATA[document.getElementById(']]></xsl:text>
        <xsl:value-of select="articleNr" />
        <xsl:text><![CDATA[').value]]></xsl:text>
    </xsl:variable>

    Could probably do it in a single-line using "concat()", but gets tricky trying to escape the single-quotes.

    Cheers, Lee.

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 13:54
    Fredrik
    0

    How about if I want to use what is inside my textbox in a redirect like:

    After ?quantity=

    <a>
        <xsl:attribute name="href">
     <xsl:value-of select="concat(../@nodeName/@id,'?buy=', articleNr, '&amp;', '?quantity=')"/>
        </xsl:attribute>
        <img src="~/media/28631/add_button.png" border="0"/>
        </a>

    My guess is that this has to be re-done in some kind of javascript function and combine it with xslt since the value in the textbox can be changed after the initial load.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Apr 07, 2011 @ 14:05
    Lee Kelleher
    0

    Hi Fredrik,

    Yeah, I'd do it in JavaScript too, using a function like this...

    function redirect(href, id) {
        var el = document.getElementById(id),
            value = el.value;
        window.location = href + '?buy=' + id + '&quantity=' + value;
        return false;
    }

    Then in your XSLT part, just reference that function with the reference ID.

    <a href="{../@nodeName/@id}" onclick="javascript:return redirect(this.href, '{articleNr}');">
        <img src="~/media/28631/add_button.png" border="0"/>
    </a>

    ... or something like that! :-)

    Cheers, Lee.

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 14:36
    Fredrik
    0

    Almost here!

    I got the output correct in my querystring but it seems like ../nodeName/@id aint passed correctly to the javascript function.

    Therefore I end up with, for example;

    ~/produkter/kemtekniskt/?buy= P704&quantity=5

    when it in this case should be

    ~/produkter/kemtekniskt/aerosoler.aspx?buy= P704&quantity=5

     

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Apr 07, 2011 @ 14:41
    Lee Kelleher
    0

    Ahh, think its the inline XPath bit... try this:

    <a href="../{@nodeName/@id}/" onclick="javascript:return redirect(this.href, '{articleNr}');">

    Cheers, Lee.

  • Rich Green 2246 posts 4008 karma points
    Apr 07, 2011 @ 14:42
    Rich Green
    0

    You don't need @nodeName/@id, just @nodeName ( I think!)

    Rich

     

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Apr 07, 2011 @ 14:53
    Lee Kelleher
    0

    Actually, guessing it needs to be:

    href="{umbraco.library:NiceUrl(@id)}"

    Cheers, Lee.

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 14:58
    Fredrik
    0

    <a href="../{@nodeName/@id}/" onclick="javascript:return redirect(this.href, '{articleNr}');">

    ´Resulted in

    ~/produkter//?buy= P708&quantity=14

     

    i need ~/produkter/kemtekniskt/aerosoler.aspx?buy= P708&quantity=14

    just @nodeName didnt work either

     

    href="{umbraco.library:NiceUrl(@id)}"

    gave me

    ~/produkter/kemtekniskt/aerosoler/p-700-universalolja.aspx?buy= P700&quantity=1

    which is almost here...I just need the parent of p-700-universalolja instead which is aerosoler.aspx

     

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Apr 07, 2011 @ 15:00
    Lee Kelleher
    0

    OK... so close!

    href="{umbraco.library:NiceUrl(../@id)}"

    Cheers, Lee.

  • Fredrik 89 posts 108 karma points
    Apr 07, 2011 @ 15:04
    Fredrik
    0

    it works! Thank you so much!

Please Sign in or register to post replies

Write your reply to:

Draft