jQuery UI Widgets Forums DataTable Error: Invalid Selector

This topic contains 4 replies, has 2 voices, and was last updated by  cpuin 8 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Error: Invalid Selector #71798

    cpuin
    Participant

    I got the following error, but can’t find wrong ID:
    [Error] Error: Invalid Selector – .printButtons! Please, check whether the used ID or CSS Class name is correct.
    (anonymous function) (jqx-all-3.7.1.js, line 7)
    rendered (menu.php, line 568)
    _renderrows (jqx-all-3.7.1.js, line 121)
    _render (jqx-all-3.7.1.js, line 121)
    update (jqx-all-3.7.1.js, line 121)
    j (jqx-all-3.7.1.js, line 121)
    databind (jqx-all-3.7.1.js, line 121)
    databind (jqx-all-3.7.1.js, line 121)
    render (jqx-all-3.7.1.js, line 121)
    createInstance (jqx-all-3.7.1.js, line 121)
    applyWidget (jqx-all-3.7.1.js, line 7)
    (anonymous function) (jqx-all-3.7.1.js, line 7)
    each (jquery-1.11.1.min.js, line 2)
    each (jquery-1.11.1.min.js, line 2)
    (anonymous function) (jqx-all-3.7.1.js, line 7)
    (anonymous function) (menu.php, line 551)
    j (jquery-1.11.1.min.js, line 2)
    fireWith (jquery-1.11.1.min.js, line 2)
    ready (jquery-1.11.1.min.js, line 2)
    J (jquery-1.11.1.min.js, line 2)

    
    $("#saleTable").jqxDataTable(
    	                    {
    	                        width: 920,
    	                        height: 325,
    	                        pageable: true,
    	                        pagerButtonsCount: 10,
    	                        source: dataAdapter,
    	                        filterable: false,
    	                        filterMode: 'simple',
    	                        editable: true,
    	                        editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
    	                        showAggregates: true,
    	                        aggregatesHeight: 60,
    	                        columnsResize: false,
    	                        altRows: true,
    	                        rendered: function () {
    	                         			//PRINT DOWNLOAD -------------------------------------                   
    	                                        $(".printButtons").jqxButton({ width: 60, template: "inverse" });
    	                        				$(".printButtons").on('click', function (event) {
    	                        					if (event.target.tagName =="BUTTON") {
    	                        					        var row = $(event.target).attr('data-row');
    	                        					        var cellValueAcct = $("#saleTable").jqxDataTable('getCellValue', row, 'Acct');
    	                        					        }
    	                        					        else {
    	                        					        	
    	                        					        }
    	                        			   });
    	                        			},
    	                        columns: [
    	                        //{ text: 'ID', dataField: 'IDs', width: 140, editable: false },
    	                          { text: 'Код', dataField: 'codes', width: 150, editable: false, editable:false },
    	                          { text: 'Описание', dataField: 'names', width: 420,editable:false},
    	                          { text: 'Количество', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right'},
    	                          { text: 'Ед.Цена', dataField: 'prices', width: 80, cellsAlign: 'right', align: 'right' },
    	                          { text: 'Отст. %', dataField: 'discount', width: 80, cellsAlign: 'right', align: 'right' },
    	                          { text: 'Тотал', dataField: 'total', width: 80, cellsAlign: 'right', align: 'right', editable:false, aggregates: [{
    	                                                    'Total':
    	                                                      function (aggregatedValue, currentValue, column, record) {
    	                                                          var total = currentValue * parseInt(record['quantity']);
    	                                                          return aggregatedValue + total;
    	                                                      }
    	                                                }],
    	                                                aggregatesRenderer: function (aggregates, column, element) {    
    	                                                    var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
    	                                                    renderString += "<strong>Total: </strong>" + aggregates.Total + "</div>";
    	                                                    return renderString;
    	                                                } },
    	                                                
    	                          { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    	                                                     // render custom column.
    	                                                     return "<button data-row='" + row + "' class='printButtons'>Печат</button>";
    	                          						
    	                          							
    	                                                 }
    	                           }
    	                        ]
    	                        
    	                    });
    
    Error: Invalid Selector #71820

    Dimitar
    Participant

    Hello cpuin,

    We have tested your example with some sample data and it runs fine and without any errors:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../sampledata/generatedata.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var data = [{
                    IDs: 2,
                    codes: 333,
                    names: 'Alan',
                    quantity: 13,
                    prices: 3.99,
                    discount: 0,
                    total: 51.87
                }];
    
                var source = {
                    localData: data,
                    dataType: "array",
                    dataFields: [{
                        name: 'IDs'
                    }, {
                        name: 'codes'
                    }, {
                        name: 'names'
                    }, {
                        name: 'quantity'
                    }, {
                        name: 'prices'
                    }, {
                        name: 'discount'
                    }, {
                        name: 'total'
                    }]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#saleTable").jqxDataTable({
                    width: 920,
                    height: 325,
                    pageable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    filterable: false,
                    filterMode: 'simple',
                    editable: true,
                    editSettings: {
                        saveOnPageChange: true,
                        saveOnBlur: true,
                        saveOnSelectionChange: true,
                        cancelOnEsc: true,
                        saveOnEnter: true,
                        editSingleCell: true,
                        editOnDoubleClick: true,
                        editOnF2: true
                    },
                    showAggregates: true,
                    aggregatesHeight: 60,
                    columnsResize: false,
                    altRows: true,
                    rendered: function() {
                        //PRINT DOWNLOAD -------------------------------------                   
                        $(".printButtons").jqxButton({
                            width: 60,
                            template: "inverse"
                        });
                        $(".printButtons").on('click', function(event) {
                            if (event.target.tagName == "BUTTON") {
                                var row = $(event.target).attr('data-row');
                                var cellValueAcct = $("#saleTable").jqxDataTable('getCellValue', row, 'Acct');
                            } else {
    
                            }
                        });
                    },
                    columns: [{
                            text: 'ID',
                            dataField: 'IDs',
                            width: 140,
                            editable: false
                        }, {
                            text: 'Код',
                            dataField: 'codes',
                            width: 150,
                            editable: false,
                            editable: false
                        }, {
                            text: 'Описание',
                            dataField: 'names',
                            width: 420,
                            editable: false
                        }, {
                            text: 'Количество',
                            dataField: 'quantity',
                            width: 80,
                            cellsAlign: 'right',
                            align: 'right'
                        }, {
                            text: 'Ед.Цена',
                            dataField: 'prices',
                            width: 80,
                            cellsAlign: 'right',
                            align: 'right'
                        }, {
                            text: 'Отст. %',
                            dataField: 'discount',
                            width: 80,
                            cellsAlign: 'right',
                            align: 'right'
                        }, {
                            text: 'Тотал',
                            dataField: 'total',
                            width: 80,
                            cellsAlign: 'right',
                            align: 'right',
                            editable: false,
                            aggregates: [{
                                'Total': function(aggregatedValue, currentValue, column, record) {
                                    var total = currentValue * parseInt(record['quantity']);
                                    return aggregatedValue + total;
                                }
                            }],
                            aggregatesRenderer: function(aggregates, column, element) {
                                var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
                                renderString += "<strong>Total: </strong>" + aggregates.Total + "</div>";
                                return renderString;
                            }
                        },
    
                        {
                            text: '',
                            cellsAlign: 'center',
                            columnType: 'none',
                            width: 65,
                            editable: false,
                            sortable: false,
                            dataField: null,
                            cellsRenderer: function(row, column, value) {
                                // render custom column.
                                return "<button data-row='" + row + "' class='printButtons'>Печат</button>";
                            }
                        }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="saleTable">
        </div>
    </body>
    </html>

    However, the error will be thrown if there is no data to display, or, in our case: var data = [];. As a workaround, do the following:

    rendered: function () {
    	//PRINT DOWNLOAD -------------------------------------                   
    	if ($('.printButtons').length > 0) {
    	    $(".printButtons").jqxButton({ width: 60, template: "inverse" });
    	    $(".printButtons").on('click', function (event) {
    	        if (event.target.tagName == "BUTTON") {
    	            var row = $(event.target).attr('data-row');
    	            var cellValueAcct = $("#saleTable").jqxDataTable('getCellValue', row, 'Acct');
    	        }
    	        else {
    
    	        }
    	    });
    	}
    },

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Error: Invalid Selector #71852

    cpuin
    Participant

    Dear Dimitar,

    The problem is exactly where no data is returned!How to solve this?
    I had similar problems with dataTable in the past and wrote many times, when no data is returned there is infinity “loading”…

    Error: Invalid Selector #71868

    Dimitar
    Participant

    Hi cpuin,

    I already specified how to solve this issue. Please take a look again at the second (smaller) code snippet from my previous post. You would have to put your rendered code in an if statement.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Error: Invalid Selector #71917

    cpuin
    Participant

    thank you! it works now

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

You must be logged in to reply to this topic.