Develop Reference

using ajax with javascript to put in database

I'm trying to put the infos into my database, for that, this code is in the connexion.jsp which is a page that ask to log with facebook.
the code is supposed to be called into the Controller which is a file in java, and go into the databse.
So my problem is the fact that the code $.ajax doesn't seems to work. It doesn't give a success or error window.alert with or without function(){}.
I might have missed some information about ajax, but i can't find more info about my error.
function fbLogin() {
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
$.ajax({
method: 'post',
url: '/hello/facebookconnection',
first_name: response.first_name,
last_name: response.last_name,
email: response.email,
success:
//success: function(){
window.alert('Sent User data!')//;}
,
error:
window.alert('Error in sending ajax data')
});
else {
document.getElementById('status').innerHTML = 'User cancelled';
}
}, {scope: 'email'});
}

function fbLogin() {
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
$.ajax({
method: 'post',
url: '/hello/facebookconnection',
first_name: response.first_name,
last_name: response.last_name,
email: response.email,
success:
//success: function(){
window.alert('Sent User data!')//;}
,
error:
window.alert('Error in sending ajax data')
});
} else {
document.getElementById('status').innerHTML = 'User cancelled';
}
}, {scope: 'email'});
}
You have a syntax error in front of your else.

Make a Stripe payment with Jquery AJAX? (Javascript ONLY)

I am trying to make a custom payment form for Stripe, and I want to make the AJAX call to Stripe manually. (instead of a submit event)
However, first off I am pretty sure I am posting it to the wrong place. But I can't figure out what URL I'm supposed to make this post request to.
If I am using the right url. I am getting a 405 not allowed response. With no information on what is wrong with my request.
Here's what I got:
Stripe.setPublishableKey('pk_test_12345');
Stripe.card.createToken({
number: ccNum,
cvc: ccCVC,
exp_month: ccMonth,
exp_year: ccYear
}, stripeResponseHandler);
This part works fine, gives me a 200 OK status and I got a token back from the server.
function stripeResponseHandler(status, response) {
console.log('card status: ', status);
console.log('token: ', response.id);
$.ajax({
type: 'POST',
url: 'https://checkout.stripe.com/checkout.js',
headers: {
stripeToken: response.id
},
data: {
number: ccNum,
cvc: ccCVC,
exp_month: ccMonth,
exp_year: ccYear
},
success: (response) => {
console.log('successful payment: ', response);
},
error: (response) => {
console.log('error payment: ', response);
}
})
}
This however, gives me the 405 Not Allowed. It seems a bit weird to me that the endpoint would be a .js file. Which is why I am assuming I got the wrong URL.
Can anyone help me figure out how to make a manual post request for a Stripe payment?

Disclaimer: This works, but it is TERRIBLE practice. Don't use this for a real project. I needed it for a front-end only testing environment. As other users on this page has pointed out, you should be doing this on the backend!
I finally found some useful documentation at: https://stripe.com/docs/api#create_charge
As I suspected the URL I was using was wrong.
after getting the right URL, the following ajax call works:
Hope That helps someone else as well! As most answers, are PHP or other backend languages.
$.ajax({
type: 'POST',
url: 'https://api.stripe.com/v1/charges',
headers: {
Authorization: 'Bearer sk_test_YourSecretKeyHere'
},
data: {
amount: 3000,
currency: 'usd',
source: response.id,
description: "Charge for madison.garcia#example.com"
},
success: (response) => {
console.log('successful payment: ', response);
},
error: (response) => {
console.log('error payment: ', response);
}
})

EDIT: This is insecure (and outdated)! You shouldn't send your user's card information directly to your own server. Instead, you should directly send it to Stripe. There's an up-to-date (using intents, etc) example here
You need to POST to a PHP file in your $.ajax() function:
$.ajax({
type: 'POST',
url: './stripe-payment.php',
headers: {
stripeToken: response.id
},
data: {
number: ccNum,
cvc: ccCVC,
exp_month: ccMonth,
exp_year: ccYear
},
success: (response) => {
console.log('successful payment: ', response);
},
error: (response) => {
console.log('error payment: ', response);
}
})
Your PHP should have something like the Stripe PHP bindings require()d to use the Stripe payment API, and that PHP file should look something like this, from this SO question:
<?php
require_once('Stripe.php');
// Set your secret key: remember to change this to your live secret key in production
// See your keys here https://manage.stripe.com/account
Stripe::setApiKey("sk_test_APIKEYREDACTED");
// Get the credit card details submitted by the form
$token = json_decode($_POST['chargeData']);
$tokenid = $token['id'];
// Create the charge on Stripe's servers - this will charge the user's card
try {
$charge = Stripe_Charge::create(array(
"amount" => 2000, // amount in cents, again
"currency" => "usd",
"card" => $tokenid,
"description" => "payinguser#example.com")
);
echo 'success';
} catch(Stripe_CardError $e) {
// The card has been declined
echo $tokenid;
}
?>
Refer to that Github's README for more, as well as the Stripe documentation.

