jQuery Selector escaping colon ":" works in IE but does not work elsewhere

Question

I have an XSL object. I want to extract a select group of nodes. Another person or team wrote the XSL document and the line of code which selects those nodes, but it only works in IE and I'm trying to make it cross-browser compatible.

XSL file

<!-- snippet of XSL file -->
<xsl:variable name="title">aaa</xsl:variable>

<xsl:variable name="col1">CSV00001</xsl:variable>
<xsl:variable name="col2">CSV00002</xsl:variable>
<xsl:variable name="col3">CSV00003</xsl:variable>
<xsl:variable name="col4">CSV00004</xsl:variable>
<xsl:variable name="col5">CSV00005</xsl:variable>
<xsl:variable name="col6">CSV00006</xsl:variable>
<xsl:variable name="col7">CSV00007</xsl:variable>
<xsl:variable name="col8">CSV00008</xsl:variable>
<xsl:variable name="col9">CSV00009</xsl:variable>

JS file

// Extract title and column nodes
var varNodes = $(csvXsl).find("xsl\\:variable");

I tried referencing this article for ideas, Handling a colon in an element ID in a CSS selector, but that is for CSS. But I did attempt to replace the \: with the \\3A, \\3a, 3a, 3A and none of those worked.

Any suggestions?

As requested, here is a litle more info on how the XSL object gets created.

function loadXml(xmlFilePath) {
    var retObj = null ;
    var timeUniq = (new Date()).getTime();

    // check protocol
    var protocol = document.location.protocol;
    if(protocol.toLowerCase().indexOf("http")>=0){
        $.ajax({
            url: xmlFilePath + "?t=" + timeUniq,
            type: 'get',
            dataType: 'xml',
            async: false,
            timeout: 1000
        })
           .done(
               function(xml, status){
                   if( status != 'success' ){
                       return;
                   }
                   retObj = xml;
               })
           .fail(
               function(xhr, textStatus){
                   return;
               });
    }

    return retObj;
}

csvXsl = loadXml("./xsl/OrderListCSV.xsl");

Thank you.

Update

As requested, I have added a fiddle.

http://jsfiddle.net/Q3jNN/

Update2

Working JSFiddle routine with all the credit to commentator Niet.

http://jsfiddle.net/dNDN6/2/

In case the link is broken, here is the relevant portion:

// Workaround for JQuery bug, primarily using Vanilla JS.

function serializeXmlNode(xmlNode) {
    if (typeof window.XMLSerializer != "undefined") {
        return (new window.XMLSerializer()).serializeToString(xmlNode);
    } else if (typeof xmlNode.xml != "undefined") {
        return xmlNode.xml;
    }
    return "";
}

var tmpStr = serializeXmlNode(csvXsl); // Converts XML/XSL object to String
var tmp = document.createElement('div');

tmp.innerHTML = csvXsl; // Does not work
tmp.innerHTML = tmpStr; // This one works, had to serialize object first

var varNodes = tmp.getElementsByTagName('xsl\:variable'); // Works
var varNodes2 = tmp.getElementsByTagName('xsl:variable'); // Also works

Answer 1

I would do a number of steps to debug this issue:

1. Check the content of the csvXls variable, you can try for example to look for: console.log(csvXsl) then $(csvXsl).find("xsl\\:variable"); or $("xsl\\:variable",csvXsl);

2. If that variable contains the correct nodes, for example <xsl:variable name="col9">CSV00009</xsl:variable> then it could be a bug in jQuery, which I feel to exclude in such a basic selector.

3. Post how do you get the csvXsl with a bit more context, so we can help you better.

Answer 2

This is indeed a bug in jQuery.

Try using Vanilla JS instead:

var tmp = document.createElement('div');
tmp.innerHTML = csvXsl;
var varNodes = tmp.getElementsByTagName('xsl:variable');

Answer 3

must comment by 'Answer' since not enough reps

the line:

 var inputTag = $("#test\\:1").val()); 

in the fiddle supposedly showing what works : http://jsfiddle.net/dNDN6/2/

actually does not work in Chrome / webkit

the correct method is to use plain JS and getElementsByTagName first on the tag without the namespace (after the colon) and if no element then the full tag like so:

var x = xmlDoc.getElementsByTagName("variable");
if (!x[0]) x = xmlDoc.getElementsByTagName('xsl:variable');

x will contain your array [cross-browser]