Develop Reference

i got this error multiple times on angular 6 until browser freeze

[Violation] Added non-passive event listener to a scroll-blocking
'touchstart' event. Consider marking event handler as 'passive' to
make the page more responsive
i am trying to use Tabulator in angular with success.but after a while the grid stop responding and then the browser, i am updating the grid content every 1 min using observable. aftr 4 times everything stucks with this issue....
//define table options
this.flatTableOptions = {
reactiveData: true,
data: this.currentTrafficServices,
columns: [
{
title: 'SERVICES',
field: 'displayName'
},
{
title: 'OCCURRENCES',
field: 'connectionQuantity'
},
{
title: 'STARTING FROM',
field: 'firstSeen',
mutator: this.milliToDate
},
{
title: 'LAST UPDATE',
field: 'lastSeen',
mutator: this.milliToDate
}
],
// persistentSort: true,
selectable: true,
layout: "fitColumns"
};
//create table
this.flatTable = new Tabulator('#tabulator-flat', this.flatTableOptions);
this.flatTable.redraw(true);
Does anybody know how to fix this? or should I give up on Tabulator with Angular?

That was a console warning rather than an error, it would have had no affect on your tables function, as #Shual mentions it is more to do with performance optimisation than functionality.
As of version v4.4 this behaviour has been optimised an you will no longer see these warnings in your console

Check if datatables is empty after table is fully loaded jQuery

