Strange conversion of time- and datetime-format in knockout.JS - javascript

I have a table in my SQL Server database with two column
'whenDateTime' (datetime,null)
'duration' (time(7),null)
From my javascript I call a JSON-service with
$.getJSON("myService/GetAllHappenings",
function (allData) {
var mappedAction = $.map(allData, function (item) {
return new Happening(item)
});
self.Happenings(mappedAction);
//... some other code...
});
where
self.Happenings = ko.observableArray();
When inspecting "myService/GetAllHappenings" as an URL in my browser (Firefox) I get:
<duration>PT1M</duration>
<whenDateTime>2014-11-12T11:26:00</whenDateTime>
In the database the values are:
sduration whenDateTime
00:01:00.0000000 2014-11-12 11:26:00.000
But when I step through the $.getJSON the values are ok until the line
self.Happenings(mappedAction);
Before this line mappedAction contains the data
"2014-11-12T11:26:00"
"00:01:00"
But just after this line the data are transformed into
"30.06.2020 11:26"
"00:00"
How can this happen?
And how can I fix this?

I think super cool's answer is good. I've ran into weird problems trying to instantiate jQuery-UI datepickers on top of <input type="text"> elements that are supposed to display datetimes when I send them over as datetimes.

Related

Datatable on row-reorder data oldData and newData is undefined

