jQuery Grid Plugin - jqGrid - Topic: How to map XML (HTML) data? http://www.trirand.com/blog/?page_id=393/help/how-to-map-xml-html-data Simple:Press Version 5.7.5.3 ryurage on How to map XML (HTML) data? http://www.trirand.com/blog/?page_id=393/help/how-to-map-xml-html-data#p25301 Help http://www.trirand.com/blog/?page_id=393/help/how-to-map-xml-html-data#p25301 Using jquery selectors in the xml map in the column model, something is not working and no data shows inside the grid. The column headings and actual grid do so I don't know if theres something wrong with my xmlmap. Ideas?

Here's my XML (it's XHTML but it's still valid XML):





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test2</title>
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script src="js/dialog.minimize.js"></script>
<link href="css/redmond/jquery-ui-1.8.10.custom.css" type="text/css" rel="Stylesheet"/>


<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />


</head>
<body>


<div style="display: block; z-index: 1014; outline: 0px none; position: absolute; height: auto; width: 1009px; top: 141px; left: 0px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all disposable ui-draggable ui-resizable">
        <div class="disposable ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: auto;">
            <div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 973px;">
                <div class="ui-widget-overlay jqgrid-overlay" style="display: none;"></div>


                <div class="ui-jqgrid-view" style="width: 973px;">
                    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="display: none;">
                        <a class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;"></a>
                    </div>


                    <div style="width: 973px;" class="ui-state-default ui-jqgrid-hdiv">
                        <div class="ui-jqgrid-hbox">
                            <table cellspacing="0" cellpadding="0" border="0" style="width: 955px;" class="ui-jqgrid-htable">
                                <thead>
                                    <tr class="ui-jqgrid-labels">
                                        <th class="ui-state-default ui-th-column ui-th-ltr" style="width: 20px;">
                                            <div>
                                                <input type="checkbox" class="cbox" />
                                            </div>
                                        </th>


                                        <th id="account" class="ui-state-default ui-th-column ui-th-ltr ui-state-hover" style="width: 33%;">
                                            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>


                                            <div class="ui-jqgrid-sortable">
                                                Account
                                            </div>
                                        </th>


                                        <th id="city" class="ui-state-default ui-th-column ui-th-ltr" style="width: 33%;">
                                            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>


                                            <div class="ui-jqgrid-sortable">
                                                City
                                            </div>
                                        </th>


                                        <th id="state" class="ui-state-default ui-th-column ui-th-ltr" style="width: 33%;">
                                            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>


                                            <div class="ui-jqgrid-sortable">
                                                State
                                            </div>
                                        </th>
                                    </tr>


                                    <tr class="ui-search-toolbar">
                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;"></div>
                                        </th>


                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;">
                                                <input type="text" name="Account" style="width: 95%; padding: 0px;" />
                                            </div>
                                        </th>


                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;">
                                                <input type="text" name="City" style="width: 95%; padding: 0px;" />
                                            </div>
                                        </th>


                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;">
                                                <input type="text" name="State" style="width: 95%; padding: 0px;" />
                                            </div>
                                        </th>
                                    </tr>
                                </thead>


                                <tbody>
                                    <tr>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="ui-jqgrid-bdiv" style="height: auto; width: 973px;">
                        <div style="position: relative;">
                            <table cellspacing="0" cellpadding="0" border="0" class="ui-jqgrid-btable" style="width: 955px;" id="root">
                                <tbody>
                                    <tr style="height: auto;" class="jqgfirstrow">
                                        <td style="height: 0px; width: 20px;"></td>


                                        <td style="height: 0px; width: 33%;"></td>


                                        <td style="height: 0px; width: 33%;"></td>


                                        <td style="height: 0px; width: 33%;"></td>
                                    </tr>
                                    <tr class="ui-widget-content jqgrow ui-row-ltr">
                                        <td style="text-align: center; width: 20px;"><input type="checkbox" name="jqg_aGrid836590176_1" class="cbox" /></td>
<!--                                         <td class="account"><a class="providerclick" href="/accounts/view/id/0">Entity 1</a></td> -->
                                        <td class="account">Entity 1, Inc.</td>
                                        <td class="city">Worland</td>
                                        <td class="state">WY</td>
                                    </tr>
                                    <tr class="ui-widget-content jqgrow ui-row-ltr">
                                        <td style="text-align: center; width: 20px;"><input type="checkbox" name="jqg_aGrid836590176_1" class="cbox" /></td>
<!--                                         <td class="account"><a class="providerclick" href="/accounts/view/id/1">Entity 2</a></td> -->
                                        <td class="account">Entity 2, Inc.</td>
                                        <td class="city">Rolling Hills</td>
                                        <td class="state">NY</td>
                                    </tr>
                                    <tr class="ui-widget-content jqgrow ui-row-ltr">
                                        <td style="text-align: center; width: 20px;"><input type="checkbox" name="jqg_aGrid836590176_1" class="cbox" /></td>
