I am updating cells of dataTable very frequently using id as selector as each table cell that has to be updated already has unqiue id assigned. Below is the code
agentStatSocket.onmessage = function(e){
data = JSON.parse(e.data)
//console.log(data);
for(var i=0; i<data.length; i++){
try {
var inboundTd = data[i]['id'] + '-inbound';
var outboundTd = data[i]['id'] + '-outbound';
if (data[i]['inboundCalls'] != 0) {
document.getElementById(inboundTd).innerHTML = data[i]['inboundCalls'];
}
if (data[i]['outboundCalls'] != 0) {
document.getElementById(outboundTd).innerHTML = data[i]['outboundCalls'];
}
} catch (error) {
console.log(data[i]);
}
}
};
I am getting Uncaught TypeError: document.getElementById(...) is null but that id is available in the dom.
I tried to catch error so that at least my loop shouldn't stop and i can get all that data using console.log(data[i) which is not present in the table. To my surprise there were at least 10 objects printed in console. This cannot happen because i can see the previous data is present in table. When i commented out the DataTable() function and reloaded the page i didn't see any error.
Can you please tell me how to update table cells in DataTable as i need Search , Sort and Pagination functionality of DataTable ?
I'm trying to migrate my tiny report from V3 to V4, but I have found an issue which is annoying me and making me feel like I'm totally dumb.
So I just took the example code at https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js
and change a couple of things, and it works, it runs the report. But when I try to retrieve the data from the different rows with the below function:
function displayResults(response) {
var Objeto = response.result["reports"];
var Filas01 = Objeto["data"];
console.log(Objeto);
console.log(Filas01);
}
Objeto shows everything within .reports
But Filas01 shows undefined, I have tried to retrieve reponse.results.reports.data.rows;
And several variations but it says undefined all the time,
I have no clue why it was working on V3 and is not on V4,
Please any help would be much appreciated :)
There are samples of how to make requests and precess the response in various languages. But specifically here is a simple JavaScript function which processes the results into a table:
function handleReportingResults(response) {
if (!response.code) {
outputToPage('Query Success');
for( var i = 0, report; report = response.reports[ i ]; ++i )
{
output.push('<h3>All Rows Of Data</h3>');
if (report.data.rows && report.data.rows.length) {
var table = ['<table>'];
// Put headers in table.
table.push('<tr><th>', report.columnHeader.dimensions.join('</th><th>'), '</th>');
table.push('<th>Date range #</th>');
for (var i=0, header; header = report.columnHeader.metricHeader.metricHeaderEntries[i]; ++i) {
table.push('<th>', header.name, '</th>');
}
table.push('</tr>');
// Put cells in table.
for (var rowIndex=0, row; row = report.data.rows[rowIndex]; ++rowIndex) {
for(var dateRangeIndex=0, dateRange; dateRange = row.metrics[dateRangeIndex]; ++dateRangeIndex) {
// Put dimension values
table.push('<tr><td>', row.dimensions.join('</td><td>'), '</td>');
// Put metric values for the current date range
table.push('<td>', dateRangeIndex, '</td><td>', dateRange.values.join('</td><td>'), '</td></tr>');
}
}
table.push('</table>');
output.push(table.join(''));
} else {
output.push('<p>No rows found.</p>');
}
}
outputToPage(output.join(''));
} else {
outputToPage('There was an error: ' + response.message);
}
}
I would also recommend taking the time to review the overal structure of the response in the reference docs
So,I am trying to use the twitch API:
https://codepen.io/sterg/pen/yJmzrN
If you check my codepen page you'll see that each time I refresh the page the status order changes and I can't figure out why is this happening.
Here is my javascript:
$(document).ready(function(){
var ur="";
var tw=["freecodecamp","nightblue3","imaqtpie","bunnyfufuu","mushisgosu","tsm_dyrus","esl_sc2"];
var j=0;
for(var i=0;i<tw.length;i++){
ur="https://api.twitch.tv/kraken/streams/"+tw[i];
$.getJSON(ur,function(json) {
$(".tst").append(JSON.stringify(json));
$(".name").append("<li> "+tw[j]+"<p>"+""+"</p></li>");
if(json.stream==null){
$(".stat").append("<li>"+"Offline"+"</li>");
}
else{
$(".stat").append("<li>"+json.stream.game+"</li>");
}
j++;
})
}
});
$.getJSON() works asynchronously. The JSON won't be returned until the results come back. The API can return in different orders than the requests were made, so you have to handle this.
One way to do this is use the promise API, along with $.when() to bundle up all requests as one big promise, which will succeed or fail as one whole block. This also ensures that the response data is returned to your code in the expected order.
Try this:
var channelIds = ['freecodecamp', 'nightblue3', 'imaqtpie', 'bunnyfufuu', 'mushisgosu', 'tsm_dyrus', 'esl_sc2'];
$(function () {
$.when.apply(
$,
$.map(channelIds, function (channelId) {
return $.getJSON(
'https://api.twitch.tv/kraken/streams/' + encodeURIComponent(channelId)
).then(function (res) {
return {
channelId: channelId,
stream: res.stream
}
});
})
).then(function () {
console.log(arguments);
var $playersBody = $('table.players tbody');
$.each(arguments, function (index, data) {
$playersBody.append(
$('<tr>').append([
$('<td>'),
$('<td>').append(
$('<a>')
.text(data.channelId)
.attr('href', 'https://www.twitch.tv/' + encodeURIComponent(data.channelId))
),
$('<td>').text(data.stream ? data.stream.game : 'Offline')
])
)
})
})
});
https://codepen.io/anon/pen/KrOxwo
Here, I'm using $.when.apply() to use $.when with an array, rather than list of parameters. Next, I'm using $.map() to convert the array of channel IDs into an array of promises for each ID. After that, I have a simple helper function with handles the normal response (res), pulls out the relevant stream data, while attaching the channelId for use later on. (Without this, we would have to go back to the original array to get the ID. You can do this, but in my opinion, that isn't the best practice. I'd much prefer to keep the data with the response so that later refactoring is less likely to break something. This is a matter of preference.)
Next, I have a .then() handler which takes all of the data and loops through them. This data is returned as arguments to the function, so I simply use $.each() to iterate over each argument rather than having to name them out.
I made some changes in how I'm handling the HTML as well. You'll note that I'm using $.text() and $.attr() to set the dynamic values. This ensures that your HTML is valid (as you're not really using HTML for the dynamic bit at all). Otherwise, someone might have the username of <script src="somethingEvil.js"></script> and it'd run on your page. This avoids that problem entirely.
It looks like you're appending the "Display Name" in the same order every time you refresh, by using the j counter variable.
However, you're appending the "Status" as each request returns. Since these HTTP requests are asynchronous, the order in which they are appended to the document will vary each time you reload the page.
If you want the statuses to remain in the same order (matching the order of the Display Names), you'll need to store the response data from each API call as they return, and order it yourself before appending it to the body.
At first, I changed the last else condition (the one that prints out the streamed game) as $(".stat").append("<li>"+jtw[j]+": "+json.stream.game+"</li>"); - it was identical in meaning to what you tried to achieve, yet produced the same error.
There's a discrepancy in the list you've created and the data you receive. They are not directly associated.
It is a preferred way to use $(".stat").append("<li>"+json.stream._links.self+": "+json.stream.game+"</li>");, you may even get the name of the user with regex or substr in the worst case.
As long as you don't run separate loops for uploading the columns "DisplayName" and "Status", you might even be able to separate them, in case you do not desire to write them into the same line, as my example does.
Whatever way you're choosing, in the end, the problem is that the "Status" column's order of uploading is not identical to the one you're doing in "Status Name".
This code will not preserve the order, but will preserve which array entry is being processed
$(document).ready(function() {
var ur = "";
var tw = ["freecodecamp", "nightblue3", "imaqtpie", "bunnyfufuu", "mushisgosu", "tsm_dyrus", "esl_sc2"];
for (var i = 0; i < tw.length; i++) {
ur = "https://api.twitch.tv/kraken/streams/" + tw[i];
(function(j) {
$.getJSON(ur, function(json) {
$(".tst").append(JSON.stringify(json));
$(".name").append("<li> " + tw[j] + "<p>" + "" + "</p></li>");
if (json.stream == null) {
$(".stat").append("<li>" + "Offline" + "</li>");
} else {
$(".stat").append("<li>" + json.stream.game + "</li>");
}
})
}(i));
}
});
This code will preserve the order fully - the layout needs tweaking though
$(document).ready(function() {
var ur = "";
var tw = ["freecodecamp", "nightblue3", "imaqtpie", "bunnyfufuu", "mushisgosu", "tsm_dyrus", "esl_sc2"];
for (var i = 0; i < tw.length; i++) {
ur = "https://api.twitch.tv/kraken/streams/" + tw[i];
(function(j) {
var name = $(".name").append("<li> " + tw[j] + "<p>" + "" + "</p></li>");
var stat = $(".stat").append("<li></li>")[0].lastElementChild;
console.log(stat);
$.getJSON(ur, function(json) {
$(".tst").append(JSON.stringify(json));
if (json.stream == null) {
$(stat).text("Offline");
} else {
$(stat).text(json.stream.game);
}
}).then(function(e) {
console.log(e);
}, function(e) {
console.error(e);
});
}(i));
}
});
I have a ribbon button command which executes a javascript function and passes in the selected rows in a grid. I am looping through that list to create a $select filter to make a RetrieveMultiple request.
The problem is everytime I get the following error
400: Bad Request: No Property 'id' exists in type 'Microsoft.Xrm.Sdk.Entity' at position 1
I have tried with id instead of Id but I still get the same error.
My code is below
function approveMultipleApplications(selectedApplicationReferences) {
if (selectedApplicationReferences && selectedApplicationReferences.length > 0) {
var filter = '';
for (var i = 0; i < selectedApplicationReferences.length; i++) {
filter += '(id eq guid\'' + selectedApplicationReferences[i].Id + '\')';
if (i < selectedApplicationReferences.length - 1) {
filter += ' or ';
}
}
var options = "$select=new_assessmentcount,new_requiredassessmentcount&$filter=" + filter;
try {
SDK.REST.retrieveMultipleRecords("new_application", options, retrieveApplicationsCallBack, function (error) {
alert(error.message);
}, retrieveComplete);
}
catch (ex) {
Xrm.Utility.alertDialog('Something went wrong, please try again or contact your administrator ' + ex, null);
}
}
else {
Xrm.Utility.alertDialog('You must select at least one application to approve', null);
}
}
The selectedApplicationReferences[i].Id is in this format {guid-value}
Any help or guidance is appreciated
The error message is pretty much spot on: Use LogicalNameId instead of just Id. In your case that would be new_applicationId:
filter += '(new_applicationId eq guid\'' + selectedApplicationReferences[i].Id + '\')';
It can be a bit confusing since there is actually no Id-field in the database. If you use e.g. early bound classes, the Id field is set for you behind the scenes, so that might have confused you. The Id field is not returned by the OData endpoint.
I got a table with remote datasource. in one cell I got the userID. Because I want to show the username instead of the user ID I made a custom template function:
function getUserName(pmcreator){
var user = '';
var data = ''
ds_userList.fetch(function(){
var data = this.data();
for(var i = 0, length = data.length; i < length; i++){
if(data[i].uID == pmcreator){
console.log(data[i].uLastname)
user = data[i].uLastname
}
}
});
return user
}
But its not working as it should, the cells stay empty. I got no errors but I see that the remote request to fetch the usernames is not completed before the grid is filled out. I thought the custom function of fetch is waiting for the results to return but it don't seems so.
Any Idea? I find thousends of examples but all with static local data. I need one with both remote, the grid conent and the template data.
This is probably due the fact that when yuo call the dataSource.fetch it fires off an async function, which causes the thread running the template to continue on. According to kendo you will need to return a control, then set the content of that control inside the callback.
Quick sample using Northwind categories...
Here is the template function
function getDetails(e) {
$.getJSON("http://services.odata.org/V3/Northwind/Northwind.svc/Categories", null, function(data) {
var category = data.value.filter(function(item, i) {
return item.CategoryID === e.CategoryID;
});
$("#async_" + e.CategoryID).html(category[0].Description);
});
return "<div id='async_" + e.CategoryID + "'></div>";
}
http://jsbin.com/ODENUBe/2/edit
I kept getting a recursive error maximum call stack when I just tried to fetch the dataSource, so I switched to a simple getJSON, but it should work pretty much the same.