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 4026 posts 15837 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 4026 posts 15837 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 4026 posts 15837 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 4026 posts 15837 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 4026 posts 15837 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 4026 posts 15837 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!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies