Copied to clipboard

Flag this post as spam?

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


  • MMM 4 posts 24 karma points
    Nov 10, 2010 @ 23:55
    MMM
    0

    Is it possible to use a macro or umbraco item field in a javascript?

    I am VERY new to Umbraco and xslt, so bear with me...

    What I am hoping to eventually do is have a populated list produced by an XSLT file that when each individual item is clicked, it pulls up a text (that was created as a Document type - rich text editor in the subpages of the content area) into a DIV (or content area) in the center of the page. 

    i.e.

    • Item 1
    • Item 2
    • Item 3
    • ...
    • Item 40

    Text would appear HERE in center of page and change depending on which item was selected...

    ..........................................................................................................................................

    I first created a page (before umbraco) where I first had (very long) texts hardcoded into a javascript file that I pulled up using the onclick function

    <script language="JavaScript">

    function text(){
        document.getElementById('mydivid').innerHTML = '<p>My Text Here.....</p>';
    }

    </script>

    <div id="mydivid">My Text appears HERE</div>

    <li><a href="#_self" onclick="text()">CLICK HERE</a></li>

    This works fine, but for all intents and purposes, it is out-dated and inconvenient when entering in many long texts

    So, with Umbraco, I used the document types using the rich-text editor with the tab name (for this example) CONTENT and created 40 sub-pages and placed a long text on each subpage in the "content" tab.

    So, just to see if it would work, I tried using the same script, but inserting an umbraco item like so -

    <script language="JavaScript">

    function text(){
        document.getElementById('mydivid').innerHTML = '
       <umbraco:Item field="content" runat="server"></umbraco:Item>';
    }

    </script>

    Much to my surprise, it ACTUALLY DID WORK! - except with one little glitch.  It only works so long as the text is less than one line (I first tested with a couple words - which worked!, and the proceeded to try it with more text - unsuccessfully.

    I then tried putting it in an xslt file and drawing it up that way -

    <xsl:value-of select="umbraco.library:Item('1111, 'content')" disable-output-escaping="yes"/>

    <script language="JavaScript">

    function text(){
        document.getElementById('mydivid').innerHTML = '
       <umbraco:Macro Alias="Testcontent" runat="server"></umbraco:Macro>';
    }

    </script>

    Again, it works, but only if the text is only a few words - one line or less.

    Strange???

     

    How would I get this same affect on the Umbraco system?  Can I use the Javascript function, or is there a way to do this using XSLT and Macro alone?

     

     

  • Carlos 338 posts 472 karma points
    Jan 06, 2011 @ 17:36
    Carlos
    0

    Don't know if this ever go answered but what we did was put our Javascript inside of an XSLT file and had Umbraco create a macro for it. 

    We then stuck the Macro inside the head of our template we are using.

    In the XSLT you can create or pull a field. Not sure if you want to use a Rich Text editor though for the simple fact of all the possible markup.  But since you are using innerHTML to render it I suppose it might be fine. I would use a Simple Text Editor so it creates a string of text. You can physically add the markup using HTML tags. But Simple Text as a string is probably a better bet when trying to use Javascript.

    Maybe use a "foreach" loop in you XSLT.

  • Kim Andersen 1447 posts 2196 karma points MVP
    Jan 07, 2011 @ 23:38
    Kim Andersen
    1

    When I need to use something from XSLT inside of my JavaScript, I tend to write the JavaScript inside the XSLT-file. I then use the <xsl:text> and the CDATA like this:

    some xslt....
    <xsl:value-of select="something" />


    <xsl:text disable-output-escaping="yes"><![CDATA[
    <script type="text/javascript">
    $("]]></xsl:text><xsl:value-of select="$myVariable" /><xsl:text disable-output-escaping="yes"><![CDATA[").hide();
    </script>
    ]]>
    </xsl:text>

    This way I can use some walues that I can only get from XSLT inside of my JavaScript. It's not the most beautifull code, but somethimes you just have to make it work.

    /Kim A

Please Sign in or register to post replies

Write your reply to:

Draft