After doing some research on this issue trying to find a solution (unfortunately to no avail) I decided that it might be best to post my problem. I currently have a Datatable containing asset information on a view and I'm trying to prevent a user from continuing change an option on a select field until an asset is added to the asset table.
Listed below is my assets datatable code in my .js file under the document.ready function
assets = $('#assets').dataTable({
sAjaxSource: "http://" + window.location.hostname + "/request/get-request-assets/?id=" + $('#id').val(),
fnDrawCallback: function (oSettings) {
setIncompleteTD();
enableRequestStatus();
},
scrollY: '185px',
scrollCollapse: true,
paging: false,
aaSorting: [[1, 'asc']],
bPaginate: false,
bFilter: false,
bLengthChange: false,
bAutoWidth: false,
bInfo: false,
aoColumns: [
{sWidth: '35px', bSortable: false},
{sWidth: '40px'},
{},
{},
{},
{},
{},
{sWidth: '80px'}
],
language: {
sLoadingRecords: '',
sEmptyTable: 'This request has no asset records.',
sInfoEmpty: ''
}
I've found table.fnSettings().aoData.length===0 as a means to check if a table is empty. However, after stepping through the code (via Chrome debugger) it seems Datatables (at least in my case) calls the function before the table is fully generated...
I have this code below
assetPresent = (assets.fnSettings().aoData.length===0) ? false : true;
console.log(assetPresent);
in my document.ready function after $('#assets').dataTable() function (if this matters). AssetPresent will be used as a flag to toggle the status select box. Unfortunately before I can utilize that...
console.log(assetPresent);
Seems to always be set to false even if there are clearly records in the table, and...
assetPresent = (assets.fnSettings().aoData.length===0) ? false : true;
Tends to be ignored...
I'm curious to see if table.fnSettings().aoData.length===0 might not be the best option. Thank you in advance.

Have you tried, table.data().length yet?

you can try this
var table = $('#assets').DataTable();
if ( ! table.data().any() ) {
alert( 'Empty table' );
}

jQuery dataTable 1.9.4 fnReloadAjax gives "TypeError: k is undefined" error

JQuery dataTables are used extensively in our web app, and usually they don't give a problem. But there's this one that has this bug where during the execution of fnReloadAjax, it gives the error "TypeError: k is undefined", which is coming from the dataTables.js line where "fnServerData:function(e,j,m,k)" occurs. Here's the dataTable definition:
url = '?p=user.creation_rules_browser&page_action=getData';
data_table = jQuery('#data').dataTable({
bJQueryUI: true,
sDom: '<"template-box"fl><"template-box"ip><"template-box"r><"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all template-box" t><"template-box"p<"toolbar">>',
sAjaxSource: url,
bPaginate: false,
bProcessing: true,
bAutoWidth: false,
bSort:false,
bFilter:false,
bInfo:false,
aoColumns: [
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
]
} );
It loads up perfectly, but there's a column with an action menu that lets you edit the row. This pops up a jQuery Dialog which executes the following when you hit "Save":
jQuery.getJSON('index.php',{
p: "user.creation_rules_browser",
page_action: "edit_rule",
rule_name: rule_name_val,
target_field: $('#input_target_field').val(),
action_value: action_value_val,
action_set_to_blank: action_set_to_blank_val,
id: data.id
}, function (json) {
if (json.error) {
Dialog.alert({title: "Error Saving Rule"}, json.error);
} else {
jQuery(self).dialog('close');
url = 'index.php?p=user.creation_rules_browser&page_action=getData';
data_table.fnReloadAjax(url);
}
}
The Save actually works, but the dataTable doesn't get reloaded because of that error. It should go back to that url and "getData" and reload, but it gets stuck in fnServerData because k is undefined. This k corresponds to oSettings in the non-min fnServerData declaration, but I've done a console.log and verified that fnGetSettings returns the expected copy of oSettings. Originally, url wasn't being passed in the call to fnReloadAjax, so I thought that might be a problem and added it in, but got the same result.
So I don't get why it's undefined. I guess my next step would be to use the non-min version of dataTables.js, and add some debugging in there, but I'm hoping somebody here will find some simple thing that's being done wrong in the code.

Never mind, I found where obsolete versions of dataTables and fnReloadAjax were being loaded in addition to the current versions. Taking that out fixed it.

Possible jQuery/jqGrid problem in IE8

I have a grid constructed with jqGrid, that uses the search toolbar, a custom formatter to insert radio boxes and a loadComplete handler.
Everything works fine in FF but when I go to IE8 (shame!!!) the screen would freeze with the data loaded and the Loading... box on the screen. I can do nothing on the screen.
Here is my code:
function loadCompleteHandler(){
jQuery("#listTable").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" ondblclick="inDetail();"/>';
return radio;
}
function statusSelect(){
#set($select = ":$l10n.lbl_123")
#foreach($se in $status_list)
#set($select = $select + ";$se.getValue():$se.getValue()")
#end
return "$select";
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("/servlet/ajax/MyServlet.json")' + '?loggedUserId=$loggedUserId&pageNo=0&locale=' + '$l10n.getLocale().toString()',
datatype: 'json',
mtype: 'POST',
colNames:['','$l10n.lbl_copy','$l10n.lbl_476','$l10n.lbl_380', '$l10n.lbl_2547<br/>$l10n.lbl_3768','$l10n.lbl_owner','$l10n.lbl_256 $l10n.lbl_92','$l10n.lbl_1558<br>$l10n.lbl_185','$l10n.lbl_348'],
colModel :[
{name:'column1', index:'column1', width:'3%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'column2', index:'column2', width:'6%', search:false, align:'center', formatter:'checkbox', sortable: false, resizable:false},
{name:'column3', index:'column3', width:'12%', sortable: false, stype:'select', editoptions:{value: statusSelect()}, resizable:false},
{name:'column4', index:'column4', width:'17%', search:false, sortable: false, resizable:false},
{name:'column5', index:'column5', width:'10%', search:false, sortable: false, resizable:false},
{name:'column6', index:'column6', width:'13%', sortable: false, resizable:false},
{name:'column7', index:'column7', width:'13%', sortable: false, resizable:false},
{name:'column8', index:'column8', width:'12%', sortable: false, resizable:false},
{name:'column9', index:'column9', width:'14%', sortable: false, resizable:false}
],
width:'768',
height: 300,
loadonce:true,
pager: '#pagerDiv',
gridview: true,
rowNum:15,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false,
defaultSearch:'cn'}); /* search strategy meaning: contains */
});
I am using Velocity, jQuery 1.4.2. IE gives an invalid argument error in the jQuery library
at this line:
if ( set ) {
style[ name ] = value;
}
Maybe the problem is with jQuery in IE8, I don't know....
EDIT : more specific data added
I am using jqGrid 3.8.2.
The statusSelect after Velocity has processed it looks like this:
function statusSelect(){
return ":All;status1:status1;status2:status2";
}
I think there is no problem with the JSON data transfer since the grid previously worked in IE8 when there was no setGridHeight, loadComplete handler. I have also done some minor modifications which I can only partially recount (i.e. column resize disabled).
For testing purposes here is a JSON object:
{
"page":"1",
"records":2,
"rows":[{"id":150,"cell":[150,false,"status1","columnData4","columndata5","columndata6","columndata7","Test1\u003cbr/\u003e\u003cspan style\u003d\u0027float:right;\u0027\u003e10.12.2010\u003c/span\u003e","columnData"]},
{"id":157,"cell":[157,false,"status2","columnData41","columndata51","columnData61","columnData71","Test2\u003cbr/\u003e\u003cspan style\u003d\u0027float:right;\u0027\u003e22.12.2010\u003c/span\u003e","columnData"]}],
"total":50.0
}
I don't know how to use the total parameter, so I just declared an arbitrary value (50D).
The inDetail function just submits the form (I am using Apache Turbine parameter here):
function inDetail(){
document.forms['myForm'].eventSubmit_doAction.value = 'doSomeAction';
document.forms['myForm'].submit();
}

I could not reproduce the problem which you describe. How you can see here the grid can be loaded without any problem in IE. It looks not fine because of missing CSSs, but all works in general. So I suppose you have problem in the code which you not publish here. I recommend you to verify your HTML page in http://validator.w3.org/, your test JSON results in http://www.jsonlint.com/ and JavaScript code in http://www.jslint.com/.
I would only not recommend you to use radio variable inside of the function with the same name radio. Better to choose another name. It is better also to add 10 as the second parameter of the parseInt function. In my tests your original code worked also without the corresponding code changes.

DataView hides spawning ComboBox

I posted this at the Ext forums a couple of days ago, but no response, so maybe better luck here.
I currently have a combo box loading data from php through ajax. Everything works fine except that when my results are returned, the DataView covers the ComboBox (fig 2.) I have included the relevant code below, so any help would be greatly appreciated.
I may be wrong, but I think I've eliminated CSS problems, as the DataView element is rendered with an absolute position.
alt text http://img.skitch.com/20100216-8t4pmbc3e6mydqqrac9qm9ucj.jpg
fig 1.
alt text http://img.skitch.com/20100216-n5t44g8rua7fawkwjrj49fk7t4.jpg
fig 2.
var dataStore = new Ext.data.JsonStore({
url: '/ajaxGateway.php',
root: 'data',
baseParams: {
useClass: 'App_GeoIP_GeoIP',
useMethod: 'getLocationsStartingWith'
},
fields: [
{name:'text', mapping:'TITLE'},
{name:'stateName', mapping:'STATE_NAME'},
{name:'regionHierarchy', mapping:'REGION_HIERARCHY'},
{name:'id', mapping:'ID', type:'int'},
{name:'lat', mapping:'LATITUDE', type:'float'},
{name:'lng', mapping:'LONGITUDE', type:'float'}
]
});
_
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item" style="text-align:left">',
'<span>{text}, <small>{stateName}</small></span>',
'</div></tpl>'
);
_
var locationBasedRulesTree = new Ext.tree.TreePanel({
title: 'Location Based Regions',
height: 329,
width: 480,
autoScroll: true,
useArrows: true,
animate: false,
rootVisible: false,
frame: true,
enableDrag: true,
root: new Ext.tree.AsyncTreeNode({
id:'custom_root'
}),
tbar: new Ext.Toolbar(),
listeners:
{
listenersHandlers...: function(){}
}
});
_
locationBasedRulesTree.getTopToolbar().addField(
new Ext.form.ComboBox({
store: dataStore,
displayField: 'text',
typeAhead: false,
loadingText: 'Finding...',
blankText: "Search for a Place...",
width: (Ext.isIE6) ? 155:200,
hideTrigger: true,
forceSelection: true,
selectOnFocus:true,
tpl: resultTpl,
itemSelector: 'div.search-item',
enableKeyEvents: true,
onSelect: function(record)
{
selectHandler...();
},
listeners:
{
keypress : function(comboBox, event) {
keypressHandler...();
}
}
})
);

Hard to say. The first thing I would do is rip the combo box out of your layout and try rendering it to a plain page and see if you still have this issue (should be simple to do). That will immediately confirm or rule out that it's related to your particular layout. You also did not mention whether or not this happens only in particular browser/OS combinations -- if so, it could be an Ext bug. If it happens in any browser, then it's probably an issue with your layout. Try narrowing it down first then maybe it will be more obvious where to go next.

It looks almost like the listAlign or hideParent are set wrong.. I'm not seeing that in your definition, but would double-check... try setting those to configuration options manually. I've also had issues with IE when not setting the listWidth config property.