We Keep Coding

Meteor HTTP.call undefined on Client-side, working on Server-side

I am currently trying to learn how to do HTTP requests in Meteor. When I run the code, I can properly see the data in the console. However, on the client side all I get is "undefined". I believe I'm running the HTTP.get method synchronously.
.JS file
if (Meteor.isClient) {
Template.test.helpers({
testGET: function(){
var origin = Meteor.call('fetchFromService');
console.log(origin); //-- Displays 'Undefined'
}
});
}
if (Meteor.isServer) {
Meteor.methods({
fetchFromService: function() {
this.unblock();
var url = "https://httpbin.org/get";
var result;
try{
result = HTTP.get( url );
} catch(e) {
result = "false";
}
console.log(result.data.origin); //-- Displays the data properly
return result.data.origin;
}
});
}

It's async, you have to pass a callback to the call function:
var origin = Meteor.call('fetchFromService', function(err, data) {
console.log(data);
});
If you don't pass the callback, origin will be undefined until the request finishes.

SendResponse fails when using a Promise

In the extension I am building, on click of a button, a request is sent from ChromeUtils.js
return new Promise(function(fulfill,reject){
var request = {
type : "background.twitterRequestToken",
};
chrome.runtime.sendMessage(request, function(response) {
if (response)
{
fulfill(response);
}
else
{
reject(response);
}
});
});
to the background.js which in turn calls an oauth Api to send a request to the remote server.
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log("background.js: " + JSON.stringify(request));
var type = request.type;
if (type == "background.twitterRequestToken")
{
oauth.authorize().then(function(token,secret,userId,screenname){
console.log("Sending Response on Authorize");
sendResponse({success:true,userId:userId,screenName:screenname});
});
console.log("Before Return true");
return true;
}
I am using the oauth scripts from the example given at https://developer.chrome.com/extensions/tut_oauth but due to a requirement have modified the oauth to use promise. When implemented as a promise, the sendResponse fails but when using the default implementation using callbacks. the sendResponse goes through.
Default implementation using callbacks:
if (type == "background.twitterRequestToken")
{
oauth.authorize(function(token,secret,userId,screenname){
console.log("Sending Response on Authorize");
sendResponse({success:true,userId:userId,screenName:screenname});
});
console.log("Before Return true");
return true;
}
Error message in the background console when implemented as a promise is
Uncaught (in promise) Error: Attempting to use a disconnected port object
The reason I want to use a promise is that when sending signedRequests using Oauth, I want to include part of the xhr response in the sendResponse, e.g. as shown below.
if (type == "background.tweet")
{
var status = request.tweet.text;
var url = "https://api.twitter.com/1.1/statuses/update.json";
var request = {
'method':'POST',
'parameters': {
'status':status
}
}
oauth.sendSignedRequest(url,request).then(signedRequestCallback).then(function(resp,xhr){
console.log("signedRequestCallback success");
console.log("Sending response");
sendResponse({success:true,status_id:resp.id});
});
return true;
}
I have already included return true in my code and as I explained it works fine when not using Promise. It fails when using Promise because the of the error message I included.
===============Update========
To repro this I created a simpler example but I do not face the issue there when I use a Promise. So this may not have anything to do with Promise.

Dojo.js has unvalidated data

