Error: Invalid Selector - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cellsrenderer, Invalid Selector, jqxdatatable, rendered

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

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

Author

Error: Invalid Selector Posts

May 29, 2015 at 1:37 pm 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>";
	                          						
	                          							
	                                                 }
	                           }
	                        ]
	                        
	                    });

June 1, 2015 at 5:20 am 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/

June 1, 2015 at 2:32 pm 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”…

June 2, 2015 at 4:55 am 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/

June 2, 2015 at 1:09 pm Error: Invalid Selector #71917

cpuin

Participant

thank you! it works now

Author

Posts

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

You must be logged in to reply to this topic.