Question

I have some jQuery code that, without it in the document it passes validation fine, but with it in it causes errors. The code in question is here:

    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function(xml) {

            //Update error info
            errors = $(xml).find("Errors").find("*").filter(function ()
            {
                return $(this).children().length === 0;
            });

            if (errors.length == 0)
            {
                statuscontent = "<img src='/web/resources/graphics/accept.png' alt='' /> System OK";
            }
            else
            {
                statuscontent = "<img src='/web/resources/graphics/exclamation.png' alt='' /> "+errors.length+" System error"+(errors.length>1?"s":"");
            }

            $("#top-bar-systemstatus a").html(statuscontent);

            //Update timestamp
            $("#top-bar-timestamp").html($(xml).find("Timestamp").text());

            //Update storename
            $("#top-bar-storename").html("Store: "+$(xml).find("StoreName").text());
        }
    });

There are loads of other jQuery code on the page which all works fine and causes no errors so I cannot quite understand what is wrong with this. The page isn’t “live” so cannot provide a link to it unfortunately.

The error it lists is

document type does not allow element “img” here

And the line of code it points to is here:

 statuscontent = "<img src='/web/resources/graphics/accept.png' alt='' /> System OK";

It also has an issue with the next assignment to statuscontent

Answer 1

It’s because you are using XHTML. This is invalid indeed as the validator acts as if the code between the script tags is XML (XHTML is a subset of XML). This is invalid XHTML, as img-tags don’t belong inside of script-tags.

To make it validate, use CDATA to escape any XML within your script.

<script type="text/javascript">
// <![CDATA[

... your code
// ]]>
</script>

---

In HTML 5 this is not an issue. If you make a new website I’d recommend HTML 5 over XHTML. Use XHTML only if you are modifying an existing website.