Symphony.

Hi all. I've never worked with JSON before but I'm trying to learn how to work with it. I'm trying to use the Agile Carousel plugin which uses JSON data format for integration with a CMS.

It comes with an data file example written in PHP and it produces valid JSON. When invoking the plugin I link to that file with $.getJSON("<xsl:value-of select="$workspace"/>/agile_carousel/agile_carousel_data.php", function (data) { and the content gets shown in the slider. You can see it here. No big deal.

So then I decided to create a template page that converts the info from my section into something that approaches the JSON produced by the PHP file. And I succeeded, much to my own amazement. You can see it here.

However, I'm not succesful in getting the slider to load this data. Maybe its because I'm using html as output method. Or that my json doesnt validate here, like its choking on the quotation marks or something. Or maybe I'm not linking to the correct place in my invoke script. Or maybe I'm just stupid.

Anyway, I would be much obliged for getting some help on the matter.

Nope, that's all completely valid JSON.

Can you post the code that loads the slider up here and I'll take a look for you...?

Actually, on second check, you have a doctype being output. If you remove these invocations from your <xsl:output... tag in your XSLT, this may fix it...

I tried but sadly it doesn't fix it. The code for the slideshow is as follows

                  $.getJSON("json", function(data) {
                    $(document).ready(function(){
                        $("#flavor_1").agile_carousel({
                            carousel_data: data,
                            carousel_outer_height: 228,
                            carousel_height: 228,
                            slide_height: 230,
                            carousel_outer_width: 480,
                            slide_width: 480,
                            transition_time: 300,
                            timer: 4000,
                            continuous_scrolling: true,
                            control_set_1: "numbered_buttons",
                            no_control_set: "hover_previous_button,hover_next_button"
                        });
                    });
                });

So I run getJSON on json, which is an .xsl is the pages folder. It succesfully loads, since I see under html in the net tab of firebug. I can also load the data with $.getJSON("workspace/pages/json.xsl", function(data) { but then it loads as XML instead of html. Would you like to see more?

What if you change all the double quotes inside the content to single quotes? I tried it on the JSLint site and it validated.. but not sure if divs with single quotes will validate? And on closer inspection that is the difference between your .php file and the json page you've created. <div class='button'> single quotes might be the way to go.

Yes that was bothering me too so I replaced all the double quotes with single qoutes. However in the browser the html stubbornly turns out with all double qoutes. Could this be a problem with the doctype?

what about using " ? does that make a difference?

You have to escape all quotes in the HTML within your JSON. I completely forgot about that.

Okay so I've been trying for a few days, but I wasn't able to find a solution. I've tried using ", enclosing the quotes with CDATA tags, and using XSLT contraptions but so far with no use.

I've now been looking at this but I don't know how to apply it. Could you please exlplain some further how to escape all the HTML within my JSON?

You can take a look at my XML to JSON utility. It's using the String Replace utility to escape quotes.

Hey phoque, thanks for those links. It has solved some things but also raises some questions.

I read the discussion on how to use pages to output JSON. I've installed the Content Type Mappings extension and changed the media type to json. That makes that a part of my content is recognised, and shown in the slider. But, sadly no images, only text.

So I'm still trying to figure out how to use your XML to JSON utillity. So there's my first question, how do I apply/use the functionality of the template? Do I import the json.xsl on the page where my json xslt is located and wrap the code from the Example call around it? By the way the page that has my json output is also called json.xsl, can that be a problem?

And then there's some other questions. Is it a good way to go to output json to a page and then redirect to your json page when you want to use it? I'm also running into some problems as to how to point to that location, because on my index it's on the same directory level, but on my other pages the json file is located one directory higher than the current page.

hope you can help, slowly going nuts here.

Do I import the json.xsl on the page where my json xslt is located and wrap the code from the Example call around it?

Basically, yes. You can pastie your XML and XSL and I can have a look.

By the way the page that has my json output is also called json.xsl, can that be a problem?

Not as long as you reference the files correctly (workspace/pages/json.xsl vs workspace/utilities/json.xsl).

I'm also running into some problems as to how to point to that location, because on my index it's on the same directory level, but on my other pages the json file is located one directory higher than the current page.

You should reference the URL properly:

$.getJSON("/json/", function(data) {
   ...

So I was fiddling around with this stuff all night and so far this is what I got. I got the plugin working, sorta, it makes the html to be output all icky like:

[ {"content": {"div": {"s"{"img": nullnull},"Een rots in de branding!"]}},"content_button": "http://www.brandmarkdesign.nl",{"div": {"s"{"img": nullnull},"Betaalbare illustratie in de branding"]}},"content_button": "http://www.brandmarkdesign.nl"} ] 

So here's the xml i'm trying to run. Mind you, it's important for this that the html gets output all proper like. I've read somewhere that this plugin doesn't support attributes to be passed. So that probably makes it a bit of problem:

[

        <xsl:for-each select="carousel-slides/entry">
                <content>
                    <div class="slide_inner">s<a class="photo_link" href="#">
                            <img class="photo">
                            <xsl:attribute name="src"><xsl:value-of select="$workspace" /><xsl:value-of select="image/@path" />/<xsl:value-of select="image/filename" /></xsl:attribute>
                            <xsl:attribute name="alt"><xsl:value-of select="image/filename" /></xsl:attribute>
                            </img>
                        </a> 
                        <a class="caption" href="#"><xsl:value-of select="caption/text()" /></a>
                    </div>
                </content>
                <content_button><xsl:value-of select="url" /></content_button>
        </xsl:for-each>

    </xsl:with-param>
</xsl:call-template>
]

The only instance in which I got some sort of a possitive response, is when i run reference the url like $.getJSON("json"... (so no slashes) and all that it outputs is text, no html.

So am I using the plugin wrong?

Aaaaand here's the xml

http://www.siemvandenberg.com/insense/carousel-slides?debug

Why arent you using AJAX if you actually want to produce HTML?

uhm because I'm a noob? I don't know I thought this was some sort of an asynchronous javaScript call. Where should I start? I've never done anything AJAX like before in my life.

The thing is that content should be valid json, but must contain html to be shown as content.