<!--                                         <td class="account"><a class="providerclick" href="/accounts/view/id/2">Entity 3</a></td> -->
                                        <td class="account">Entity 3, Inc.</td>
                                        <td class="city">Rockland</td>
                                        <td class="state">MA</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


                <div class="ui-jqgrid-resize-mark">
                    &nbsp;
                </div>


                <div style="width: 973px;" class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
                    <div class="ui-pager-control">
                        <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; height: 100%;" class="ui-pg-table">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <!-- <table cellspacing="0" cellpadding="0" border="0" style="float: left; table-layout: auto;" class="ui-pg-table navtable">
                                            <tbody>
                                                <tr>
                                                    <td class="ui-pg-button ui-corner-all" title="Find records">
                                                        <div class="ui-pg-div">
                                                            <span class="ui-icon ui-icon-search"></span>
                                                        </div>
                                                    </td>
                                                    <td class="ui-pg-button ui-corner-all" title="Reload Grid">
                                                        <div class="ui-pg-div">
                                                            <span class="ui-icon ui-icon-refresh"></span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table> -->
                                    </td>
                                    <td align="center" style="white-space: pre; width: 263px;"><table 
                                        cellspacing="0" cellpadding="0" border="0" class="ui-pg-table" style="table-layout: auto;">
                                            <tbody>
                                                <tr>
                                                    <td class="ui-pg-button ui-corner-all ui-state-disabled"><span
                                                         class="ui-icon ui-icon-seek-first"></span></td>
                                                    <td class="ui-pg-button ui-corner-all ui-state-disabled"><span 
                                                        class="ui-icon ui-icon-seek-prev"></span></td><td 
                                                    style="width: 4px;" class="ui-pg-button ui-state-disabled"><span 
                                                        class="ui-separator"></span></td>
                                                    <td dir="ltr">Page <input type="text" value="0" maxlength="7" size="2" class="ui-pg-input" /> of <span>3</span></td>
                                                    <td style="width: 4px;" class="ui-pg-button ui-state-disabled"><span 
                                                        class="ui-separator"></span></td><td 
                                                    class="ui-pg-button ui-corner-all"><span 
                                                        class="ui-icon ui-icon-seek-next"></span></td>
                                                    <td class="ui-pg-button ui-corner-all"><span 
                                                        class="ui-icon ui-icon-seek-end"></span></td><td 
                                                    dir="ltr"><select class="ui-pg-selbox"><option selected="selected" value="20">20</option><option value="40">40</option><option value="60">60</option></select></td>
                                                </tr>
                                            </tbody>
                                        </table></td>
                                    <td align="right">
                                        <div class="ui-paging-info" style="text-align: right;" dir="ltr">View 1 - 20 of 323</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>















Using jquery selectors in the xml map in the column model,  something is not working and no data shows inside the grid. The column  headings and actual grid do so I don't know if theres something wrong  with my xmlmap.  Ideas?


Here's my XML (it's XHTML but it's still valid XML):


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test2</title>
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script src="js/dialog.minimize.js"></script>
<link href="css/redmond/jquery-ui-1.8.10.custom.css" type="text/css" rel="Stylesheet"/>


<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />


</head>
<body>


<div style="display: block; z-index: 1014; outline: 0px none; position: absolute; height: auto; width: 1009px; top: 141px; left: 0px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all disposable ui-draggable ui-resizable">
        <div class="disposable ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: auto;">
            <div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 973px;">
                <div class="ui-widget-overlay jqgrid-overlay" style="display: none;"></div>


                <div class="ui-jqgrid-view" style="width: 973px;">
                    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="display: none;">
                        <a class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;"></a>
                    </div>


                    <div style="width: 973px;" class="ui-state-default ui-jqgrid-hdiv">
                        <div class="ui-jqgrid-hbox">
                            <table cellspacing="0" cellpadding="0" border="0" style="width: 955px;" class="ui-jqgrid-htable">
                                <thead>
                                    <tr class="ui-jqgrid-labels">
                                        <th class="ui-state-default ui-th-column ui-th-ltr" style="width: 20px;">
                                            <div>
                                                <input type="checkbox" class="cbox" />
                                            </div>
                                        </th>


                                        <th id="account" class="ui-state-default ui-th-column ui-th-ltr ui-state-hover" style="width: 33%;">
                                            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>


                                            <div class="ui-jqgrid-sortable">
                                                Account
                                            </div>
                                        </th>


                                        <th id="city" class="ui-state-default ui-th-column ui-th-ltr" style="width: 33%;">
                                            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>


                                            <div class="ui-jqgrid-sortable">
                                                City
                                            </div>
                                        </th>


                                        <th id="state" class="ui-state-default ui-th-column ui-th-ltr" style="width: 33%;">
                                            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>


                                            <div class="ui-jqgrid-sortable">
                                                State
                                            </div>
                                        </th>
                                    </tr>


                                    <tr class="ui-search-toolbar">
                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;"></div>
                                        </th>


                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;">
                                                <input type="text" name="Account" style="width: 95%; padding: 0px;" />
                                            </div>
                                        </th>


                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;">
                                                <input type="text" name="City" style="width: 95%; padding: 0px;" />
                                            </div>
                                        </th>


                                        <th class="ui-state-default ui-th-column ui-th-ltr">
                                            <div style="width: 100%; position: relative; height: 100%; padding-right: 0.3em;">
                                                <input type="text" name="State" style="width: 95%; padding: 0px;" />
                                            </div>
                                        </th>
                                    </tr>
                                </thead>


                                <tbody>
                                    <tr>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="ui-jqgrid-bdiv" style="height: auto; width: 973px;">
                        <div style="position: relative;">
                            <table cellspacing="0" cellpadding="0" border="0" class="ui-jqgrid-btable" style="width: 955px;" id="root">
                                <tbody>
                                    <tr style="height: auto;" class="jqgfirstrow">
                                        <td style="height: 0px; width: 20px;"></td>


                                        <td style="height: 0px; width: 33%;"></td>


                                        <td style="height: 0px; width: 33%;"></td>


                                        <td style="height: 0px; width: 33%;"></td>
                                    </tr>
                                    <tr class="ui-widget-content jqgrow ui-row-ltr">
                                        <td style="text-align: center; width: 20px;"><input type="checkbox" name="jqg_aGrid836590176_1" class="cbox" /></td>
