D3.js IE9 error on checking nodes in graphdata - d3.js

I am having a problem fixing this error. May be someone can explain what is going on here:
I am getting JSON back from server:
d3.json(fullpath, function (json)
{
graphData = json;
if (graphData.nodes.length == 0)
{
$.jnotify("Sorry there is no data for graph. Please include social media type in search.");
}
drawGraph();
});
here is part of the json:
"nodes": [{
"id": 1,
"userID": 1,
"profile_image_url": "images/twitterimage_1.jpg",
"description": "user1 desc",
"name": "user 1",
"location": "Berlin",
"statuses_count": 5,
"followers_count": 1
}
,
{
"id": 2,
"userID": 2,
"profile_image_url": "images/twitterimage_2.png",
"description": "user2343434 desc",
"name": "user 2",
"location": "Berlin",
"statuses_count": 6,
"followers_count": 2
}
then on this line: 'if (graphData.nodes.length == 0)' I do have this error:
'Error: Unable to get value of the property 'nodes': object is null or undefined'
And this is only in IE, not a problem in Chrome or Firefox.
Please help!
thanks!

ok. the problem was in this line:
d3.json(fullpath, function (json)
Do you know that IE does json asynchronously be DEFAULT?
and Chrome/Firefox does this call synchronously?
So, the work around is to switch to .ajax call from jquery library:
$.ajax({
url: dataPath,
dataType: 'json',
async: false,
data: null,
success: function (response)
{
}
thanks!

Related

How to Generate DataTable with Json Data

I have API Call abd which will be returning Json like below
{
"status": true,
"message": "Data Sent",
"data": [
{
"id": 9,
"name": "North",
"colType": 7,
"userID": 0,
"isVisible": false
}
]
}
And below i have JavaScript Ajax Call but it is returning Empty datatable please do help
$('#myTable').DataTable({
destroy: true,
responsive: true,
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columns": [
{ "data": "name", "autoWidth": true },
{
"render": function (data, type, full, meta) { return "<a id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
},
]
});
In the ajax section, you need to define your data source: "dataSrc": "data".
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
"dataSrc": "data"
},
Why is this needed? Your JSON data structure does not have a "name" item at the top level. Names are nested inside the top-level "data" object. This extra directive tells DataTables to look only at the JSON's "data" object as its starting point.
See here for the related documentation:
The ajax option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc to provide the ability to alter what data DataTables will read from the JSON returned from the server...
Also, on an unrelated note, I don't think you need this: destroy: true - try removing it. It probably does not make sense to try to destroy the table object while you are initializing it.

Make a payment through PayPal API in ASP.NET Core

I am doing a project in ASP.NET Core. My requirement is, I want to integrate PayPal as the payment gateway.
User can see set of items, with BUY NOW button, and when a button is clicked, i want to send that item's name and cost to paypal so it will charge the amount from the user.
When the payment is successful, I want paypal to redirect to one of Controller method and save that transaction.
Now my problem is,
I am not sure if I am using the correct API.
Even though I use that API, I get an error with 400 code
I use below code to generate the token.
$.ajax({
url: 'https://api.sandbox.paypal.com/v1/oauth2/token',
datatype: 'json',
type: 'POST',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('client ID and secret'));
},
data: {
'grant_type': 'client_credentials',
});
The above function is giving me a key and using that, i do the below API call. Now I am not sure if the below API is correct for this purpose.
$.ajax({
url: 'https://api.sandbox.paypal.com/v1/payments/payment',
type: 'POST',
headers: {
'Content-Type':'application/json',
'Authorization': 'Bearer ' + accessToken
},
data: {
"intent": "sale",
"payer": {
"payment_method": "paypal"
},
"transactions": [
{
"amount": {
"total": "30.11",
"currency": "USD",
"details": {
"subtotal": "30.00",
"tax": "0.07",
"shipping": "0.03",
"handling_fee": "1.00",
"shipping_discount": "-1.00",
"insurance": "0.01"
}
},
"description": "The payment transaction description.",
"custom": "EBAY_EMS_90048630024435",
"invoice_number": "48787589673",
"payment_options": {
"allowed_payment_method": "INSTANT_FUNDING_SOURCE"
},
"soft_descriptor": "ECHI5786786",
"item_list": {
"items": [
{
"name": "hat",
"description": "Brown hat.",
"quantity": "5",
"price": "3",
"tax": "0.01",
"sku": "1",
"currency": "USD"
}
],
"shipping_address": {
"recipient_name": "Brian Robinson",
"line1": "4th Floor",
"line2": "Unit #34",
"city": "San Jose",
"country_code": "US",
"postal_code": "95131",
"phone": "011862212345678",
"state": "CA"
}
}
}
],
"note_to_payer": "Contact us for any questions on your order.",
"redirect_urls": {
"return_url": "https://example.com/return",
"cancel_url": "https://example.com/cancel"
}
Above API call is the exact example in the PayPal developer's website itself but however it gives me the following error:
{"name":"AUTHENTICATION_FAILURE","message":"Authentication failed due to invalid authentication credentials or a missing Authorization header.","links":[{"href":"https://developer.paypal.com/docs/api/overview/#error","rel":"information_link"}]}
Is this the correct API that I should use or is there any other? Please help me on this.
Thank you.

jQuery Datatable Pipeline using server side - data not loading

I am working on jQuery datatable and trying to implement pipeline feature using server side processing. (following the code same as suggested in the below jQuery site)
https://datatables.net/examples/server_side/pipeline.html
Actual Scenario
My implementation differs only in the data part where my data is array of objects but as per the reference, the data is ajax sourced..
My Ajax response from REST API ::
{
"status": true,
"data": [{
"dbid": "xyz",
"name": "QA Pt",
"email": "a+123#gmail.com",
"isactive": true,
"Datecreated": "2018-06-04",
"lastmodified": "2018-06-04",
"newfields": {
"firstname": "QA",
"lastname": "Pt",
"viewonlyadmin": "no",
"usertype": 0
},
"userid": "85097428"
}, {
"dbid": "xyz",
"name": "QA Pt",
"email": "a+123#gmail.com",
"isactive": true,
"Datecreated": "2018-06-04",
"lastmodified": "2018-06-04",
"newfields": {
"firstname": "QA",
"lastname": "Pt",
"viewonlyadmin": "no",
"usertype": 0
},
"userid": "85097428"
}],
"recordsTotal": 597,
"recordsFiltered": 597,
"draw": 1
}
Pipeline feature and the Pagination part works perfectly but the data in table is always shown as "No matching records found"
When i tried debugging the code, in drawcallback function 'settings' object -> aoData is always empty.
Below is the screenshot of the table.
Scenario 2
The other fix I tried is by passing json.data to drawcallback function instead of drawcallback(json) in ajax success function. In this case, the data is shown in the table but the pagination part is failing. PFB the screenshot.
Any one have idea on why this data is not being applied to the table? Looking for some help on fixing this issue..
Assuming you are trying to return json from API as follows.
return Json(new
{
// this is what datatables wants sending back
draw = 1,
recordsTotal = result.Count(),
recordsFiltered = 10,
data = result
});
Just change this to return Json(result); So your json result looks like
[{
"Latitude": 18.00,
"Longitude": 23.00,
"Name": "Pune"
}, {
"Latitude": 14.00,
"Longitude": 24.00,
"Name": "Mumbai"
}, {
"Latitude": 34.004654,
"Longitude": -4.005465,
"Name": "Delhi"
}, {
"Latitude": 23.004564,
"Longitude": 23.007897,
"Name": "Jaipur"
}]
Now, in your ajax success, make datatables like this. Reason to use ajax success is it is assumed that you get all the data at one round trip to server.
$.ajax({
url: "Your API Url",
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: JSON,
success: function (result) {
var my_columns = [];
$.each(result[0], function (key, value) {
var my_item = {};
my_item.data = key;
my_item.title = key;
my_columns.push(my_item);
});
$('#table1').DataTable({
"data": result,
"columns": my_columns
});
}
});

Why my ajax call do not work?

I am not able to detect why my ajax call do not work. I am trying to read the contents of text file but it do not work, The problem is control never go to .done(function(data))
function makeCustomerTree()
{
// debugger
alert('customertree');
$.ajax(
{
url:"~/bootstrap/js/LiveMap/Ajax/JsonStringCarryingData/customer-tree-json.txt",
data: {},
type: "GET"
}).done(function (data)
{
alert('done');
$('#tree_loader').html('');
tree = $.fn.zTree.init($("#customerTree"), setting, data);
tree = $.fn.zTree.getZTreeObj("customerTree");
}).fail(function (jqXHR)
{
alert('fail');
$('#tree_loader').html('<font color="red">Unable to load.</font>');//jqXHR.responseText);
});
}
Where my file customer-tree-json.txt contains the contents like this:
[
{
"icon": "/static/tree/icons/user-20.png",
"pId": 7,
"id": 18,
"itemType": "lcustomer",
"name": "sachin bhatia"
},
{
"itemType": "ldevice",
"pId": 18,
"name": "UK 06 AA 3840",
"open": true,
"id": "007060500336",
"icon": "/static/tree/icons/device-20.png"
}
]
After seeing your directory tree, relative URL has to be :
url:"/bootstrap/js/LiveMap/Ajax/JsonStringCarryingData/customer-tree-json.txt"

Attempting to load Ext store with JSON data from AJAX request returns error

Am attempting to load and Ext Store with Ext 4.0.7.
It is returning an Object doesn't support this property or method error when i call the loadRawData method on the store in the success callback of the AJAX request.
Here is the data i am loading:
{
"data": [
{
"id": 1,
"source": "1445261",
"target": "1437043",
"sourceType": "user",
"redirectUrl": "http://www.google.co.uk",
"message": "this is a notification message",
"targetType": "user",
"messageType": "notification",
"sentDate": "1354758001",
"notificationType": "notification",
"parameters": "null",
"read": "false",
"readDate": 1354758001
},
{
"id": 2,
"source": "1445261",
"target": "1437043",
"sourceType": "user",
"redirectUrl": "http://www.google.co.uk",
"message": "this is a notification message",
"targetType": "user",
"messageType": "notification",
"sentDate": "1354758001",
"notificationType": "notification",
"parameters": "null",
"read": "false",
"readDate": 1354758001
},
{
"id": 3,
"source": "1445261",
"target": "1437043",
"sourceType": "user",
"redirectUrl": "http://www.google.co.uk",
"message": "this is a notification message",
"targetType": "user",
"messageType": "notification",
"sentDate": "1354758001",
"notificationType": "notification",
"parameters": "null",
"read": "false",
"readDate": 1354758001
}
]
}
This is the store code and ajax request:
var infoStagingStore = Ext.create('Ext.data.Store', {
model: 'SCB.RMWB.InfoBar.Model.Message',
storeId: 'Staging',
autoLoad: false,
pageSize: 10,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
load: function(){
console.log('loaded');
}
}
});
Ext.Ajax.request({
url: '/rmwb/resources/js/app/infoBar/data/data.json',
timeout: 60000,
method: 'GET',
scope: this,
params: '',
success: function(resp) {
console.log(resp.responseText);
var store = Ext.data.StoreManager.lookup('Staging');
store.loadRawData(resp.responseText, true);
},
failure: function(resp, opts) {
},
callback: function(options, success, resp) {
}
});
Can't quite see why this is returning an error?
As in my comment, you donĀ“t need a pagingmemory store. What you need is an ajax store because the pagingstore is for allowing pagination with data you have in memory but there is no reason to use it seeing your requirement.
So if you use an standard ajax proxy, you will be able to load it in the normal way (using the .load() method). Then, when you need to add more record from the server you what you have to do is just call the load method again but with the addRecords option.
For example (untested sample):
// load store with historical data
infoStagingStore.load();
// load more records to the store from a different resource
infoStagingStore.load({
url: '/rmwb/resources/js/app/infoBar/data/data.json',
addRecords: true
});
Seeing as you've assigned your store to a variable called infoStagingStore could you not just reference that directory in your ajax call?
Ext.Ajax.request({
url: '/rmwb/resources/js/app/infoBar/data/data.json',
timeout: 60000,
method: 'GET',
scope: this,
params: '',
success: function(resp) {
console.log(resp.responseText);
//var store = Ext.data.StoreManager.lookup('Staging');
infoStagingStore.loadRawData(resp.responseText, true);
},
...

Resources