Unable to Generate Story in Facebook App

Hi,I am using facebook open graph javascript SDK to publish actions and custom objects.
Everything runs fine, until a javascript errors occurs in the response.
Error:
"(#100) Object Missing a Required Value: Object at URL '' of type 'gourmet-table:recipe' is invalid because a required property 'og:title' of type 'string' was not provided."
The activity log in facebook creates the story , but it does not generate story in the app . Due to which i cannot send it for review purpose to facebook developers so that it is available to all users..
JS CODE:
FB.api('me/objects/gourmet-table:recipe', 'post', {
object: {
app_id: AppId,
type: 'gourmet-table:recipe',
url: link,
title: title,
image: imageUrl
}
},
function(response) {
var Id = response;
console.log(response);
FB.api('me/gourmet-table:read_recipe', 'post', {recipe:Id},
function(response) {
console.log(response);
});
});
You can check the link and debug using any dev tools at
URL:
http://gourmettable.in/recipe/gingerbread-cookies/
In Console you will get the error.
Your Help would be appreciated..
Thanks

Finally Solved the problem.. It was a carelessness from my side..Sorry for that
FB.api('me/objects/gourmet-table:recipe', 'post', {
object: {
app_id: AppId,
type: 'gourmet-table:recipe',
url: link,
title: title,
image: imageUrl
}
},
function(response) {
//var Id = response; // Error Was Here.. Instead of This
var Id = response.id; // response.id will return the object id.. I was returning the whole object instead of "id" ..
console.log(response);
FB.api('me/gourmet-table:read_recipe', 'post', {recipe:Id},
function(response) {
console.log(response);
});
});
Sorry for the inconvenience again :)

Consuming API in javascript without using Node.js

i am leveraging CamFind's API for image recognition in my windows phone 8 app. On their site they have given an example for how to use the API with Node.js.. however i am writing a PhoneGap Windows Phone app and dont have this availble.
I would like to use just plain jquery/javascript to use this API.
Here's the example provided on their site:
var Request = unirest.post("https://camfind.p.mashape.com/image_requests")
.headers({
"X-Mashape-Authorization": "Z**********************"
})
.send({
"image_request[locale]": "en_US",
"image_request[language]": "en",
"image_request[device_id]": "<image_request[device_id]>",
"image_request[latitude]": "35.8714220766008",
"image_request[longitude]": "14.3583203002251",
"image_request[altitude]": "27.912109375",
"focus[x]": "480",
"focus[y]": "640",
"image_request[image]": "/tmp/file.path"
})
.end(function (response) {
console.log(response);
});
Here's how i am trying to do the same using jquery/ 'plain' javascript
$.ajax({
url: 'https://camfind.p.mashape.com/image_requests', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
type: 'POST', // The HTTP Method
data: {
"image_request[locale]": "en_US",
"image_request[language]": "en",
"image_request[device_id]": "<image_request[device_id]>",
"image_request[latitude]": "35.8714220766008",
"image_request[longitude]": "14.3583203002251",
"image_request[altitude]": "27.912109375",
"focus[x]": "480",
"focus[y]": "640",
"image_request[image]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"
}, // Additional parameters here
datatype: 'json',
success: function(data) { alert(JSON.stringify(data)); },
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", "Z**********************");
}
});
Issue/Question:
When i do it through javascript/jquery - it seems to be complaining about missing image_request[image] attribute. It never hits the success block.
Am i doing something wrong in terms of how i transformed the Node.js API request example (1st block of code above) provided by CamFind VS. how i am doing trying to consumer the API through plain through Javascript (2nd block of code above)?
Thanks!!
Fyi, references i am using:
Consume an API in javacstipt: https://www.mashape.com/imagesearcher/camfind#!endpoint-1-Image-Request
CamFind API usage: https://www.mashape.com/imagesearcher/camfind#!endpoint-1-Image-Request