<!--                                         <td class="account"><a class="providerclick" href="/accounts/view/id/0">Entity 1</a></td> -->
                                        <td class="account">Entity 1, Inc.</td>
                                        <td class="city">Worland</td>
                                        <td class="state">WY</td>
                                    </tr>
                                    <tr class="ui-widget-content jqgrow ui-row-ltr">
                                        <td style="text-align: center; width: 20px;"><input type="checkbox" name="jqg_aGrid836590176_1" class="cbox" /></td>
<!--                                         <td class="account"><a class="providerclick" href="/accounts/view/id/1">Entity 2</a></td> -->
                                        <td class="account">Entity 2, Inc.</td>
                                        <td class="city">Rolling Hills</td>
                                        <td class="state">NY</td>
                                    </tr>
                                    <tr class="ui-widget-content jqgrow ui-row-ltr">
                                        <td style="text-align: center; width: 20px;"><input type="checkbox" name="jqg_aGrid836590176_1" class="cbox" /></td>
<!--                                         <td class="account"><a class="providerclick" href="/accounts/view/id/2">Entity 3</a></td> -->
                                        <td class="account">Entity 3, Inc.</td>
                                        <td class="city">Rockland</td>
                                        <td class="state">MA</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


                <div class="ui-jqgrid-resize-mark">
                    &nbsp;
                </div>


                <div style="width: 973px;" class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
                    <div class="ui-pager-control">
                        <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; height: 100%;" class="ui-pg-table">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <!-- <table cellspacing="0" cellpadding="0" border="0" style="float: left; table-layout: auto;" class="ui-pg-table navtable">
                                            <tbody>
                                                <tr>
                                                    <td class="ui-pg-button ui-corner-all" title="Find records">
                                                        <div class="ui-pg-div">
                                                            <span class="ui-icon ui-icon-search"></span>
                                                        </div>
                                                    </td>
                                                    <td class="ui-pg-button ui-corner-all" title="Reload Grid">
                                                        <div class="ui-pg-div">
                                                            <span class="ui-icon ui-icon-refresh"></span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table> -->
                                    </td>
                                    <td align="center" style="white-space: pre; width: 263px;"><table 
                                        cellspacing="0" cellpadding="0" border="0" class="ui-pg-table" style="table-layout: auto;">
                                            <tbody>
                                                <tr>
                                                    <td class="ui-pg-button ui-corner-all ui-state-disabled"><span
                                                         class="ui-icon ui-icon-seek-first"></span></td>
                                                    <td class="ui-pg-button ui-corner-all ui-state-disabled"><span 
                                                        class="ui-icon ui-icon-seek-prev"></span></td><td 
                                                    style="width: 4px;" class="ui-pg-button ui-state-disabled"><span 
                                                        class="ui-separator"></span></td>
                                                    <td dir="ltr">Page <input type="text" value="0" maxlength="7" size="2" class="ui-pg-input" /> of <span>3</span></td>
                                                    <td style="width: 4px;" class="ui-pg-button ui-state-disabled"><span 
                                                        class="ui-separator"></span></td><td 
                                                    class="ui-pg-button ui-corner-all"><span 
                                                        class="ui-icon ui-icon-seek-next"></span></td>
                                                    <td class="ui-pg-button ui-corner-all"><span 
                                                        class="ui-icon ui-icon-seek-end"></span></td><td 
                                                    dir="ltr"><select class="ui-pg-selbox"><option selected="selected" value="20">20</option><option value="40">40</option><option value="60">60</option></select></td>
                                                </tr>
                                            </tbody>
                                        </table></td>
                                    <td align="right">
                                        <div class="ui-paging-info" style="text-align: right;" dir="ltr">Vie















]]>
        	        	Fri, 02 Dec 2011 07:53:24 +0200