nested async calls not being called after pressing the browsers refresh button - javascript

var ctrl = {};
app.controller('compFac', function($scope){
$scope.tPHots = [];
ctrl.tbcInject = function (result) {
$scope.tPHots.push({URL: result});
$scope.$apply();
};
ctrl.getFingURC= function (comURL) {
FB.api( comURL+ '/picture', function(response) {
ctrl.tbcInject(response.data.url);
});
};
ctrl.getFingID= function () {
FB.api('/5151845035415464/albums', function(response) {
for(var i = 0; i < 10; i++)
{
ctrl.getFingURC(response.data[i].id);
}
});
};
ctrl.getFingID();
)};
This is a snippet for a function to grab facebook photos from albums and allow them to be used by angular templating ($scope.tPHots). The nested calls work when I go through the webpage linearly. i.e(login > click on albums > click on photos).
However once I'm looking at the photos and the press the browsers refresh button the photos fail to be retrieved and thus cannot be displayed.
Why does this happen? Is it because of the async calls and angular? I can't figure this out.
NOTE: all other non nested async calls in the compFac controller get called.
EDIT: found new error; in regards to accessing facebook data when executing getFingId(). also i used facebooks sdk to implement the login function (fb.login())
message: "An access token is required to request this resource."

In controller, you are assigning all function to ctrl object's property. When browser page refresh, when controller call all the function you have written assign to ctrl property but initial function which is ctrl.getFingID is not called. You have to called it.
Add below code at end of controller.
ctrl.getFingID();
and do you have defined ctrl variable? If not then create it below $scope.tPHots = [];

not the most ideal solution. but refreshing logged me out. or maybe the login process was too slow. still not 100% sure what the problem was. but i just had to check if the user was logged in, if not. log the user back in then search for the photos.

Related

I am stuck getting a JSON return from the Linkedin API

