Search

Hi all,

I have started using Symphony a few weeks ago and I ran into some weird problem.

In one website which frontend was written with jquery and foundation, the static html+js version works perfect, but when I ran it through symphony it was giving me an error in the javascript console: "Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document." It wasn't actually affecting the functionality but I thought it was odd. so I copied the html generated by the xslt and copied it into a static html file and it was executed without errors.

Now I'm doing another website and +- the same problem happened again, but this time it is affecting the functionality (on the iphone only, weirdly). I'm using jquery and royalslider for this. Exact same generated html works fine if copied into a static html but not when served by symphony.

In the picture im attaching is what I get if I request the static html (on the left) and the symphony page (on the right). exact same html, which I copied from the symphony output into the static page.

Is this an encoding problem? I see that the content-length on symphony's page is much higher.. and for some reason Fetch (the app im using to get the request) is colouring one and not the other??

Any ideas?

Thank you! This is driving me crazy..

Without seeing your markup (the picture is not attached) i can give you some hints:
Try to use js external as much as possible.
When you use it inline to render some variables with xslt i always use this trick which works for me:
Try to wrap the markup that fails to render in a text node with CDATA: <xsl:text disable-output-escaping="yes"><![CDATA[ 'javascript here' ]]></xsl:text>
This will leave the markup unchanged...

Are you using HTML5 boolean attributes? For example <input type='text' required /> is technically valid HTML5, but XSLT requires it to be <input type='text' required='required' />.

Hi both, thanks for the help.

For some reason, my screenshot didn't attach, here goes. But it's not that important anyway, I feel that the specific markup is not that important either as it's giving me an error on external libraries but just to clarify, I'm pretty much only using external js files (except for one function call) and the actual html is valid. In fact, for some weird reason the website works on the laptop browsers, just not on the mobile, where it's giving me the error I mentioned (although on a previous website the error was present on all browsers).

But the exact same code works well on mobile when copied into static files.. and because the content-length is different, I'm suspecting an encoding problem.. but I have no idea on how to go around this :

Attachments:
Screen Shot 2014-05-22 at 01.09.49 .png

We would need to see the whole code, but thats out of my scope. Anyway, what Symphony version do you use?

I've used with Symphony all kinds of things the last 3 years, also foundation and often royal slider, and had no such problems. Might be tricky. I would recommend to debug your page step by step. Remove all scripts, create or add just some other js library with a similar insert function etc.

Thank you Juro,

I did that now. I downloaded the latest version of symphony and installed from scratch in XAMPP. Created a new Page, copied RoyalSlider to a js folder in the workspace and added the following very basic code to the Page:

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

<xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">


<html>
  <head>
    &lt;script src="{$workspace}/js/royalslider/jquery-1.8.3.min.js">&lt;/script>
      &lt;script src="{$workspace}/js/royalslider/jquery.royalslider.min.js">&lt;/script>
      <link href="{$workspace}/js/royalslider/royalslider.css" rel="stylesheet" />
      <link href="{$workspace}/js/royalslider/skins/minimal-white/rs-minimal-white.css" rel="stylesheet" />
  </head>
  <body>


      <div id="full-width-slider" class="royalSlider heroSlider rsMinW">
        <img class="rsTmb" src="http://placehold.it/210x150" />
        <img class="rsTmb" src="http://placehold.it/220x150" />
        <img class="rsTmb" src="http://placehold.it/230x150" />
      </div>

      &lt;script>
            jQuery(document).ready(function($) {
              $('#full-width-slider').royalSlider({
                arrowsNav: true,
                loop: false,
                keyboardNavEnabled: true,
                controlsInside: false,
                imageScaleMode: 'fill',
                arrowsNavAutoHide: false,
                autoScaleSlider: true, 
                autoScaleSliderWidth: 960,     
                autoScaleSliderHeight: 350,
                controlNavigation: 'bullets',
                thumbsFitInViewport: false,
                navigateByClick: true,
                startSlideId: 0,
                autoPlay: false,
                transitionType:'move',
                globalCaption: false,
                deeplinking: {
                  enabled: true,
                  change: false
                },
                imgWidth: 1400,
                imgHeight: 680
              });
            });

        &lt;/script>
  </body>