I'm working with an e-learning course that a vendor created (who we no longer deal with) and when I upload the files through my company's security software (HP Fortify Scan) I'm getting multiple errors. I've corrected all the errors expect one. The error is in the dojo.js file and it has to do with a url variable being unvalidated. I'm sure it's a simple fix, but can someone explain what makes this unvalidated? And how can I validate this url variable?
Here is a screen shot of the error message with the code (I put the line number in a comment):
Code:
function xhr(url, options, returnDeferred){
var response = util.parseArgs(
url,
util.deepCreate(defaultOptions, options),
has('native-formdata') && options && options.data && options.data instanceof FormData
);
// THIS IS LINE 11540
url = response.url;
options = response.options;
var remover,
last = function(){
remover && remover();
};
//Make the Deferred object for this xhr request.
var dfd = util.deferred(
response,
cancel,
isValid,
isReady,
handleResponse,
last
);
var _xhr = response.xhr = xhr._create();
if(!_xhr){
// If XHR factory somehow returns nothings,
// cancel the deferred.
dfd.cancel(new RequestError('XHR was not created'));
return returnDeferred ? dfd : dfd.promise;
}
response.getHeader = function(headerName){
return this.xhr.getResponseHeader(headerName);
};
if(addListeners){
remover = addListeners(_xhr, dfd, response);
}
var data = options.data,
async = !options.sync,
method = options.method;
try{
// IE6 won't let you call apply() on the native function.
// THIS IS LINE 11580
_xhr.open(method, url, async, options.user || undefined, options.password || undefined);
if(options.withCredentials){
_xhr.withCredentials = options.withCredentials;
}
var headers = options.headers,
contentType;
if(headers){
for(var hdr in headers){
if(hdr.toLowerCase() === 'content-type'){
contentType = headers[hdr];
}else if(headers[hdr]){
//Only add header if it has a value. This allows for instance, skipping
//insertion of X-Requested-With by specifying empty value.
_xhr.setRequestHeader(hdr, headers[hdr]);
}
}
}
if(contentType && contentType !== false){
_xhr.setRequestHeader('Content-Type', contentType);
}
if(!headers || !('X-Requested-With' in headers)){
_xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
if(util.notify){
util.notify.emit('send', response, dfd.promise.cancel);
}
_xhr.send(data);
}catch(e){
dfd.reject(e);
}
watch(dfd);
_xhr = null;
return returnDeferred ? dfd : dfd.promise;
}
Thanks in advance,
Mike

I'd say this is not necessarily an error, it is just that HP Fortify Scan is pointing out a piece of code in dojo/request/xhr.js which may need your attention, in case your server code is not prepared for such an attack... You may validate the url at a higher level code in your application (possibly in your store) where you call the xhr(), not sure if that would satisfy HP Fortify.

Bug in basic Ajax library

Been trying to create a basic Ajax library using JavaScript based upon a tutorial in the book "Build your own AJAX Web Applications" by Matthew Eernise (see here) as I want to get more in-depth knowledge of AJAX XML-RPC and REST. Based on the book I have created a JavaScript constructor function to get AJAX or an XMLHttpRequest going, but somehow I seem to suffer from an out-of-scope issue and the Ajax class is not defined in the following script:
function Ajax() {
// properties
this.req = null;
this.url = null;
this.method = 'GET';
this.asynch = true;
this.status = null;
this.statusText = '';
this.postData = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = 'text',
// 'text', 'html', 'xml' or 'object'
this.mimeType = null;
} // End Constructor
//Create XMLHttpRequest method with XMLHttpRequest object
this.init = function() {
if (!this.req) {
try {
//Try to create objects for Firefox, Safari, IE7, etc.
this.req = newXMLHttpRequest();
}
catch(e) {
try {
//Try to create object for later versions of IE.
this.req = new ActiveXObject('MSXML2.XMLHTTP');
}
catch(e) {
try {
//Try to create for early versions of IE.
this.req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e) {
//Could not create XMLHttpRequest object.
return false;
}
}
}
}
return this.req;
};
//Sending a Request method
this.doReq = function() {
if (!this.init()) {
alert('Could not create XMLHttpRequest object.');
return;
}
//Setting up a request
//open methods with method, url and asycn yes or no
this.req.open(this.method, this.url, this.asynch);
//Make sure mimetype is OK
if (this.mimeType) {
try {
req.overrideMimeType(this.mimeType);
}
catch(e) {
//couldn't override MIME type ... IE6 or Opera?
}
}
var self = this; // fix loss-of-scope in inner function
this.req.onreadystatechange = function() {
var resp = null;
if (self.req.readyState == 4) {
//do stuff to handle response
switch (self.reponseFormat) {
case 'text':
resp = self.req.responseText;
break;
case 'xml':
resp = self.req.responseXML;
break;
case 'object':
resp = req;
break;
}
if (self.req.status >= 200 && self.req.status <= 299) {
self.handleResp(resp);
}
else {
self.handleErr(resp);
}
}
};
this.req.send(this.postData);
};
this.handleErr = function() {
var errorWin;
try {
errorWin = window.open('', 'errorWin');
errorWin.document.body.innerHTML = this.responseText;
}
catch(e) {
alert('An error occured, but this error message cannot be '
+ 'displayed. This is probably because of your browser\'s '
+ 'pop-up blocker. \n'
+ 'Please allow pop-ups from this website if you want to '
+ 'see the full error messages. \n'
+ '\n'
+ 'Status Code: ' + this.req.status + '\n'
+ 'Status description: ' + this.req.statusText);
}
};
this.abort = function() {
if (this.req) {
this.req.onreadystatechange = function() {};
this.req.abort();
this.req = null;
}
};
this.doGet = function (url, hand, format) {
this.url = url;
this.handleResp = hand;
this.responseFormat = format || 'text' ;
this.doReq();
};
The error I get on the page that loads this script with
var hand = function (str) {
alert(str);
}
var Ajax = new Ajax(); // new instance as can ben done with PHP5 constructor classes
ajax.doGet ('/fakeserverpage.php', hand);
and starts up a new instance of Ajax get the error ajax is not defined even though I did add var self = this; // fix loss-of-scope in inner function
to fix the scope issue. What am I missing?
Update 1
Thanks to a tip here Gave new instance a different name so they don't clash:
var hand = function (str) {
alert(str);
}
var ajax = new Ajax(); // new instance as can ben done with PHP5 constructor classes
ajax.doGet ('/fakeserverpage.php', hand);
Now I am a little further. Now I get a new error: Uncaught TypeError: Object #<Ajax> has no method 'doGet'
Update 2
I tried using Ajax.prototype.init instead of this.init as recommended by a co dev here, but I still have the same error..
Update 3
Thanks to #Soufiana Hassou I improved the code by adding Ajax.prototype to all methods. Did not know it was necessary for all to work with the constructor, but it is. Code is here http://pastebin.com/g86k0z8d . I now get this pop-up saying Could not create XMLHttpRequest object. This error message is built into the method so it is working, but it cannot create the object somehow. This means there must be an error in my request for an XMLHttpRequest as I covered all cases and tested this in Firefox 11 for Mac using code on my local MacPorts MAMP. Either that or there is something else I do not know about..
Update 4
Fixed a typo. Then I got a 404 loading the fake server page. Corrected path ajax.doGet ('/ajax/fakeserverpage.php', hand); so now OK. Only I need to get the PHP to generate the code so I get an OK. The header response is OK, but I do not see the AJAX alert yet. Then I checked the console and found this error:
self.req is undefined
http://localhost/ajax/ajax.js
Line 78
See latest code: http://pastebin.com/g86k0z8d . I added some more Ajax.prototype where I thought they were still needed. Now I get:
this.req is null
http://localhost/ajax/ajax.js
Line 100
Update 5
Made some more changes removing some selfs used initially for the out-of-scope issue using var self = this. Code is still the same pastebin, but I have updated it. Now I have:
Ajax.prototype.handleResp is not a function
http://localhost/ajax/ajax.js
Line 92
Update 6
I cleaned up some of the mistakes I made in the req.onreadystatechange = function() function and now I does run. I turned of Firefox pop-up blocker for localhost and on reload it opened another tab and showed the text undefined. So almost there. No errors, just no pop-up with OK. Chrome showed a pop-up with the undefined in the body. Updated code here: http://pastebin.com/g86k0z8d as usual

You are using the same name for your instance and the class itself.
Also, you are declaring Ajax and using ajax, Javascript is case-sensitive.

First, you have var Ajax = new Ajax(); You should have var ajax = new Ajax(); instead.
Secondly, using this outside of the constructor isn't referring to the Ajax object. Try using its prototype instead:
function Ajax() {
// Set properties here
}
Ajax.prototype.init = function() {
// ...
}
See this article on Javascript classes for more information.

How to set my local javascript variable as a json data on remote website

I have a javascript code on my website, there is a variable:
var remoteJsonVar;
On the other hand there is a json file on a remote website
https://graph.facebook.com/?ids=http://www.stackoverflow.com
I need to set the variable remoteJsonVar to this remote jason data.
I am sure that it is very simple, but I can't find the solution.
A small working example would be nice.

Because you're trying to get the data from a different origin, if you want to do this entirely client-side, you'd use JSON-P rather than just JSON because of the Same Origin Policy. Facebook supports this if you just add a callback parameter to your query string, e.g.:
https://graph.facebook.com/?ids=http://www.stackoverflow.com?callback=foo
Then you define a function in your script (at global scope) which has the name you give in that callback parameter, like this:
function foo(data) {
remoteJsonVar = data;
}
You trigger it by creating a script element and setting the src to the desired URL, e.g.:
var script = document.createElement('script');
script.src = "https://graph.facebook.com/?ids=http://www.stackoverflow.com?callback=foo";
document.documentElement.appendChild(script);
Note that the call to your function will be asynchronous.
Now, since you may want to have more than one outstanding request, and you probably don't want to leave that callback lying around when you're done, you may want to be a bit more sophisticated and create a random callback name, etc. Here's a complete example:
Live copy | Live source
(function() {
// Your variable; if you prefer, it could be a global,
// but I try to avoid globals where I can
var responseJsonVar;
// Hook up the button
hookEvent(document.getElementById("theButton"),
"click",
function() {
var callbackName, script;
// Get a random name for our callback
callbackName = "foo" + new Date().getTime() + Math.floor(Math.random() * 10000);
// Create it
window[callbackName] = function(data) {
responseJsonVar = data;
display("Got the data, <code>shares = " +
data["http://www.stackoverflow.com"].shares +
"</code>");
// Remove our callback (`delete` with `window` properties
// fails on some versions of IE, so we fall back to setting
// the property to `undefined` if that happens)
try {
delete window[callbackName];
}
catch (e) {
window[callbackName] = undefined;
}
}
// Do the JSONP request
script = document.createElement('script');
script.src = "https://graph.facebook.com/?ids=http://www.stackoverflow.com&callback=" + callbackName;
document.documentElement.appendChild(script);
display("Request started");
});
// === Basic utility functions
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
function hookEvent(element, eventName, handler) {
// Very quick-and-dirty, recommend using a proper library,
// this is just for the purposes of the example.
if (typeof element.addEventListener !== "undefined") {
element.addEventListener(eventName, handler, false);
}
else if (typeof element.attachEvent !== "undefined") {
element.attachEvent("on" + eventName, function(event) {
return handler(event || window.event);
});
}
else {
throw "Browser not supported.";
}
}
})();
Note that when you use JSONP, you're putting a lot of trust in the site at the other end. Technically, JSONP isn't JSON at all, it's giving the remote site the opportunity to run code on your page. If you trust the other end, great, but just remember the potential for abuse.
You haven't mentioned using any libraries, so I haven't used any above, but I would recommend looking at a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. A lot of the code above has already been written for you with a good library. For instance, here's the above using jQuery:
Live copy | Live source
jQuery(function($) {
// Your variable
var responseJsonVar;
$("#theButton").click(function() {
display("Sending request");
$.get("https://graph.facebook.com/?ids=http://www.stackoverflow.com&callback=?",
function(data) {
responseJsonVar = data;
display("Got the data, <code>shares = " +
data["http://www.stackoverflow.com"].shares +
"</code>");
},
"jsonp");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});