I am using the RESTFUL API request. Here is my code:
$(document).ready(function(){
var LinkedinAuth = "https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=75rsv9vpa1ixv3&redirect_uri=https%3A%2F%2Fmattobra.github.io/page.html&state=987654321&scope=r_basicprofile"
$(button).click(function(){
LinkedinAuth
})
var start = function(){$.getJSON("https://api.linkedin.com/v1/people/~:(id,first-name,skills,educations,languages,twitter-accounts)?format=json", function(data){console.log(data)})
}
I have the user log in. And then it brings them to the next page. however, the json never gets returned.
I don't see you calling the start() function anywhere in your code. You only declare it. I think you should put it inside the button click function.

$http requests get caught in infinite loop while updating angular-ui-sortable list

I have a MEAN app I'm working on. I'm using angular ui sortable to manage a list.
I'd like to persist the list's order when the page is refreshed. The following function submits an $http.post request for each present object in the array.
It works fine if I trigger it using a button. But I'd like it to trigger every time the user updates the order of the list.
$scope.sortPresents = function() {
for (var j=0; j < $scope.presents.length; j++) {
$scope.presentClientToDB(j);
}
};
$scope.presentClientToDB = function(a) {
var tmpId = $scope.presents[a]._id;
$http.post('/api/presents/' + tmpId, {
title: $scope.presents[a].title,
notes: $scope.presents[a].notes,
link: $scope.presents[a].link,
index: $scope.presents[a].index
})
.success(function(data) {
console.log('great success posting data!');
})
.error(function(data) {
console.log('error: ' + data);
});
};
In my view, I call this sortPresents() function upon updating the list:
<ul ui-sortable="{update: sortPresents()}" ng-model="presents" class="list-group">
...
</ul>
Which freezes my app and causes a repeating torrent of POST requests in my terminal (on the Express end, using morgan).
I understand that ui-sortable's update function gets called repeatedly as I click and drag a list item. So I tried placing the function as the stop method, to no avail.
Any thoughts on how to fix or better implement this?
In your ui-sortable options, you need to set the function variable - not invoke the function. So change to ui-sortable="{stop: sortPresents}" (without the parenthesis):
<ul ui-sortable="{stop: sortPresents}" ng-model="presents" class="list-group">
...
</ul>

Trello API isnt calling the success handler?

I have an issue where we have the Trello API adding a new card to a defined list, and it is successfully adding to the list, however we are trying to use the .done to close the current window and open a hard-coded trello board. This code is used to take a record from CRM and copy the code to Trello.
var creatingtheCard = function () {
var record = getRecord(getParameterByName("id"))
if (record.Description == null) {
record.Description = "";
}
var options = document.getElementById("ListNameItem");
var listId = options[options.selectedIndex].value
Trello.post("cards", { name: record.Title, desc: record.Description + " - " + record.CustomerId.Name, idList: listId})
.done(closeWinOpenTrello)
.error(failure);
}
function closeWinOpenTrello() {
window.open("http://trello.com/b/8QWBDiTI")
window.close()
}
This function is called and it successfully creates the new card in Trello, but it wont perform the closeWinOpenTrello function, but it will perform the .error.
Also i ran this in the debugger and when i run the code step by step it will give the error and then close the window and open a new window with Trello.
Thanks in advance
Update 1
This is the failure function
var failure = function (error) {
alert(error.statusText);
}
You need to cancel the form submission. Otherwise the page changing will cause the cancelled state of the request - the browser isn't going to bother waiting for the response after the page changes, because there's no longer anything waiting on the response.
In order to do this, just return false from the onsubmit handler.

Javascript scope issue with opensocial payment API

I have a strange issue and I have been stuck for hours now. I am working on porting somebody's game to a social platform called Mixi. Now, there is a button inside the game which triggers a Javascript function with four parameters. (the game passes the values for these while calling.)
Now, I have written definition for this function calling the Mixi API for payment and if I call this function from anywhere within my file, the window/widget shows up. But, when it gets called from within the game, something messes up and it just crashes.
I have checked Console and it seems that something is wrong with the context or scope. If I put an alert in the same function, it gets called perfectly fine from within the game. But, since it is an API call and depends on objects from other JS files, included before this file in the Mixi application, I think opensocial.requestPayment malfunctions since context changes when function is called from within the game.
Same thing is observed for functionality like Inviting friends. A call from within the .js or another .js in the same application works fine but from within the game API call does not work, and the Network monitor in Firebug shows "rpc.json" something as the last thing. The same thing also comes when the function is called manually, but is immediately followed by something win_create.pl from the server of Mixi and shows up the dialog.
Code for the functions seems to be fine, since it works perfectly when called from this container web application. But from within the game, only the alerts come (means function is called) but API is not called correctly.
I have tried doing this:
var that = this; // outside the function
function sendPaymentRequest(itemName, amount etc.){
that.opensocial.sendPaymentRequest... // works only if called from within this application
}
But this makes no difference, either.
I am sorry if this sounds confusing, as I didn't know how to explain this in a nutshell. If you need any further information, please let me know.
Update: Code Snippets:
The following function is used for calling opensocial's payment request:
function sendPaymentRequest(id, price, count, name, imageUrl) {
var itemId = id;
var amount = price * count;
var itemName = name;
$.post(
"http://url.com/payment.php",
{"item_id":itemId, "item_price":amount, "item_name":itemName },
function(data){
var responseJSON = JSON.parse(data);
//alert("Signature Fetched: "+ responseJSON.signature); -- this works
var params = {};
params[opensocial.Payment.Field.AMOUNT] = amount;
params[mixi.Payment.Field.ITEM_NAME] = "diamond";
params[mixi.Payment.Field.SIGNATURE] = responseJSON.signature;
params[mixi.Payment.Field.ITEM_ID] = id;
params[mixi.Payment.Field.IS_TEST] = 'true';
params[mixi.Payment.Field.INVENTORY_CODE] = 123;
params[opensocial.Payment.Field.PAYMENT_TYPE] = opensocial.Payment.PaymentType.PAYMENT;
var payment = opensocial.newPayment(params);
//alert("Just before opensocial request payment" + opensocial.requestPayment); -- works even when called from game
console.log(payment);
opensocial.requestPayment(
payment,
"http://url.com/payment-callback.php",
function(response){
var data;
var code;
var msg;
if (response.hadError()){
code = response.getErrorCode();
msg = response.getErrorMessage();
alert('code=' + code + ' msg=' + msg);
}else{
data = response.getData();
// alert('ok. itemNmae=' + data.fields_.itemName);
}
}
);
});
}
This specific function is being called from within the game. But, the window for payment which this method is supposed to open doesn't show. However, if the same call to opensocial.requestPayment is made from anywhere within the javascript file from a global scope, it shows instantly.

Access a parameter in Javascript

i've a strange problem with JS (probably a noob bug), but i'm stuck with it
In function fillInVersionsList, if i put an alert("tempo") or a break in firebug, i can access to my datas in parameter (ie : alert(pSimulator.simulatorData['LastVersion']) and i've the right result. The problem is that if i don't put an alert/firebug break before my access to datas, i've a JS error pSimulator.simulatorData is undefined.
$(document).ready(function() {
var simulator = new Simulator();
// Load SimulatorData into the simulator class
initSimulatorData(simulator);
// Fill in datas into VersionsList (2nd arg = Id of the list)
fillInVersionsList(simulator, $('#VersionsList'));
});
function initSimulatorData(pSimulator)
{
$.ajax({
url: "getData.php?action=init",
success: function(data) {
pSimulator.initSimulatorData(data);
}
});
}
function fillInVersionsList(pSimulator, pSelect)
{
//alert("tempo");
alert(pSimulator.simulatorData['LastVersion']);
pSelect.html('<option>test</option>')
}
function Simulator()
{
var simulatorData;
this.initSimulatorData = function(pSimulatorData)
{
this.simulatorData = pSimulatorData;
}
}
Is there something to solve this problem?
Thanks in advance
I suspect initSimulatorData is loading some data asynchronously.
Adding the alert gives it long enough for the data to be loaded.
You will need to add some sort of callback function, eg:
initSimulatorData(simulator, function () {
// Fill in datas into VersionsList (2nd arg = Id of the list)
fillInVersionsList(simulator, $('#VersionsList'));
});
Whats looks like from your problem is that simulator is taking time to initialize and when fillInVersionsList is called pSimulator is still not completely initalized.
When you put an alert it is getting some time delay by which time simulator is initalized.
Check if there is any callback method after simulator is completely initialized and then call fillInVersionsList method after that.
what does initSimulatorData(simulator) does? Is there any asynchronous code invloved in this?

Categories