I know this is an old question but having stumbled across it whilst trying to solve it myself I thought I should answer it for the future.
The issue is this line:
"image_request[image]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"
It should be:
"image_request[remote_image_url]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"
So the complete code is:
$.ajax({
url: 'https://camfind.p.mashape.com/image_requests', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
type: 'POST', // The HTTP Method
data: {
"image_request[locale]": "en_US",
"image_request[language]": "en",
"image_request[device_id]": "<image_request[device_id]>",
"image_request[latitude]": "35.8714220766008",
"image_request[longitude]": "14.3583203002251",
"image_request[altitude]": "27.912109375",
"focus[x]": "480",
"focus[y]": "640",
"image_request[remote_image_url]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"
}, // Additional parameters here
datatype: 'json',
success: function(data) { nowDoSomethingFun(data); },
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Key", "YOURKEY")
}
});
}

I am not familiar with this API but you might try formatting your data parameter like this:
data: {
image_request: {
locale: 'en_US',
language: 'en',
device_id: '<image_request[device_id]>',
latitude: '35.8714220766008',
longitude: '14.3583203002251',
altitude: '27.912109375',
image: 'http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg'
},
focus: {
x: '480',
y: '640'
}
}

Batch request with fql using javascript

The following batch request for retrieve friends using the same app is not working:
var search = {batch: [
{
'name' : 'getFriends',
'relative_url': 'method/fql.query?query=SELECT+uid,+first_name,+name,+pic_square,+pic_small+FROM+user+WHERE+is_app_user=1+and+uid+IN+(SELECT+uid2+FROM+friend+WHERE+uid1=' + userId + ')'
},
{
'method': 'get',
'relative_url': '{result=getFriends:$.data[*].uid}/news.reads/article',
}
]};
and the following code executes the batch request:
FB.api('/', 'post', search, function(response) {
console.log(response);
});
but the first search returns null. What's wrong with the query?
According to facebook documentation for batch requests, the *relative_url* is
(...) a relative_url (the portion of the URL after graph.facebook.com)
get from here.
So I changed the first block of code to:
var search = {batch: [
{
'name' : 'getFriends',
'method' : 'GET',
'relative_url': 'method/fql?q=SELECT uid, first_name, name, pic_square, pic_small FROM user WHERE is_app_user=1 and uid IN (SELECT uid2 FROM friend WHERE uid1=me())'
},
{
'method': 'GET',
'relative_url': '{result=getAmigos:$.data[*].uid}/news.reads/article'
}
]};
the relative_url of the first block on the batch works at Open Graph API Tool at facebook, but at the JS the http code is 500 and the message body is:
{
"error": {
"message": "Graph batch API does not allow REST API method fql",
"type": "FacebookApiException",
"code": 3
}
}
but in the api batch requests documentation allows fql queries. The documentation is outdated? Should I open a bug?
P.S: the fql without the batch request is
SELECT uid, first_name, name, pic_square, pic_small
FROM user WHERE is_app_user=1
and uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

Don't use method/fql; Facebook's FQL endpoint is now just fql.
...
"name": "getFriends",
"method": "GET",
"relative_url": "fql?q=SELECT...",
...

it's working now. I just add the access_token parameter at the batch object. like this:
var searchArgs = {
access_token: FB.getAuthResponse().access_token,
batch: []
};
searchArgs.batch.push({
'method': 'GET',
'name': 'amigosapp',
'relative_url': 'method/fql.query?query=SELECT+uid,+first_name,+name,+pic_square,+pic_small+FROM+user+WHERE+is_app_user=1+and+uid+IN+(SELECT+uid2+FROM+friend+WHERE+uid1=me())&limit=20',
'omit_response_on_success': false
});
searchArgs.batch.push({
'method': 'GET',
'relative_url': 'news.reads/article?date_format=U&ids={result=amigosapp:$.[*].uid}'
});
the other trick was use the jsonpath expression in a different way. I couldn't make the second request for each user of the first request. So I changed the way to get it adding the friends ids at the end of the graph api request. I think that my first thought about a request per friend it's not possible using the batch request.
Then I did the call of the batch:
FB.api('/', 'POST', searchArgs,
function(response) {
var friends = response[0].body;
console.log(friends);
var activities = response[1].body;
console.log(activities);
}
);
Now it's just organize the posts retrieved.
[]'s