I am trying to add mutation observation for new element in a page. But my code below does not show "change observed" when new element is loaded in the page.
setTimeout(() => {
const observer = new MutationObserver(mutations => {
console.log("change obervered!!!")
console.log(mutations)
var seconds = new Date().getTime() / 1000
console.log(seconds)
dict["Paul Yang"] = seconds
})
targets = document.getElementsByClassName("XEazBc adnwBd")
length = document.getElementsByClassName('XEazBc adnwBd').length
console.log(targets)
console.log("length is: ", length)
for (let i = 0; i < length; i++) {
console.log("add one observer")
observer.observe(targets.item(i), {
childList: true,
attributes: true,
characterData: true,
subtree: true,
})
}
}, 2000);
Related
I'm able to correctly query data from the OSM api.
I can also show highways and trunks correctly on the map.
However, the query gives me back always results for a fixed zoom even if my current zoom is higher.
this is how i do my call:
var opl = new L.OverPassLayer({
minZoom: 14,
query: '(way({{bbox}})["highway"~"^(' + query + ')$"];);(._;>;);out geom;',
onSuccess: function (data) {
console.log(data);
urlxml = data.urlxml;
data = data.result;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
//document.getElementById("demo").innerHTML = xhttp.responseText;
$("#fileData").text(xhttp.responseText);
console.log(xhttp.responseText);
}
};
xhttp.open("GET", urlxml, true);
console.log(urlxml);
xhttp.send();
console.log(urlxml);
for (let i = 0; i < data.elements.length; i++) {
let pos;
let marker;
const e = data.elements[i];
if (e.id in this._ids) {
continue;
}
this._ids[e.id] = true;
if (e.type === "way") {
let posWay = [];
for (let j = 0; j < e.geometry.length; j++) {
pos = L.latLng(e.geometry[j].lat, e.geometry[j].lon);
posWay.push(pos);
}
var polyline = L.polyline(posWay, { color: "blue" }).addTo(map);
}
console.log("DATA: " + JSON.stringify(data.elements));
}
},
});
How can i get results from the current view only?
Thank you.
I'm facing a strange behavior in Ag-grid (Angular). When I use the serverSide option and when there is no data returned from the server, the grid is showing the loading icon for all the rows mentioned in the cacheBlockSize. I've tried as many options I could to hide these empty loading rows, but nothing has worked out.
I've tried to replicate the same in the official example page. Luckily I could replicate the similar behavior. Refer to this edited version of an official example page, where I'm passing an empty array from the fake server call:
https://plnkr.co/edit/Egw9ToJmNE7Hl6Z6
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get('https://www.ag-grid.com/example-assets/olympic-winners.json')
.subscribe((data) => {
let idSequence = 0;
data.forEach((item) => {
item.id = idSequence++;
});
const server = new FakeServer(data);
const datasource = new ServerSideDatasource(server);
params.api.setServerSideDatasource(datasource);
});
}
}
function ServerSideDatasource(server) {
return {
getRows: (params) => {
setTimeout(() => {
const response = server.getResponse(params.request);
if (response.success) {
params.successCallback(response.rows, response.lastRow);
} else {
params.failCallback();
}
}, 2000);
},
};
}
function FakeServer(allData) {
return {
getResponse: (request) => {
console.log(
'asking for rows: ' + request.startRow + ' to ' + request.endRow
);
const rowsThisPage = allData.slice(request.startRow, request.endRow);
const lastRow = allData.length <= request.endRow ? data.length : -1;
return {
success: true,
rows: [],
lastRow: lastRow,
};
},
};
}
The screenshot of the plunker output is given below.
Just figured out that its a problem with lastRow value. If the rows are empty but lastRow is not -1, then its trying to load the data and showing the loading icon for all the rows as per the cacheBlockSize.
Fixed code below:
function FakeServer(allData) {
return {
getResponse: (request) => {
console.log(
'asking for rows: ' + request.startRow + ' to ' + request.endRow
);
let data = []; //allData;
const rowsThisPage = data.slice(request.startRow, request.endRow);
const lastRow = data.length <= request.endRow ? data.length : -1;
return {
success: true,
rows: rowsThisPage,
lastRow: lastRow,
};
},
};
}
Update for AG Grid 28:
function FakeServer(allData) {
return {
getResponse: (params) => {
const request = params.request;
console.log(
'asking for rows: ' + request.startRow + ' to ' + request.endRow
);
let data = []; //allData;
const rowsThisPage = data.slice(request.startRow, request.endRow);
const lastRow = data.length <= request.endRow ? data.length : -1;
params.success({ rowData: rowsThisPage, rowCount: lastRow });
},
};
}
All dropdown selected item value getting from first oDATA and Second oDATA.
Once select or choose all dropdown
value item then
I want to push all
selected item value to third oDATA.(Eg: After click Append button)
Sample Screenshot Image Output Code below:
function() {
//get first dropdown box selected key from first odata
var plant = sap.ui.getCore().byId("plant").getSelectedKey();
if (plant != 0) {
var sServiceUrl = "/sap/opu/odata/SAP/Z_M_EPM_BOM_SRV/";
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
var filterList = [];
var i;
filterList.push(new sap.ui.model.Filter("Plant", sap.ui.model.FilterOperator.EQ, plant));
// first dropdown box selected value filter to second odata key
oModel.read("/MatCharFieldSet", {
context: null,
async: false,
filters: filterList,
urlParameters: {
"$expand": "MatCharValuesSet"
},
success: function(data) {
var res = data.results;
var content = [];
for (i = 0; i < res.length; i++) {
content.push(new sap.m.Label({
text: res[i].DescrChar,
name: res[i].FieldName
}));
var items = [];
for (var j = 0; j < res[i].MatCharValuesSet.results.length; j++) {
items.push(new sap.ui.core.Item({
text: res[i].MatCharValuesSet.results[j].FieldValue,
key: res[i].MatCharValuesSet.results[j].FieldValue
}));
}
content.push(new sap.m.Select({
items: items
}));
}
fields = new sap.ui.layout.form.SimpleForm({
editable: true,
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
labelSpanL: 4,
labelSpanM: 4,
adjustLabelSpan: true,
emptySpanL: 0,
emptySpanM: 0,
columnsL: 4,
columnsM: 4,
content: content
});
fields.placeAt("fields", "only");
}
How to push all selected value item to another oDATA ?
SAMPLE SCREENSHOT
var getAllSelectInstances = $(".sapMSlt").control();
getAllSelectInstances.forEach(function(oSelect){
var getSelectedItem = oSelect.getSelectedItem();
var getSelectedText = getSelectedItem ? getSelectedItem.getText() : null;
Console.log("Selected Value : " + getSelectedText);
});
Need to show a pop-up when user clicks on the line. Code as below but does not work:
var ClickLon;
var ClickLat;
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
var lonlat = map.getLonLatFromPixel(e.xy);
ClickLon = lonlat.lon;
ClickLat = lonlat.lat;
}
});
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
id = feature.id;
alert(ClickLon);
var lonLat = new OpenLayers.LonLat(ClickLon, ClickLat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
popup = new OpenLayers.Popup.FramedCloud("chicken",
lonLat,
null,
"<div style='font-size:.8em'>" +CableLineText_arr[id] +"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
...
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
selectControl = new OpenLayers.Control.SelectFeature(lineLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
drawControls = {
polygon: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Polygon),
select: selectControl
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
Map projection is EPSG:4326.
Line drawing as:
var points = new Array(
new OpenLayers.Geometry.Point(47, 32.24),
new OpenLayers.Geometry.Point(45, 33),
new OpenLayers.Geometry.Point(49, 35)
);
var line = new OpenLayers.Geometry.LineString(points);
line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
alert(lineFeature.id);
lineLayer.addFeatures([lineFeature]);
Trying to combine these two examples: http://openlayers.org/dev/examples/select-feature-openpopup.html and http://openlayers.org/dev/examples/click.html
I do not see the place where you activate your control.SelectFeature.
I am trying to add a customized mymenubutton, the menu's items are based on another dropdown's selected value, which returns a json array with bunch items.
So I use the example http://fiddle.tinymce.com/gaaaab which could create mymenubutton for the first time, but when the drop down list changes, how should I re-init this control and rebind json array to mymenubutton?
function generateTokensList(result) {
tinymce.create('tinymce.plugins.ExamplePlugin', {
createControl: function (n, cm) {
switch (n) {
case 'mysplitbutton':
var c = cm.createSplitButton('mysplitbutton', {
title: 'My split button',
image: 'some.gif',
onclick: function () {
alert('Button was clicked.');
}
});
c.onRenderMenu.add(function (c, m) {
m.add({ title: 'Tokens', 'class': 'mceMenuItemTitle' }).setDisabled(1);
var insertVar = function (val) {
return function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val); }
};
for (var i = 0; i < result.length; i++) {
var field = result[i].field;
var variable = insertVar(result[i].field);
m.add({ title: result[i].name, onclick: variable });
}
});
// Return the new splitbutton instance
return c;
}
return null;
}
});
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
}
Solved this by myself. Bind the data to a variable and each time just call var.
c.onRenderMenu.add(function (c, m) {
m.add({ title: 'Tokens', 'class': 'mceMenuItemTitle' }).setDisabled(1);
var insertVar = function (val) {
return function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val); }
};
for (var i = 0; i < tokens.length; i++) {
var field = tokens[i].field;
var variable = insertVar( '[['+tokens[i].name+']]');
m.add({ title: '[['+tokens[i].name+']]', onclick: variable });
}
});