Symphony.

My brain is totally dead today, and I’m sure this is a stupid question: how do I traverse/interact with the attached XML in jQuery?
I’m certain that I’m just being thick, but I can’t think of how to access the data from jQuery. I’m trying to rotate background images for a div, and so need to grab the list of images from the attached XML.

<xsl:copy-of /> it as a param of your jQuery-function.

To elaborate on phoque’s point, you’ll need to output the XML to your HTML source somewhere so your jQuery can access it.

Ah roger, thanks chaps!

Throlkim, depending on what you require, I’d be tempted to output the content as JSON, making it even easier for you to work with in jQuery. If you need an example on how to do this in Symphony let me know and I’ll post some code I used recently on a project.

If you need an example on how to do this in Symphony let me know and I’ll post some code I used recently on a project.

This would make a pretty good XSLT-Util to. Simply throw any XML at it and it will return JSON.

Aye, I’d be very interested in seeing that Fazal. I have a few future project ideas that would really benefit from it.

Okay, here is an example of how to build a very basic JSON request service with Symphony.

Let’s assume you have a section named “Carousel Slides” and this will hold images that you will use in a jQuery (or other library) carousel somewhere on your site.

For the sake of this example, Carousel Slides will have 3 fields:

1. image
2. caption
3. url

The next thing we would do is build a page who’s sole function is to return JSON, to this we could optionally add parameters such as

photo

photo would naturally filter a specific photo and return the result, but we won’t go that far for this example. For this example we’ll call our page “JSON” which will sit in the site, but is hidden from the navigation menu.

When you build a Data Source and attach it to the page, we will select the above three fields for the page to see.

Here is an example of our attached XML:

    <?xml version='1.0' encoding='utf-8'?>
<data>
    <events />
    <carousel-slides>
        <section id="46" handle="carousel">Carousel</section>
        <entry id="2">
            <image size="80 kb" path="/uploads/images/carousel_slides" type="image/jpg">
                <filename>image-1.jpg</filename>
                <meta creation="2009-07-30T10:49:42+01:00" width="974" height="368" />
            </image>
            <caption word-count="19">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</caption>
        <url>
            <item handle="the-title-of-the-link" id="123">link title</item>
        </url>
        </entry>
<entry id="3">
            <image size="80 kb" path="/uploads/images/carousel_slides" type="image/jpg">
                <filename>image-2.jpg</filename>
                <meta creation="2009-07-30T10:49:42+01:00" width="974" height="368" />
            </image>
            <caption word-count="19">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</caption>
        <url>
            <item handle="the-title-of-the-link" id="456">link title</item>
        </url>
        </entry>

</carousel-slides>
</data>

To transform this into a JSON feed, is actually quite straightforward. We’re going to assume that we will always have the same output and fields, and therefore can write custom XSL.

From my experience so far, I would say this is the best course of action. This is mainly because the XSL to JSON examples available make assumptions, and don’t always work exactly the way I expect them to.

One thing you need to make sure of, is to set ‘display_event_xml_in_source’ to ‘no’ on line 71 in /manifest/config.php otherwise you will get a html comment output at the bottom of your JSON request, which would invalidate it.

So here is the XSL:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="text"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="no" 
    media-type="application/json"/>

<xsl:strip-space elements="*"/>

<xsl:template match="data">{
    "slides":[<xsl:apply-templates select="carousel-slides/entry"/>]
}</xsl:template>

<xsl:template match="entry">
{"img":"<xsl:value-of select="image/filename" />",
    "imgpath":"<xsl:value-of select="image/@path" />",
    "w" "<xsl:value-of select="image/meta/@width" />",
    "h" "<xsl:value-of select="image/meta/@height" />",
    "caption":"<xsl:value-of select="caption/text()" />",
    "url":"<xsl:value-of select="url/item/@handle"/>"
<xsl:text>}</xsl:text>
<xsl:if test="position() != last()">,</xsl:if>
</xsl:template> 
</xsl:stylesheet>

You will notice two immediate things, our output method is set to text and media-type is set to application/json. This will ensure that our output is returned in the correct format. We also strip-space for all (*) elements, so it’s sent as a nice string.

The result of the above output would be

{
    "slides":[
{"img":"image-1.jpg",
    "imgpath":"/uploads/images/carousel_slides",
    "w" "974",
    "h" "368",
    "caption":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "url":"the-title-of-the-link"
},
{"img":"image-2.jpg",
    "imgpath":"/uploads/images/carousel_slides",
    "w" "974",
    "h" "368",
    "caption":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "url":"the-title-of-the-link"
}]
}

I have seperated the url and image path so that if you want, you can send it through JIT if you want.

In jQuery a typical request would look like this:

$.getJSON("/JSON", function (data) {
            slideCount = data.slides.length;
            for (i = 0; i < slideCount; i++) {
                var img = new Image(),
                src = data.slides[i].imgpath + '/' + data.slides[i].img;
                img.src = src;
                img.alt = data.slides[i].caption;
                img.width = data.slides[i].w;
                img.height = data.slides[i].h;
                $(img).appendTo("#slideContainer");
            }
        });

I could go further and explain how to build an actual carousel and check for broken images, loaded images etc, but that’s beyond the scope of this particular post ;)

To test your JSON output I would recommend using JSON Lint and referring to the jQuery API

Hope that helps some.

Awesome, I’ll give that a test. Thanks very much for taking the time to write that out Fazal :)

Perfect, works very sweetly. This will prove very useful in the future, thanks muchly!