callback in dojo after loading google oauth client - dojo

For loading the google oauth client lib we have to use this script tag
<script src="https://apis.google.com/js/client.js?onload=load"></script>
where the load method will be called after client.js is loaded.
i am using dojo in my application
How can i load this using dojo?
i have tried with dojo/request/script but the callback method is taken by the dojo which is not able to modify
any help how i can do this,
Thanks

call back is sent to the deferred then parameter::
require(["dojo/request/script", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/domReady!"],
function (script, dom, domConst, JSON, on) {
on(dom.byId("startButton"), "click", function () {
domConst.place("<p>Requesting...</p>", "ret");
script.get("http://ajax.googleapis.com/ajax/services/search/web", {
jsonp: "callback",
query: {
"v": "1.0",
"q": "internet kittens"
}
}).then(function (data) {
//Call you function here, or deal with data
domConst.place("<p>response data: <code>" + JSON.stringify(data) + "</code></p>", "ret");
});
});
});
Fiddle::http://jsfiddle.net/D49GP/
UPDATE
You will not be able to use the normal dojo syntax for this one. The problem is that when dojo creates the callback for the then, it creastes the call back function in object.method format. This does not work because google is using window[nameoffunction] for the call back.
So since you can manually add parameters for the script IO. use below:
script.get("https://apis.google.com/js/client.js", {
//jsonp: "onload",
query: {
onload:<callbackfunction>
}
})

Related

datatables.net ajax outside angular scope does not call the interceptor

Angular CLI: 7.3.3 | Node: 10.7.0 | OS: linux x64 | Angular: 7.2.6
I need server side pagination, sorting and filtering, my table will get 100.000 records easily.
Project example -> https://github.com/sibelly/angular-with-datatablesnet
This example consumes themoviedb API, it's just for testing, that is not my real scenario. Here in this project, I don't activate the server side option as I said is just for testing the calling to my interceptor, just to prove that with ajax directly the interceptor isn't called.
On my real scenario, I have a Laravel API, which has the methods that expect the pagination, sorting and filtering params, because I need it to be done server side to reach a better performance and usability.
When I call the API endpoint using HttpClient, it calls my error.interceptor.ts normally, but the pagination, sorting and filtering information isn't passing to the URL.
So, I concluded that I need to call it via Ajax when I call using the ajax the params are sent as expected.
But what happens is that the user token expire and I need to redirect to the login page again. And this is done using the interceptors of angular, that is not activated when calling using ajax directly because it is outside angular's scope.
To resume, how can I intercept my ajax calling from datatables.net framework in my angular project?
Or is there another way to make the server side pagination, sorting and filtering?
movie.component.ts
ngOnInit() {
//When calling this method the error.interceptor is activated normally
//this.getMostPopularMovies();
//But when I call direct using the AJAX, the interceptor doesn't work
this.dtOptions = {
ajax: {
url: 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=2ed54a614803785fce2d7fe401cc3b21',
params: {
api_key: this.moviedbService.apiKey
},
dataSrc: 'results'
//type: 'GET',
//headers: {"Authorization": 'Bearer ' + JSON.parse(localStorage.getItem('authUser'))["token"]}
},
columns: [
{ data: 'title' },
{ data: 'release_date' }
]
};
}
getMostPopularMovies(){
this.moviedbService.getMostPopularMovies().
subscribe((movies: any) => {
this.moviesList = movies.results;
console.log("====", movies);
}, (error: any) => {
console.error("Erro-> ", error);
});
}
Thanks, guys o/

How to render HTML to the user of a step function endpoint?

I'm using serverless and https://github.com/horike37/serverless-step-functions to try and implement a system that is hit by a user, returns HTML based on a database entry for the params provided and then moves to a second function that writes to the database (without forcing the user to wait).
I think a step function in the right approach but I can't seem to get it to return HTML - it always returns a JSON body with the executionArn and startDate. e.g.
{
"executionArn": "arn:aws:states:us-west-2:.......etc...",
"startDate": 1513831673.779
}
Is it possible to have my html body return? At the moment my lambda function returns a simple h1 tag:
'use strict';
module.exports.requestHandler = (event, context, callback) => {
const response = {
statusCode: 200,
headers: {
'Content-Type': 'text/html'
},
body: `<h1>Success!</h1>`,
};
callback(null, response);
};
This is the state machine I'm aiming to create.
I would suggest going for a react/angular/vue frontend hosted e.g. on S3/CDN that uses serverless for backend queries only, instead of rendering dynamic HTML through Lambdas. The 'standard' approach allows you to build apps that are much more responsive and can benefit from e.g. CDNs.
See e.g. https://www.slideshare.net/mitocgroup/serverless-microservices-real-life-story-of-a-web-app-that-uses-angularjs-aws-lambda-and-more or https://serverless-stack.com/

Find by data-dojo-id on Intern-runner functional test?

Is there a way to grab a reference to a widget instance by data-dojo-id on an Intern functional test running on a standalone server?
Yes, Dojo released a dijit-intern-helper module that you can include in your tests to help with this:
define([
'intern!object',
'intern/chai!assert',
'intern/dojo/node!dijit-intern-helper/helpers/dijit',
'require'
], function (registerSuite, assert, dijit, require) {
var url = '../../index.html';
registerSuite({
name: 'Todo (functional)',
'get widget node': function () {
return this.remote
.get(require.toUrl(url))
.then(dijit.nodeById('yourWidgetId', 'rootNodeToLookUnder'))
.getProperty('value')
.then(function (val) {
assert.ok(val == 'Test :)');
});
}
});
});
You can read more about it on this Sitepen blog post or straight on the project Github page.

Ext.data.JsonP.request timeout

I have written a controller. When I click the button from view, this controller generic 'button' is called as follows:
'button': {
tap: function() {
Ext.data.JsonP.request({
url: 'http://download.finance.yahoo.com/d/quotes.csv',
params: {
s: '^BSESN',
f: 'nsl1op'
},
callbackKey: 'callback',
scope: this,
success: function( res, req ) {
Ext.example.msg('Sucess!', 'CSV file successfully generated.');
Ext.data.StoreManager.get('Files').load();
},
failure: function( res, req ) {
console.log('Failed to load csv file.');
}
});
....
....
....
It timesout and failure is called "Failed to load csv file."
The original URL I am using is "http://download.finance.yahoo.com/d/quotes.csv?s=^BSESN&f=nsl1op".
I would like know where I am going wrong.
You're requesting a CSV file via JSONP.
The file will be injected into the DOM via a '' tag (which is how JSONP works), but since it's not a valid JavaScript file, your callback (callbackKey: 'callback') is never executed, so Sencha Touch will fire the timeout handler, seeing the callback has not been fired by the injected <script> tag.
You probably need to change the URL to something that is actually JSONP (iow valid JavaScript wrapped in a callback), not a CSV file.

google places api error with jquery ajax call... html_attributions

I'm using the new google places api with jquery/ajax. When I run this code:
$.ajax({
url: "https://maps.googleapis.com/maps/api/place/search/json?location=40.7834345,-73.9662495&radius=50&sensor=false&key=Your_API_KEY_HERE",
dataType: "jsonp",
data: {
name: 'rogue'
},
success: function( data ) {
console.log(data)
}
});
I get this error: invalid label html_attributions []; I think this is preventing me from seeing the output object in the console, although I can see the response coming back fine in the json tab in firebug
It seems like the places api does not support ajax so far.
It not enough that the server responds with proper JSON. The answering server has to support JSONP and surround the JSON answer with a callback generated by jQuery. The response must look like that:
jQuery17101705844928510487_1324249734338({"data":"whatever"});
The hack that JSONP does, is to interpret the response as script, because the script-Tag is not affected by the Same-Origin-Policy. Without the callback you have no chance to do that in the browser.
If its not supported you have to do the requests from your server..
Server-Example with PHP:
<?php
header("Content-Type:text/javascript"); // avoid browser warnings
$request = new HttpRequest("http://programmingisart.com/json-data-source.php", HttpRequest::METH_GET);
$request->send();
$json_data = $request->getResponseBody();
// wrap the data as with the callback
$callback = isset($_GET["callback"]) ? $_GET["callback"] : "alert";
echo $callback."(".$json_data.");";
Client-Example with jQuery:
<div id="json-result"></div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
dataType: "jsonp",
url: "jsonp-wrapper.php",
success: function(data) {
$("#json-result").html(JSON.stringify(data));
},
error: function() {
alert("error");
}
});
});
</script>
You can replace the PHP-code with any other server-platform and do the required steps.
HTTP-Request to a JSON source
Wrap the JSON as with a callback-function