I am currently rewriting my datatable from CodeIgniter (datatables v1.10.12 and RowReorder v1.1.2) to Laravel 6 (datatables v1.10.20 and RowReorder v1.2.6). On the event 'row-reorder' i need to collect data about the changes. Therefore i use this script.
$('#category-table').on('row-reorder.dt', function (dragEvent, data, nodes) {
var newSequences = [];
$.each(data, function(key, change) {
console.log(change);
newSequences.push({
id: $(change.oldData).data('id'),
sequence: $(change.newData).data('sequence')
});
});
doThingsWithTheResult(newSequences);
}
In the old situation (CodeIgniter) 'change.oldData' and 'change.newData' are filled with the old and new elements that are affected by the 'row-reorder' event but in the new situation (Laravel) both 'change.oldData' and 'change.newData' are 'undefined'.
Old/working situation
New/ not working situation
What could be the reason why these crucial properties are 'undefined'?
Problem solved!
Although it worked out-of-the-box in the old situation in de new situation i needed to add/provide the rowReorder.dataSrc setting.

Ag-grid: duplicate node id 107 detected from getRowNodeId callback , this could cause issues in your grid

I am going to do live data streaming on ag-grid datatable, so I used DeltaRowData for gridOptions and added getRowNodeId method as well which return unique value 'id'.
After all, I got a live update result on my grid table within some period I set, but some rows are duplicated so I can notice total count is a bit increased each time it loads updated data. The question title is warning message from browser console, I got bunch of these messages with different id number. Actually it is supposed not to do this from below docs. This is supposed to detect dups and smartly added new ones if not exist. Ofc, there are several ways to get refreshed data live, but I chose this one, since it says it helps to persist grid info like selected rows, current position of scroll on the grid etc. I am using vanilla js, not going to use any frameworks.
How do I make live data updated periodically without changing any current grid stuff? There is no error on the code, so do not try to speak about any bug. Maybe I am wrong with current implementation, Anyway, I want to know the idea or hear any implementation experience on this.
let gridOptions = {
....
deltaRowDataMode: true,
getRowNodeId = (data) => {
return data.id; // return the property you want set as the id.
}
}
fetch(loadUrl).then((res) => {
return res.json()
}).then((data) => {
gridOptions.api.setRowData(data);
})
...
If you get:
duplicated node warning
it means your getRowNodeId() has 1 value for 2 different rows.
here is part from source:
if (this.allNodesMap[node.id]) {
console.warn("ag-grid: duplicate node id '" + node.id + "' detected from getRowNodeId callback, this could cause issues in your grid.");
}
so try to check your data again.
if u 100% sure there is an error not related with your data - cut oof the private data, create a plinkr/stackblitz examples to reproduce your issue and then it would be simpler to check and help you.

d3. Calling a csv url from an array javascript

I'm new at this. Im trying to make a simple interactive chart using jaavascript. The idea is that when I change the values in the selector, the chart change the data is using.
However, I´m having troubles with the data switching. The data come´s frome different urls. Those urls are in a CSV file. My code extracts the urls from th CSV file and makes an array. Then it proceed to call the CSV file from the adequate element of the array. Simplifying the code:
functionThatReturnsArray(){
d3.csv("http//URL.COM", function(){
SomeMoreCode;
return ArrayOfStrings
};)
}
A = functionThatReturnsArray();
MoreCode;
//For example, the first value from A is selected
d3.csv(A[0], function(error, data) {
MoreCode;
})
The problem is that it seems that this isn´t a valid input to d3.csv, because it doesn´t work. I don´t know if i´m missing something or it just can´t be done this way.
I searched and it might be from the fact that d3.csv is an asynchronous method, but I´m not sure if that´s the problem.
Any suggestion will be apreciated
Your first CSV data is loading asynchronously, so this function will not return anything
functionThatReturnsArray(){
d3.csv("http//URL.COM", function(){
SomeMoreCode;
return ArrayOfStrings
};)
}
You can put following code in function
function processArray(A){
MoreCode;
//For example, the first value from A is selected
d3.csv(A[0], function(error, data) {
MoreCode;
})
}
and invoke this function in first csv loading callback
functionThatReturnsArray(){
d3.csv("http//URL.COM", function(){
SomeMoreCode;
processArray(ArrayOfStrings) //add this
};)
}

Errors with IndexedDB versions and Dexie.js

I´m starting with IndexedDB and to not reinvent the wheel I´m using Dexie.js https://github.com/dfahlander/Dexie.js
I created the database, I added data and now I´m creating a generic function that get a CSV and populate the database in anothers tables.
So, more or less my code is
// Creation and populate database and first table
var db = new Dexie("database");
db.version(1).stores({table1: '++id, name'});
db.table1.add({name: 'hello'});
Until here all is OK
Now, in success of ajax request
db.close();
db.version(2).stores({table2: '++id, name'});
db.open();
db.table2.add({name: 'hello'});
First time this code run everything is OK, but next time I get this error
VersionError The operation failed because the stored database is a
higher version than the version requested.
If I delete database and run code again only first time works OK.
Any idea? I don´t like too much IndexedDB version way, it´s looks frustrating and I don't get lot of help in the Net
Thanks.
Edit:
I discover the ¿problem/bug/procedure?. If I don´t add nothing before any version modification I haven't this issue, but does somebody know if is this the normal procedure?
So.. if this is the procedure I can't add any table dinamycally with a generic method. First all declarations and then add values. Any possibility to add a table after add values?
Edit again... I just realized that I could create another database. I'll post results. But any information about this issue is welcome :)
Edit again... I created dinamycally another database and everybody is happy!!
That is because the second time the code runs, your database is on version 2, but your main code still tries to open it at version 1.
If not knowing the current version installed, try opening dexie in dynamic mode. This is done by not specifying any version:
var db = new Dexie('database');
db.open().then(function (db) {
console.log("Database is at version: " + db.verno);
db.tables.forEach(function (table) {
console.log("Found a table with name: " + table.name);
});
});
And to dynamically add a new table:
function addTable (tableName, tableSchema) {
var currentVersion = db.verno;
db.close();
var newSchema = {};
newSchema[tableName] = tableSchema;
// Now use statically opening to add table:
var upgraderDB = new Dexie('database');
upgraderDB.version(currentVersion + 1).stores(newSchema);
return upgraderDB.open().then(function() {
upgraderDB.close();
return db.open(); // Open the dynamic Dexie again.
});
}
The latter function returns a promise to wait until it's done before using the new table.
If your app resides in several browsers, the other windows will get their db connection closed as well so they can never trust the db instance to be open at any time. You might want to listen for db.on('versionchange') (https://github.com/dfahlander/Dexie.js/wiki/Dexie.on.versionchange) to override the default behavior for that:
db.on("versionchange", function() {
db.close(); // Allow other page to upgrade schema.
db.open() // Reopen the db again.
.then(()=> {
// New table can be accessed from now on.
}).catch(err => {
// Failed to open. Log or show!
});
return false; // Tell Dexie's default implementation not to run.
};

Updating Highchart Series Data with Formatted AJAX Return

I currently have a Highcharts scatterplot on my page that has the following structure:
$(function() {
$('#container').highcharts({
/*chart options, etc... this does not change*/
series: [/*there is some default data here*/]
});
});
This chart looks and works great. In addition, I have several checkboxes and a button on the page. When the button is pressed, I have some jQuery that looks at which checkboxes are checked, and sends this information to a PHP file that returns a NEW data series based on the selected checkboxes. That code looks like this:
var Obj = {};
$('button').click(function(e) {
var tableIDs = $("#boxes input:checkbox:checked").map(function() {
return $(this).val();
}).get();
var idClicked = e.target.id;
Obj.tables = tableIDs;
$.ajax({
url: 'update.php',
type: 'post',
data: {
"points": JSON.stringify(Obj)
},
success: function(data) {
console.log(data); /*for testing*/
}
});
});
This code is at the very end of the script, and outside of my highcharts function. I have thoroughly tested the AJAX back-and-forth and everything is working just fine. The way the PHP is set up, the AJAX return is of the following format:
{name: 'series1', data: [[...,...],[...,...],...]},
{name: 'series2', data: [[...,...],[...,...],...]}
Not an array, just a very long string with lots of numbers in it (I put the above on two lines for clarity). In other words, it is formatted exactly as it needs to be within the 'series:' option of my Highchart. The number of series that my PHP returns changes depending on which/how many checkboxes are checked.
So, here's my question: What is the best way to replace my default data that is already displayed on my highchart with the new data returned by AJAX? Alternatively, the default data is optional, and can be removed if it makes this any easier.
There are quite a few similar questions out there but I seem to be having troule adopting other people's solutions to my issue. I have looked a few direct update solutions, such as those proposed by rockStar and LeJared, but I have not had any luck getting them to update the old data to the new data or inserting any data for that matter.
I particularly like the solution that was proposed by DemoUser, basically passing data as a variable to a wrapped highcharts function. Here what that typically looks like:
function my_chart(data) {
$('#container').highcharts({
/*chart options, etc... this does not change*/
series: [ /*there is some default data here*/ ]
});
}
However, when I do this, it completely breaks my chart and I have been unable to get this working and passing properly.
Any suggestions/comments would be greatly appreciated.
Im doing it this way
var chart = $('#container').highcharts();
if (chart) {
chart.series[0].setData([]);
}
That should clear the data from the chart.
I just noticed in my code that im recreating the chart from scratch for the new data but i dont think that's necessary.
Once you get the new data try setting it again using
chart.series[0].setData([data]);

Categories