</html>



</xsl:template>

</xsl:stylesheet>

This works fine in Chrome but gives me this error on Safari and Firefox and the slider doesn't work: TypeError: 'null' is not a valid argument for 'in' (evaluating 'r+"Transform"in d') in jquery.royalslider.min.js:3:263

In Firefox it gives me this error: TypeError: r.style is undefined in the jquery js.. so it's seems like a problem with jquery. I tried with the dev version of jquery (not min), importing from http://code.jquery.com/jquery-1.8.3.js and I get the same error.

(At first I thought it was just iOS but no, this just works fine in Chrome but not in Safari or Firefox mobile or desktop)

However, If I copy the output into a static html page it works fine on any browser I tested (also served through XAMPP, but outside the folder where I installed symphony):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    &lt;script src="http://10.2.80.23/test/workspace/js/royalslider/jquery-1.8.3.min.js">&lt;/script>
    &lt;script src="http://10.2.80.23/test/workspace/js/royalslider/jquery.royalslider.min.js">&lt;/script>
    <link href="http://10.2.80.23/test/workspace/js/royalslider/royalslider.css" rel="stylesheet" />
    <link href="http://10.2.80.23/test/workspace/js/royalslider/skins/minimal-white/rs-minimal-white.css" rel="stylesheet" />
  </head>
  <body>
    <div id="full-width-slider" class="royalSlider heroSlider rsMinW">
      <img class="rsTmb" src="http://placehold.it/210x150" />
      <img class="rsTmb" src="http://placehold.it/220x150" />
      <img class="rsTmb" src="http://placehold.it/230x150" />
    </div>
    &lt;script>
            jQuery(document).ready(function($) {
              $('#full-width-slider').royalSlider({
                arrowsNav: true,
                loop: false,
                keyboardNavEnabled: true,
                controlsInside: false,
                imageScaleMode: 'fill',
                arrowsNavAutoHide: false,
                autoScaleSlider: true, 
                autoScaleSliderWidth: 960,     
                autoScaleSliderHeight: 350,
                controlNavigation: 'bullets',
                thumbsFitInViewport: false,
                navigateByClick: true,
                startSlideId: 0,
                autoPlay: false,
                transitionType:'move',
                globalCaption: false,
                deeplinking: {
                  enabled: true,
                  change: false
                },
                imgWidth: 1400,
                imgHeight: 680
              });
            });

        &lt;/script>
  </body>
</html>

Can anyone think of any reason why this could happen? :) Thank you so much for your help, I'm sorry, this is really driving me crazy!

Have you tried the latest 1.x jQuery? I use the latest versions.

So its problem only with royal slider? Other JS works well? Do you have the latest RS version 9.5.4? And maybe some custom build of that, from the builder that Dmitry offers?

OK Got it! :D (Yes, I was using an old version of jquery but this is still an issue with the most up to date version)

I found other people in other forums having problems with jquery being added to pages generated through XSLT and what works for me is a combination of two things:

  • Adding this script before jquery: https://gist.github.com/atesgoral/352210

  • And the following code before any jquery call:

    if( !document.body ) document.body = document.documentElement.getElementsByTagName("body")[0];

So it's both a problem with namespaces and an issue with XSLT causing Gecko and Webkit to not set document.body for some reason.

So I'm not sure how or why this is an issue for some people but not for others, maybe it is related to the XSLT engines? But there you go, here is a fix :)

Thanks for the help!

Huh, I've been using HTML5 for quite a while now and almost forgot about the previous. HTML5 doctype works great even if you don't want to use any of the new HTML5 elements later on throughout the document, shivs scripts etc.

You can get HTML5 support with this HTML5 extension, and then start to get easy with html, but I'm afraid not in the whole scope, because XSLT requires closing of tags and pairs of their attributes. But still a very great thing.

Great you solved!

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details