I have an options array:
settings: {
'magnify': false,
'nobinds': true,
'nospoiler': false,
'replies': true,
'stickies': true,
'autogif': true,
'autowebm': true,
'resamplewebm': false,
'archives': true,
'linkifier': true,
'menu': ''
},
I save/get the data like this:
loadSettings: function() {
chrome.storage.local.get(Board.settings, function(items) {
console.log(chrome.runtime.lastError);
console.log(items);
Board.settings = items;
for(var key in Board.settings) {
console.log("loaded [" + key + "] = " + Board.settings[key] + " - \"" + items[key] + "\"");
if(typeof(Board.settings[key]) == 'boolean') {
Board.switchCheckboxAttribute($('#theme-' + key), Board.settings[key]);
} else if(typeof(Board.settings[key]) == 'string') {
$('#theme-' + key).val(Board.settings[key]);
}
}
});
},
saveSettings: function() {
chrome.storage.local.set(Board.settings, function() {
console.log(chrome.runtime.lastError);
$('#theme-msg').html("Done").attr("class", "msg-ok").show().delay(2E3).fadeOut(500);
Board.applySettings();
});
},
switchCheckboxAttribute: function(obj, active) {
console.log('switchCheckboxAttribute(' + obj.attr('id') + ', ' + active + ')');
if(active){
obj.addClass('active');
obj.html("✔");
} else {
obj.removeClass('active');
obj.html('');
}
},
Console output:
undefined board.js:74
Object {archives: true, autogif: true, autowebm: true, linkifier: true, magnify: false…} board.js:75
loaded [archives] = true - "true" board.js:80
switchCheckboxAttribute(theme-archives, true) board.js:107
loaded [autogif] = true - "true" board.js:80
switchCheckboxAttribute(theme-autogif, true) board.js:107
loaded [autowebm] = true - "true" board.js:80
switchCheckboxAttribute(theme-autowebm, true) board.js:107
loaded [linkifier] = true - "true" board.js:80
switchCheckboxAttribute(theme-linkifier, true) board.js:107
loaded [magnify] = false - "false" board.js:80
switchCheckboxAttribute(theme-magnify, false) board.js:107
loaded [menu] = - "" board.js:80
loaded [nobinds] = true - "true" board.js:80
switchCheckboxAttribute(theme-nobinds, true) board.js:107
loaded [nospoiler] = false - "false" board.js:80
switchCheckboxAttribute(theme-nospoiler, false) board.js:107
loaded [replies] = true - "true" board.js:80
switchCheckboxAttribute(theme-replies, true) board.js:107
loaded [resamplewebm] = false - "false" board.js:80
switchCheckboxAttribute(theme-resamplewebm, false) board.js:107
loaded [stickies] = true - "true" board.js:80
switchCheckboxAttribute(theme-stickies, true) board.js:107
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
switchCheckboxAttribute(theme-resamplewebm, true) board.js:107
undefined
The last runtime error is undefined both times, but when I save data and reload, the saved array stays the same (default). Am I handling this incorrectly?
Answer: Turns out I was updating the visible checkbox on jQuery click, but I did not update the settings value so it did not change, and the change was not recorded when saved.
Related
I set a button .onclick to be false and I get the false value in my PHP program:
$confirm = (isset($_GET['confirm']) ? $_GET['confirm'] : '');
I set the variable confirm in my script to the PHP value. In the Kendo dataBinding I check if confirm is false, execute e.preventDefault(). While e.preventDefault() is executing, it appears that the Kendo Grid is trying to be rebuilt and gets in an infinite loop. Please advise.
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'PM_PipeMachineDelay.php?mode=DisplayAll',
dataType: 'json'
}
},
serverFiltering: true
});
$(document).ready(function(){
$("#grid").kendoGrid({
dataSource: sharedDataSource,
dataBound: onDataBound,
height: 700,
sortable: true,
resizeable: true,
selectable: 'row',
dataBinding: function(e) {
if (confirm == "false") {
e.preventDefault();
}
},
change: function(e) {
var gview = $("#grid").data("kendoGrid");
var selectedItem = gview.dataItem(gview.select());
window.location.href = 'PM_PipeMachineDelay.php?mode=Display' +
'&DSTNNO=' + selectedItem.DSTNNO +
'&DSTNID=' + selectedItem.DSTNID +
'&DPRDTE=' + selectedItem.DPRDTE +
'&DPRSHF=' + selectedItem.DPRSHF +
'&DDCATG=' + selectedItem.DDCATG +
'&DDTYPE=' + selectedItem.DDTYPE +
'&DSTTME=' + selectedItem.DSTTME +
'&DSPTME=' + selectedItem.DSPTME +
'&DDTIME=' + selectedItem.DDTIME +
'&DOPRNO=' + selectedItem.DOPRNO +
'&DINV=' + selectedItem.DINV +
'&OSTTME=' + selectedItem.DSTTME +
'&SecLevel=' + selectedItem.SecLevel;
},
filterable: {mode: "row"}, // this seems to make the complete row filterable
/* remember this filter is for the client only; it doesn't go back to the server*/
columns:[
{hidden: true, field: "SecLevel"},
{hidden: true, field: "OSTTME"},
{title:"Station No", field:"DSTNNO", headerFilter:"input"},
{title:"Station ID", field:"DSTNID", headerFilter:"input"},
{title:"Station Description", field:"DSTNDSC", headerFilter:"input"},
{title:"Production Date", field:"DPRDTE", headerFilter:"input"},
{title:"Production Shift", field:"DPRSHF", headerFilter:"input"},
{title:"Delay Category", field:"DDCATG", headerFilter:"input"},
{title:"Delay Type", field:"DDTYPE", headerFilter:"input"},
{title:"Start Time", field:"DSTTME", headerFilter:"input"},
{title:"Stop Time", field:"DSPTME", headerFilter:"input"},
{title:"Delay Time", field:"DDTIME", headerFilter:"input"},
{title:"Operator", field:"DOPRNO", headerFilter:"input"},
{title:"Inventory #", field:"DINV", headerFilter:"input"},
],
});
});```
My web application which is using highchart v4.2.5 runs fine. However,when I update chrome to 62.0.3202.62, It goes wrong. Here is the error message:
highcharts.unminified.js:25 Uncaught TypeError: Cannot use 'in' operator to search for '0' in arguments_marker
at forEach (<anonymous>)
at s (highcharts.unminified.js:25)
at c.drawTrackerGraph [as drawTracker] (highcharts.unminified.js:330)
at c.render (highcharts.unminified.js:271)
at highcharts.unminified.js:232
at Array.forEach (<anonymous>)
at s (highcharts.unminified.js:25)
at C.Chart.renderSeries (highcharts.unminified.js:231)
at C.Chart.render (highcharts.unminified.js:233)
at C.Chart.firstRender (highcharts.unminified.js:236)
Only the data and the chrome version will results in the problem.Data is too big, so I keep it in a txt file.However , I can't upload the txt file, so I just give a sample of the data. My javascript code is as follows:
<div id="perfCPU"></div>
var mydata = [{x: "1509562856000",y: 137.55},{x: "1509562857000",y: 137.67},{x: "1509562858000",y: 137.67},{x: "1509562859000",y: 137.68},{x: "1509562861000",y: 137.83},{x: "1509562862000",y: 137.89}]
specialLine({domId: 'perfCPU', unit: "%", name: 'CPU', data: mydata,color: '#ffc966'})
function formatTime(unixTimeStamp) {
var date = new Date(unixTimeStamp) ;
var hours = date.getHours()
var minutes = "0" + date.getMinutes() //如果是3分4秒,那么返回的分钟数字是3.如果是13分4秒,返回的分钟数字是13
var seconds = "0" + date.getSeconds()
return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2) //-2是从倒数第2个元素开始
}
function specialLine(config) {
//计算tickPositions的值
//转化data的横坐标为数字
var length = config.data.length
if (length > 0) {
var i =0 ;
for (i; i< length; i++) {
config.data[i].x = config.data[i].x - '' //将 "1487312495" to number
}
var startTime = config.data[0].x - '';
var endTime = config.data[length - 1].x - '';
var interval = ~~((endTime - startTime) /3)
var tickPositions = [];
if (length >=4) {
tickPositions = [startTime,startTime +interval,startTime +2*interval,endTime]
}else if(length == 3) {
tickPositions = [startTime, ~~((endTime + startTime)/2),endTime]
} else if(length == 2) {
tickPositions = [startTime,endTime]
} else if(length == 1) {
tickPositions = [startTime]
}
Highcharts.chart(config.domId, {
title: {
text: '',
},
xAxis: {
tickPositions: tickPositions,
labels: {
enabled: true,
formatter: function () {
//将timestamp转化为日期
return formatTime(this.value)
}
}
},
tooltip: {
//将timestamp转化为时间
useHTML: true,
formatter: function() {
//return DrawPic.formatTime(this.point.x) + '<br>' + config.name + ':' +this.point.y + config.unit
var showHtml = formatTime(this.point.x) + '<br>' + config.name + ':' +this.point.y + config.unit
return showHtml
}
},
legend: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: false
}
},
series: {
color: '#ffc966',
turboThreshold:0
}
},
credits: {
enabled: false
},
series: [{
name: 'whatever',
data: config.data
}]
});
}
}
https://jsfiddle.net/phbLL3q8/
I am working on adding ajax call to paper-icon-buttons that are rendered in an ag-grid cell renderer. Here is the script in my custom polymer component. The paper-icon-buttons do show up and clicking on them causes the ripple, but the functions in the on-tap are not being called.
Is there a better way to add the paper-icon-button entries to the cell? How can I add the registration of the on-tap properly?
Thank you!
<script>
function sourceRenderer(params) {
if (params.value)
return '<span>' + params.value + ''
else
return null;
}
function innerCellRendererA(params) {
var imageFullUrl = '/images/' + params.data.type + '.png';
if (params.data.type == 'entity') {
var entityUrl = '/analyze/' + params.data.asource + '/' + params.data.amodel + '/' + params.data.sourceName;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + ' (' + params.data.sourceName + ')';
}
else if (params.data.type == 'model') {
var entityUrl = '/harvest/' + params.data.asource + '/' + params.data.name;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + '';
}
else
return '<paper-icon-button src="'+imageFullUrl+'" on-tap="testjdbc" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' +
'<paper-icon-button src="/images/database_export.svg" on-tap="harvestmodel" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + params.data.name;
}
Polymer({
is: 'easymetahub-analyze',
properties: {
sourcelist: {
type: Array,
notify: true
}
},
testjdbc: function(e){
alert('Foo');
var args = e.target.getAttribute('data-args').split('~~');
},
harvestmodel: function(e){
alert('Bar');
var args = e.target.getAttribute('data-args').split('~~');
},
handleData: function(e) {
var resp = e.detail.response;
this.sourcelist = resp;
},
ready: function() {
},
attached: function() {
agGrid.initialiseAgGridWithWebComponents();
var columnDefs = [
{
headerName: "Name",
'field': 'name',
width: 350,
cellRenderer: 'group',
sort: "asc",
cellRendererParams: {
innerRenderer: innerCellRendererA
}
},
{headerName: "Database Type", field: "databasetype", width: 120 },
{headerName: "URL", width: 250, field: "url" },
{headerName: "User Name", field: "username", width: 120 }
];
var gridOptions = {
columnDefs: columnDefs,
enableColResize: true,
rowHeight: 36,
enableSorting: true,
getNodeChildDetails: function(file) {
if (file.children) {
return {
group: true,
children: file.children,
expanded: file.open,
field: 'name',
key: file.name
};
} else {
return null;
}
},
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
this.$.myGrid.setGridOptions(gridOptions);
var eInput = this.$.quickFilterInput;
eInput.addEventListener("input", function () {
var text = eInput.value;
gridOptions.api.setQuickFilter(text);
});
},
detached: function() {
this.$.myGrid.api.destroy();
}
});
</script>
agGrid's grid options has a property for a callback -- onModelUpdated -- that is called when new rows are added to the grid.
attached: function() {
var self = this;
var gridOptions = {
...
onModelUpdated: function(e) {
self._bindGridIconTap();
}
};
}
You could use this event to query the grid for its paper-icon-buttons and add their on-tap attributes as event handlers.
_bindGridIconTap: function() {
this._bindActionsOnGrid('paper-icon-button', 'tap');
},
_bindActionsOnGrid: function(selector, eventName) {
var self = this;
var buttons = this.$.myGrid.querySelectorAll(selector);
buttons.forEach(function(b) {
self._bindEvent(b, eventName);
});
},
_bindEvent: function(el, eventName) {
var self = this;
var methodName = el.getAttribute('on-' + eventName);
var method = self[methodName];
if (method) {
el.addEventListener(eventName, function(e) {
method(e);
e.stopPropagation();
e.preventDefault();
return false;
});
} else {
console.warn(el.localName, 'listener method not found:', methodName);
}
}
plunker
Note you have a bug in:
var args = e.target.getAttribute('data-args').split('~~');
In a tap event for paper-icon-button, e.target is the icon image. You actually want e.currentTarget, which I've done for you in the Plunker.
I know this question was asked before but those answers are not helpful to me.Here i'm using iscroll, i get this console error "Cannot read property 'children' of null at object.Iscroll" when reloading page. Can anyone help me.
function IScroll (el, options) {
this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style; // cache style for better performance
this.options = {
resizeScrollbars: true,
mouseWheelSpeed: 20,
snapThreshold: 0.334,
// INSERT POINT: OPTIONS
startX: 0,
startY: 0,
scrollY: true,
directionLockThreshold: 5,
momentum: true,
bounce: true,
bounceTime: 600,
bounceEasing: '',
preventDefault: true,
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },
HWCompositing: true,
useTransition: true,
useTransform: true
};
for ( var i in options ) {
this.options[i] = options[i];
}
// Normalize options
this.translateZ = this.options.HWCompositing && utils.hasPerspective ? ' translateZ(0)' : '';
this.options.useTransition = utils.hasTransition && this.options.useTransition;
this.options.useTransform = utils.hasTransform && this.options.useTransform;
this.options.eventPassthrough = this.options.eventPassthrough === true ? 'vertical' : this.options.eventPassthrough;
this.options.preventDefault = !this.options.eventPassthrough && this.options.preventDefault;
// If you want eventPassthrough I have to lock one of the axes
this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;
// With eventPassthrough we also need lockDirection mechanism
this.options.freeScroll = this.options.freeScroll && !this.options.eventPassthrough;
this.options.directionLockThreshold = this.options.eventPassthrough ? 0 : this.options.directionLockThreshold;
this.options.bounceEasing = typeof this.options.bounceEasing == 'string' ? utils.ease[this.options.bounceEasing] || utils.ease.circular : this.options.bounceEasing;
this.options.resizePolling = this.options.resizePolling === undefined ? 60 : this.options.resizePolling;
if ( this.options.tap === true ) {
this.options.tap = 'tap';
}
if ( this.options.shrinkScrollbars == 'scale' ) {
this.options.useTransition = false;
}
this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;
// INSERT POINT: NORMALIZATION
// Some defaults
this.x = 0;
this.y = 0;
this.directionX = 0;
this.directionY = 0;
this._events = {};
// INSERT POINT: DEFAULTS
this._init();
this.refresh();
this.scrollTo(this.options.startX, this.options.startY);
this.enable();
}
The above issue is fixed, some undefined value stored in my 'el',i fix it, now it is working fine, Thanks for your views.
My WCF returns this JSON and i want to bind to HighCharts Pie
Original from WCF -[{"AllRecordsUrl":"http:\/\/EMS\/sites\/IST\/report.aspx","EMSCenterName":"IST","EMSCenterUrl":"http:\/\/EMS\/sites\/IST","Count":2},{"AllRecordsUrl":"http:\/\/EMS\/sites\/LSS\/report.aspx","EMSCenterName":"LSS","EMSCenterUrl":"http:\/\/EMS\/sites\/LSS","Count":17}]
If i hardCode it in cart series as data: [....] it works but the dynamic proccesed data does not..
After processing - [{name: 'IST' , url: 'http://EMS/sites/IST/report.aspx' , y: 2 },{name: 'LSS' , url: 'http://EMS/sites/LSS/report.aspx' , y: 16 }]
Even after processing it to what i showed above highcharts Pie won't work with my data..
I am not sure what is wrong here, would appreciate some guidance
Here's what is done so far ...
function getDataForHub(json) {
var realArray = $.makeArray(json);
//debugger;
//console.log(JSON.stringify(realArray));
var obj = $.parseJSON(JSON.stringify(realArray));
var chartData = [];
$.each(realArray, function (index, item) {
var final;
var element;
var sB = '';
var name = '';
var url = '';
var y = '';
var color = '';
for (element in item) {
if (element == 'EMSCenterName') {
name = 'name' + ": " + "'" + item[element] + "'";
}
if (element == 'AllRecordsUrl') {
url = 'url' + ": " + "'" + item[element] + "'";
}
if (element == 'Count') {
y = 'y' + ": " + item[element];
}
}
sB = name + ' , ' + url + ' , ' + y ;
//console.log(sB);
var elements = [];
//adding each to an array before being pushed to th final array,
elements.push(sB);
chartData.push(elements);
});
return chartData;
}
And here is my Pie
$(function () {
LoadSodByKey("sp.ui.dialog.js", null);
var stdWidth = 530;
var stdHeight = 200;
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
$('#containerpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
height: stdHeight + 120,
width: stdWidth + stdHeight
},
title: {
text: 'Records per Program'
},
tooltip: {
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
/*formatter: function () {
return '<b>' + this.point.name;
}*/
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: false
}
},
series: [{
type: 'pie',
size: stdHeight,
data:[{name: 'IST' , url: 'http://EMS/sites/IST/report.aspx' , y: 2 },{name: 'LSS' , url: 'http://EMS/sites/LSS/report.aspx' , y: 16 }],
point: {
events: {
click: function(e) {
//alert(e.point.url);
var options = {
url: e.point.url,
title: e.point.name,
allowMaximize: true,
showClose: true,
width: 1100,
height: 500,
dialogReturnValueCallback: function (result, returnValue) {
//location.reload(true);
}
}
SP.UI.ModalDialog.showModalDialog(options);
e.preventDefault();
}
}
}
}]
});
var data = GetData();});
function GetData(){
var chart = $('#containerpie').highcharts();
series = chart.series[0];
//Ajax call to WCF service
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
crossDomain: false,
url: 'http://EMS/_vti_bin/EMSDashboard.svc/GetEMSCenterDataForHub',
data: null,
dataType: 'json',
success: function (response) {
var dynamicData = getDataForHub(response);
//this doesnot work
//series.data = dynamicData;
//even this does not work
//series.data.push(dynamicData)
//Wrong, wrong, wrong
//series.data.push(eval('[' +dynamicData +']'));
//gives me count of two but the chart does not load wiht dynamic data
console.log(series.data.length);
},
error: function (message) {
alert(message.statusText);
}
});
}
Thanx
FIXED:
Here's how
mistake = I had set up a static chart and was trying to use the same with $AJAX call where the chart was already created without the "data" being created, instead now the "data" array is created first and then the chart is created using chart = new Highcharts.Chart({....})
Also removed all client side preprocessing of the JSON received from WCF i.e my server object has additional Properties for Highchart rendering such to get ..
[{"name":"IST","url":"http:\/\/<XXXX>\/sites\/IST\/ASASA.aspx","y":2},
{"name":"LASS","url":"http:\/\/<XXXX>\/sites\/LASS\/ASASA.aspx","y":17}]