I have this following code to fetch data from database and display as table.
var tables = $('#factsTable')
.DataTable({
"aProcessing": true,
"aServerSide": true,
"ajax": "includes/get-infacts.php",
})
.on('preInit.dt', function (e, settings) {
console.log('preInit.dt');
})
.on('init.dt', function () {
console.log('init.dt');
})
.on('draw.dt', function () {
console.log('draw.dt');
})
.on('search.dt', function () {
console.log('search.dt');
})
.on('select', function ( e, dt, type, indexes ) {
console.log('data table select');
});
In this code all the other event listeners are working for me except 'select' listener.
I don't know why is not working.
".dt" is missing..
....
.on('select.dt', function ( e, dt, type, indexes ) {
console.log('data table select');
Related
There's a 3rd-party library that creates table rows and buttons inside those rows. Both <tr> and <button> are constructed with an "onClick" property, but the authors forgot to call stopPropagation() and so when clicking a button it also triggers the <tr> handler:
render: (_text: any, record: TableRecord) => {
return createElement(
"button",
{
className: button.actionButtonClass,
onClick: () => {
onClickHandler(
record,
button.actionButtonOnClickAction,
button.actionButtonOnClickMf,
button.actionButtonOnClickNf,
button.actionButtonOnClickForm,
button.actionButtonOnClickOpenPageAs
);
}
I can't alter the code above, but I tried to add another handler:
mxtreetable.componentDidUpdate = function() {
mxtreetabledom.querySelectorAll(".actionButton").forEach((btn) => {
if (!btn._my_have_stopPropagation) {
btn._my_have_stopPropagation = true;
btn.addEventListener("click", function(ev) {
ev.stopPropagation();
});
}
});
};
However, I learned that PointerEvent is not handled directly. It first bubbles to the container, then in the container's click handler it's wrapped with SyntheticEvent and that SyntheticEvent is passed back to the button. So calling stopPropagation() on the native event will prevent what we defined in the "onClick" property.
How do I subscribe to SynteticEvent so I can call stopPropagation on that event?
Upd This is what I came up with. It's full of hacks
// https://github.com/mendixlabs/mendix-tree-table/issues/35 BEGIN
function installOnClickHook(props) {
if (!props.onClick._my_have_stopPropagation) {
var oldOnClick = props.onClick;
props.onClick = function(ev) {
oldOnClick.apply(this, arguments);
ev.stopPropagation();
};
props.onClick._my_have_stopPropagation = true;
}
}
mxtreetable.componentDidUpdate = function() {
mxtreetabledom.querySelectorAll(".actionButton").forEach((btn) => {
var props = FindReactProps(btn);
installOnClickHook(props);
});
};
function FindReactProps(dom) {
const key = Object.keys(dom).find(key=>{
return key.startsWith("__reactProps$")
});
// Somebody assigns another __reactProps to <button> without componentDidUpdate() on parent component
dom._my_props = dom[key];
Object.defineProperty(dom, key, {configurable: true, get: function() {
return this._my_props;
}, set: function (x) {
this._my_props = x;
installOnClickHook(x);
} });
return dom[key];
}
// https://github.com/mendixlabs/mendix-tree-table/issues/35 END
So I get some data into my socket
The code in Client is :
useEffect(() => {
const socket = io("http://localhost:5000/api/socket");
socket.on("newThought", (thought) => {
console.log(thought);
});
}, []);
And then the code in my server is
connection.once("open", () => {
console.log("MongoDB database connected");
console.log("Setting change streams");
const thoughtChangeStream = connection.collection("phonenumbers").watch();
thoughtChangeStream.on("change", (change) => {
io.of("/api/socket").emit("newThought", change);
});
});
When something in my "phonenumbers" collection gets changed I get in return the whole collection . How would I be able to only get the array that got changed from the object in collection?
So for example if in the collection the only service that changed is the one with id "607deefd13c4ebcbcfa0900a" that should be the only one returned and not the whole collection object.
The fullDocument parameter to the options (second) argument to the watch method can be used to get a delta describing the changes to the document for update operations:
const thoughtChangeStream = connection.collection("phonenumbers").watch([], {
fullDocument: 'updateLookup'
});
thoughtChangeStream.on("change", (change) => {
io.of("/api/socket").emit("newThought", change);
});
This will then return a response document like this where updateDescription contains the fields that were modified by the update:
{
_id: {
_data: '8260931772000000012B022C0100296E5A1004ABFC09CB5798444C8126B1DBABB9859946645F696400646082EA7F05B619F0D586DA440004'
},
operationType: 'update',
clusterTime: Timestamp { _bsontype: 'Timestamp', low_: 1, high_: 1620252530 },
ns: { db: 'yourDatabase', coll: 'yourCollection' },
documentKey: { _id: 6082ea7f05b619f0d586da44 },
updateDescription: {
updatedFields: { updatedField: 'newValue' },
removedFields: []
}
}
Note: This will only work for update operations and will not work for replace, delete, insert, etc.
See also:
http://mongodb.github.io/node-mongodb-native/3.0/api/Collection.html.
https://docs.mongodb.com/manual/reference/change-events/
On submitting a form with some updated values, I need to update the state to reflect these changes, but I am new to Immutable.js and am unsure how to do so.
Is it possible to pass a function as a 2nd argument to set or update to update values based on certain criteria.
I have a function which receives state and an array of objects called values. The data in values looks like this:
[
{
key: 'name',
value: 'fred'
},
{
key: 'height',
value: '201'
},
{
key: 'weight',
value: '78'
}
]
I need to map over this data, and the state list, and update the corresponding values in the state list with the values array.
How can I do this. I have put together a function which the Reducer calls to update the state with the new data, but unsure exactly how to get the end result
function updateValue(state, values = []) {
const items = state.get('items').map((i) => {
const key = i.get('key');
values.map(v => {
if (v.key === key) {
return state.update('value', v.value);
}
})
});
return state.update('items', /* Can I use a function here to replace the code above.. to update all of the items in the state List that correspond to the items in the measurements array (which have new values) */);
}
Thank you very much.
Update
Tried the following, but getting the error: Expected [K, V] tuple: i
function updateValue(state, values = []) {
const items = state.get('items').map((i) => {
const key = i.get('key');
values.map(v => {
if (v.key === key) {
return state.update('value', v.value);
}
})
});
return state.update('items', items);
}
More details on the error from Immutable:
function validateEntry(entry) {
if (entry !== Object(entry)) {
throw new TypeError('Expected [K, V] tuple: ' + entry);
}
}
You can use 'merge' to return new object:
return state.merge({
items: values,
});
I have a piece of code inside an angular controller that requests three services for data. Once the last service returns, I'm taking the data from all and merge it into a dataset. Out of the nested loops, my "vm" instance of this have the values I want the way I want (using a $log.debug to the console) but when I try to access in the view it has the value of initialization.
Here is my code:
function loadConfigs(userId) {
// Load the apps the user have access to
aimsApps.getAccessibleApps()
.then((resApps) => {
vm.apps = resApps.data;
// Load notifications types
aimsNotificationTypes.getNotificationTypes()
.then((resTypes) => {
vm.types = resTypes;
// Load the configurations for a user
aimsNotificationConfigs.getNotificationConfigs(userId)
.then((resConfigs) => {
vm.configs = resConfigs;
// Create a store like notification[app][type] and load the configs
$log.debug('ALL RESOLVED', vm.apps, vm.types, vm.configs);
vm.apps.forEach((eApp) => {
vm.notifSettings[eApp.name] = [];
vm.types.forEach((eType) => {
vm.configs.forEach((eConfig) => {
if ((eConfig.app === eApp.name) && (eConfig.notificationType === eType.name)) {
vm.notifSettings[eApp.name][eType.name] = eConfig;
} else {
vm.notifSettings[eApp.name][eType.name] = {
app: eApp.name,
user: userId,
notificationType: eType.name,
sendToWeb: true,
sendToEmail: true,
sendToSMS: true,
};
}
});
});
});
$log.debug('NOTIF CONFIG', vm.notifSettings);
});
});
});
}
When this line $log.debug('NOTIF CONFIG', vm.notifSettings); is reached, I can see in the console the values for vm.notifSettings but my view doesn't reflect those changes.
Any suggestions?
I am trying to find out how to get cell changed event using the Excel object
Excel.run(function (ctx) {
}
in office 2016.
is the context used by Office.context.document is same as context used in run function
found the answer for this.
Binding concept used earlier can be used now also as shown in the example https://github.com/OfficeDev/office-js-docs/blob/master/reference/excel/bindingcollection.md
(function () {
// Create myTable
Excel.run(function (ctx) {
var table = ctx.workbook.tables.add("Sheet1!A1:C4", true);
table.name = "myTable";
return ctx.sync().then(function () {
console.log("MyTable is Created!");
//Create a new table binding for myTable
Office.context.document.bindings.addFromNamedItemAsync("myTable", Office.CoercionType.Table, { id: "myBinding" }, function (asyncResult) {
if (asyncResult.status == "failed") {
console.log("Action failed with error: " + asyncResult.error.message);
}
else {
// If successful, add the event handler to the table binding.
Office.select("bindings#myBinding").addHandlerAsync(Office.EventType.BindingDataChanged, onBindingDataChanged);
}
});
})
.catch(function (error) {
console.log(JSON.stringify(error));
});
});
// When data in the table is changed, this event is triggered.
function onBindingDataChanged(eventArgs) {
Excel.run(function (ctx) {
// Highlight the table in orange to indicate data changed.
var fill = ctx.workbook.tables.getItem("myTable").getDataBodyRange().format.fill;
fill.load("color");
return ctx.sync().then(function () {
if (fill.color != "Orange") {
ctx.workbook.bindings.getItem(eventArgs.binding.id).getTable().getDataBodyRange().format.fill.color = "Orange";
console.log("The value in this table got changed!");
}
else
})
.then(ctx.sync)
.catch(function (error) {
console.log(JSON.stringify(error));
});
});
}
})();