jQuery UI Widgets Forums Grid Sizzle error when loading ‘local’ xml data

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Dror Saddan
    Member

    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:

    jQuery.fn.extend.findjquery-1.7.1.js:5339
    jQuery.fn.jQuery.initjquery-1.7.1.js:187
    jQuery.fn.jQuery.initjquery-1.7.1.js:192
    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 Stoev
    Keymaster

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.