I'm trying to build a custom StackOverflow badge using JSONP and MooTools. Here is the code:
new Request.JSONP('http://stackoverflow.com/users/flair/166325.json', {
onComplete: function(data) {
console.log(data);
}
}).request();
However, I always get back this message:
RequestJSONPrequest_maprequest_0 is not defined
I'm wondering if this is a problem with the response from StackOverflow since requests to other services with JSONP work fine for me.
found a way around it: http://www.jsfiddle.net/CRdr6/1/
by passing on callbackKey: "callback=myfunc&foo" to the Request.JSONP class (it's not escaped properly) you can use myfunc as a global function to handle the callback and go around the stripped .
Request.stackoverflow = new Class({
Extends: Request.JSONP,
options: {
log: true,
url: "http://stackoverflow.com/users/flair/{user}.json",
callbackKey: "callback=myfunc&foo"
},
initialize: function(user, options) {
this.parent(options);
this.options.url = this.options.url.substitute({user: user});
},
success: function(data, script) {
this.parent(data, script);
}
});
window.myfunc = function(data) {
console.log(data);
};
new Request.stackoverflow(166325).send();
I ended up creating the function that StackOverflow ends up calling (without the dots):
var StackOverflow = Class.refactor(JsonP, {
getScript: function(options) {
var index = Request.JSONP.counter;
var script = this.previous(options);
eval("RequestJSONPrequest_maprequest_" + index + " = Request.JSONP.request_map['request_' + index];");
return script;
}
});
Related
I made an application that uses Javascript (Vue.Js) to call my API and update lists on the page when I add a new Object to that list (in this case a list of users).
I made the mistake of only testing on Edge, where it updated itself perfectly if I made a get-call after I had updated the list. However, every other browser seems to cache it somehow, and does not call GET api/users more than once (noticed that by adding breakpoints).
In the past ASP.NET version adding [OutputCache(NoStore = true, Duration = 0)] most likely would have solved the Issue, but that does not work in ASP.NET Core 2.0.
I read up and found that ResponseCaching Is supposed to replace it. So I added it to my project and followed the official docs on how to implement it, but no luck.
To Startup.cs (as well as all required code to add the interface to my scope) I add:
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc(options =>
{
options.CacheProfiles.Add("Default",
new CacheProfile()
{
Duration = 60
});
options.CacheProfiles.Add("Never",
new CacheProfile()
{
Location = ResponseCacheLocation.None,
NoStore = true
});
});
}
Then to the top of each controller in my API I add:
[ResponseCache(CacheProfileName = "Never")]
public class UserController : Controller
{
This does not solve my issues, instead it seems to clear the accesstoken I use for my users so I can't keep users signed in anymore. Is this not the solution I need to fix my problem? Am I implementing it in the wrong way? Not sure where to go from here.
Here is what My Ajax calls in JS looks like:
addAdmin: function () {
var self = this;
$.ajax({
url: 'api/admins',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(self.adminCreate),
success: function (response) {
self.getAdmins(false);
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus + '\n' + errorThrown);
}
});
}
//gets called on Start as well as after each AddAdmin call.
getAdmins: function (toggle) {
var self = this;
if (!self.adminOpen || !toggle) {
$.ajax({
url: 'api/admins',
type: 'GET',
success: function (response) {
if (toggle) {
self.toggleAdminOpen();
}
self.admins = response;
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus + '\n' + errorThrown);
}
});
}
else if (self.adminOpen) {
self.toggleAdminOpen();
}
}
If the browser is not making the call again, then try adding this JavaScript (before anything else):
$.ajaxSetup({cache: false}});
The effect of this is that jQuery will add the current time as a URL parameter in every AJAX call. It will be ignored by the server, but it makes the URL "different" so that the browser sees every call as unique and thus unable to use its own cache.
I am writing a class in JavaScript for the first time and I am having some trouble writing new data to a class variable. I've been trying all sorts for hours but nothing seems to work!
function ClassName(productId) {
//create variables
this.productId = productId;
this.shop = [];
this.product = [];
//method that calls for response. On success will return {"status" : "success", "shop" : "someshop.com"}
this.auth = function() {
$.ajax({
url: "http://website.com/api/auth/",
dataType: "jsonp",
success: function(data) {
authCallback(data); //use callback to handle response
},
error: function() {
console.log("bad auth");
}
});
}
var authCallback = function(r) {
//using console.log(r) output the response OK
this.shop = r; //this runs with no errors
}
}
Now, as yo can see in the authCallback method I'm setting this.shop = r; but then if i refer back to this variable its still at its default value of [] .
var class = new ClassName(1);
class.auth();
console.log(class.shop); //this outputs []
I've also tried this in the Javascript console writing each line after each stage had been completed(waited for a response from class.auth() and output from authCallback() before then calling console.log(class.shop);
So, what am I doing wrong? Why isn't the variable updating to its new value?
When you just write:
authCallback(data);
then within authCallback you will have the wrong value of this, it'll either be null or the global object (depending on whether you're in strict mode or not).
Use:
success: authCallback.bind(this)
to ensure that this inside the callback actually represents your object.
You should also note that you cannot access this.shop until after the callback has completed. A more idiomatic implementation using modern jQuery techniques would be this:
this.auth = function() {
return $.ajax({
url: "http://website.com/api/auth/",
dataType: "jsonp"
}).done(this.authCallback.bind(this)).fail(function() {
console.log("bad auth");
});
};
this.authCallback = function(r) {
this.shop = r;
return this;
}
followed by:
var clazz = new ClassName(1);
clazz.auth().then(function(c) {
console.log(c.shop);
});
I am overriding the JQuery Ajax XHR object with my custom implementation in order to 'fake' serquest to server and response from server.
I created simple example of what I try to achive in JS fiddle - in JS part I am defining very simple, global sendAjax() function that suppose to call server using $.ajax():
window.sendAjax = function() {
var jqxhr = $.ajax({
url: "/ServerResource.txt"
});
jqxhr.done(function (data, textStatus, jqXHR) {
//this is never called
alert("done !")
});
jqxhr.fail(function (jqXHR, textStatus, errorThrown) {
//this is never called
alert("fail " + errorThrown);
});
}
also I try to substitute JQuery ajax xhr object using my own XHR where I replaced 'send()' method with my own implementation that suppose to return some data instead of XHTTPrequest - for the now in JSfiddle I am going to return imediately 'sucess' response. The problem is that the done or fail functions do not react on my response at all :(
Here is my redefinition of XHR
//reload jquery ajax
var originalXhr = jQuery.ajaxSettings.xhr;
$.ajaxSetup({
xhr: function () {
var req = originalXhr();
var deferred = $.Deferred();
var promise = deferred.promise(req);
if (req) {
// Add your progress handler
var _send = req.send;
req.send = function (headers, complete) {
//the one below does not work
setTimeout(function () {
deferred.resolve("Resolve promise", "OK", req);
}, 200);
}
var _open = req.open;
req.open = function () {
console.log('OPEN AJAX called');
}
}
return promise;
}
});
I probably do something and $.Deferred does not work in the way I wont it, but I cannot figure what is wrong so far.
Here is JS fiddle http://jsfiddle.net/ZwPXs/ - might be you have some ideas?
Best regards, Artem
I'm working on wrapping my $resource requests in a simple wrapper. The main idea
is to be able to add some logic before the request is made. I've followed the nice article written by Nils.
Here you can see a service definition to access the REST API module.
resources.factory('Device', ['RequestWrapper', '$resource', 'lelylan.config', function(RequestWrapper, $http, config) {
var resource = $resource(config.endpoint + '/devices/:id', { id: '#id' });
return RequestWrapper.wrap(resource, ['get', 'query', 'save', 'delete']);
}]);
And here you can see the request wrapper definition.
resources.factory('RequestWrapper', ['AccessToken', function(AccessToken) {
var requestWrapper = {};
var token;
requestWrapper.wrap = function(resource, actions) {
token = AccessToken.initialize();
var wrappedResource = resource;
for (var i=0; i < actions.length; i++) { request(wrappedResource, actions[i]); };
return wrappedResource;
};
var request = function(resource, action) {
resource['_' + action] = resource[action];
resource[action] = function(param, data, success, error) {
(AccessToken.get().access_token) ? setAuthorizationHeader() : deleteAuthorizationHeader()
return resource['_' + action](param, data, success, error);
};
};
var setAuthorizationHeader = function() {
$http.defaults.headers.common['Authorization'] = 'Bearer ' + token.access_token;
};
var deleteAuthorizationHeader = function() {
delete $http.defaults.headers.common['Authorization']
};
return requestWrapper;
}]);
Everything works just fine for the GET and DELETE methods (the ones that does not returns
a body seems), but I can't get $save working. What happens is that when the JSON of the
created resources returns it is not added. I have only the data I've set on the creation
phase. Let me make an example.
In this case we use the wrapped resource. If I try to get the #updated_at attribute I can't
see it. In the Chrome inspector I can see how the resource is successfully created.
$scope.device = new Device({ name: 'Angular light', type: 'http://localhost:9000/types/50bf5af4d033a95486000002' });
$scope.device.$save(function(){ console.log('Device Wrapped', $scope.device.created_at) });
# => undefined
If I use $resource everything works fine.
// Suppose authorization is already set
var Resource = $resource('http://localhost\\:9000/devices/:id');
$scope.resource = new Resource({ name: 'Angular light', type: 'http://localhost:9000/types/50bf5af4d033a95486000002' });
$scope.resource.$save(function(){ console.log('Device Base', $scope.resource.created_at); });
# => 2013-02-09T12:26:01Z
I started to check the angular-resource.js code but after few hours I couldn't really figure
it out. I can't get why the body is returned, but in the wrapper resource it is not accessible.
Any idea or help would be appreciated. Thanks.
While diving into AngularJS source code I've found the solution.
The problem was that the wrapper was returning a function instead of an object and this was giving some problems. The solution is to change the following row in the Wrapper:
return resource['_' + action](param, data, success, error);
with this one:
return resource['_' + action].call(this, params, data, success, error);
Why? The fast answer is because in the source code of angular-resource they use it. Actually #call run the function sending this to the calling object. It is often used to initialize an object. Learn more here.
Im trying to develop a class in JavaScript I can use to access a load of data that is gathered by an AJAX request easily. The only problem is I need to make the members of the class accessible only once the AJAX call is complete. Ideally what I would like to end up is something where by I can call this in a script:
courses.getCourse('xyz').complete = function () {
// do something with the code
}
And this will only fire after the AJAX call has been complete and the data structures in the "class" are ready to be used. Ideally I dont want to have to create a .complete member for every function in the class
Here is the "class" I am trying to make so far:
var model_courses = (function() {
var cls = function () {
var _storage = {}; // Used for storing course related info
_storage.courses = {}; // Used for accessing courses directly
_storage.references = new Array(); // Stores all available course IDs
var _ready = 0;
$.ajax({
type: "GET",
url: "data/courses.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("course").each(function() {
_storage.courses[$(this).attr('id')] = {
title : $(this).find('title').text(),
description : $(this).find('description').text(),
points : $(this).find('points').text()
}
_storage.references.push($(this).attr('id'))
})
}
})
console.log(_storage.courses)
}
cls.prototype = {
getCourse: function (courseID) {
console.log(cls._storage)
},
getCourses: function () {
return _storage.courses
},
getReferences: function (),
return _storage.references
}
}
return cls
})()
At the moment getCourse will be fired before the AJAX request is complete and obviously it will have no data to access.
Any ideas will be greatly appreciated, im stuck on this one!
jQuery already handles this for you using deferred objects, unless i'm misunderstanding what you are looking for.
var courses = {
getCourse: function (id) {
return $.ajax({url:"getCourse.php",data:{id:id});
}
};
courses.getCourse("history").done(function(data){
console.log(data);
});
I know this isn't exactly what you are looking for, I'm hoping it's enough to push you in the right direction. Deferred objects are awesome.
The following changes allow you to make the AJAX request just once and you can call your function like
courses.getCourse('xyz', function(course){
// Use course here
});
Here are the changes
var model_courses = (function() {
// This is what gets returned by the $.ajax call
var xhr;
var _storage = {}; // Used for storing course related info
_storage.courses = {}; // Used for accessing courses directly
_storage.references = []; // Stores all available course IDs
var cls = function () {
xhr = $.ajax({
type: "GET",
url: "data/courses.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("course").each(function() {
_storage.courses[$(this).attr('id')] = {
title : $(this).find('title').text(),
description : $(this).find('description').text(),
points : $(this).find('points').text()
}
_storage.references.push($(this).attr('id'))
});
}
});
}
cls.prototype = {
// Made changes here, you'd have to make the same
// changes to getCourses and getReferences
getCourse: function (courseID, callback) {
if (xhr.readyState == 4) {
callback(_storage.courses[courseID]);
}
else {
xhr.done(function(){
callback(_storage.courses[courseID]);
})
}
},
getCourses: function () {
return _storage.courses
},
getReferences: function (),
return _storage.references
}
}
return cls
})()
As a side note, your module pattern will not work very well if you need to instantiate two of these model_courses objects, since the storage objects are all shared in your self calling function's closure. You usually don't mix the module pattern with prototypes (returning a constructor from a module), unless you really know what you are doing, that is, the shared closure variables work as static properties of your class.
This is what I would do if I were you (since you really want private variables)
function ModelCourses() {
var storage = {
courses: {},
references: []
};
var xhr = $.ajax({
type: "GET",
url: "data/courses.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("course").each(function() {
storage.courses[$(this).attr('id')] = {
title : $(this).find('title').text(),
description : $(this).find('description').text(),
points : $(this).find('points').text()
}
storage.references.push($(this).attr('id'))
})
}
});
this.getCourse = function(courseId, callback) {
function getCourse() {
callback(storage.courses[courseID])
}
if (xhr.readyState == 4) {
getCourse();
}
else {
xhr.done(getCourse);
}
};
}
in getStorage either add a check to see if there is any data to pilfer (preferred), or make the "actual" method private than publicize it when it has items it can access. (I would recommend the first though otherwise you'll get exceptions about calling a method that doesn't exists on an object).
You can define a function getData that would perform the ajax request and that would take the getCourse as a callback.
The getData could possibly store locally the result of the Ajax call and test the local storage before performing the ajax call.
You could also specify a private member to allow the ajax call to be run only once.
You might want to check underscore.js for some handy tool
Here is a short example code :
cls.prototype.getData = function(callback) {
/*perform ajax call or retrieve data from cache*/
callback()
}
cls.prototype.getCourse = function(id) {
this.getData(function() {
/*do something with the data and the id you passed*/
}
}