Sizzle error when loading ‘local’ xml data

[Dror SaddanMember]

I am trying to load ‘local’ XML data into the jqwidgets ver1.9 grid. Here is the code:

<blockquote>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
&lt;link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" /&gt;
    &lt;script type="text/javascript" src="scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxcore.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxdata.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxbuttons.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxscrollbar.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxmenu.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxcheckbox.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxlistbox.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxgrid.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/gettheme.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {
            var theme = getTheme();
            var getData = function () {
                return '\
        &lt;?xml version="1.0" encoding="utf-8" ?&gt;\
    &lt;Products&gt;\
        &lt;Product ProductID="1"&gt;\
        &lt;ProductName&gt;Chai&lt;/ProductName&gt;\
        &lt;SupplierID&gt;1&lt;/SupplierID&gt;\
        &lt;CategoryID&gt;1&lt;/CategoryID&gt;\
        &lt;QuantityPerUnit&gt;10 boxes x 20 bags&lt;/QuantityPerUnit&gt;\
        &lt;UnitPrice&gt;18.0000&lt;/UnitPrice&gt;\
        &lt;UnitsInStock&gt;39&lt;/UnitsInStock&gt;\
        &lt;UnitsOnOrder&gt;0&lt;/UnitsOnOrder&gt;\
        &lt;ReorderLevel&gt;10&lt;/ReorderLevel&gt;\
        &lt;Discontinued&gt;false&lt;/Discontinued&gt;\
        &lt;/Product&gt;\
    &lt;/Products&gt;';
            }
            // prepare the data
            var source =
            {
                localdata: getData(),
                datatype: "xml",
                datafields: [
                    { name: 'ProductName' },
                    { name: 'QuantityPerUnit' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID'
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value &lt; 20) {
                    return '&lt;span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;"&gt;' + value + '&lt;/span&gt;';
                }
                else {
                    return '&lt;span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;"&gt;' + value + '&lt;/span&gt;';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', width: 150 },
                  { text: 'Unit Price', datafield: 'UnitPrice', cellsalign: 'right', cellsformat: 'c2', width: 70 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', width: 100 },
                ]
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    Grid Example:
    &lt;div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"&gt;
        &lt;div id="jqxgrid"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</blockquote>

Here is the Sizzle error I receive (it is generated deep from within jQuery) :

Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );
};

The parameter msg contains “<”  which is the “<” at the start of the XML data (i.e “<Products …”).  This is a far as I was able to debug the issue. Here is a stack trace:

Uncaught Error: Syntax error, unrecognized expression:

Sizzle.errorjquery-1.7.1.js:4179

Sizzlejquery-1.7.1.js:3992

Sizzlejquery-1.7.1.js:5083

jQuery.fn.extend.findjquery-1.7.1.js:5339

jQuery.fn.jQuery.initjquery-1.7.1.js:187

jQueryjquery-1.7.1.js:27

jQuery.fn.jQuery.initjquery-1.7.1.js:192

jQueryjquery-1.7.1.js:27

a.jqx.dataAdapter.getidjqxdata.js:7

a.jqx.dataAdapter.loadxmljqxdata.js:7

a.jqx.dataAdapter.dataBindjqxdata.js:7

b.jqx.dataview.databindjqxgrid.js:7

b.extend.databindjqxgrid.js:7

b.extend.createInstancejqxgrid.js:7

(anonymous function)jqxcore.js:7

jQuery.extend.eachjquery-1.7.1.js:658

jQuery.fn.jQuery.eachjquery-1.7.1.js:271

a.jqx.jqxWidget.a.fn.(anonymous function)jqxcore.js:7

(anonymous function)HTMLPage2.htm:76

jQuery.Callbacks.firejquery-1.7.1.js:1046

jQuery.Callbacks.self.fireWithjquery-1.7.1.js:1164

jQuery.extend.readyjquery-1.7.1.js:435

DOMContentLoaded

Whats is the problem?

Any help will be greatly appreciated.

Dror (dror@caspit.biz)

[Peter StoevKeymaster]

Hi Dror Saddan,

The solution is to parse the XML by using the jQuery’s ParseXML function.

For example:

// prepare the data
var source =
{
    localdata: $($.parseXML(getData())),
    datatype: "xml",
    datafields: [
        { name: 'ProductName' },
        { name: 'QuantityPerUnit' },
        { name: 'UnitPrice', type: 'float' },
        { name: 'UnitsInStock', type: 'float' },
        { name: 'Discontinued', type: 'bool' }
    ],
    root: "Products",
    record: "Product",
    id: 'ProductID'
};

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts