Clipping Magic API - javascript

I am currently trying to use the api for clippingmagic but I am running into a problem with defining their callback function. Here is the code I have currently for it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://clippingmagic.com/api/v1/ClippingMagic.js" type="text/javascript">
</script>
<script type="text/javascript">
var errorsArray = ClippingMagic.initialize({apiId: ####});
if (errorsArray.length > 0) alert("Sorry, your browser is missing some required features: \n\n " + errorsArray.join("\n "));
ClippingMagic.edit({
"image" : {
"id" : ######,
"secret" : "#############"
}
}, callback);
</script>
If anyone has worked with their api and can help me, that would be greatly appreciated.

Where are you defining your callback variable? I don't see that callback would actually resolve to a function that you've defined.
ClippingMagic.edit({
"image" : {
"id" : response.image_id,
"secret" : response.image_secret
}
}, function(response) {
if(response.event == 'result-generated') {
# response.image.id
# response.image.image_secret
}
});
I created a clipping magic plugin for WordPress to edit WooCommerce product photos and this is a snippet from it.

Related

Paypal lightbox: does not permit cross-origin framing

I have attempted to go about the use of Paypal Lightbox a bit differently.
I have used a button to trigger an ajax call which then generates the PayKey and if all goes well then triggers the form (from the documentation) to be created and submitted.
When i click the button the lightbox html is created but the content is not loaded into it. Instead i get the error:
Load denied by X-Frame-Options: https://www.sandbox.paypal.com/us/cgi-bin/webscr?cmd=_dispatch-failed does not permit cross-origin framing.
My Code:
<head>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
</head>
External Script:
$("#checkout").click(function() {
var id = $(this).data("id");
if(id) { pay(id); }
});
function pay(id) {
$.ajax({
url : 'paypal/Pay-Chained.php',
type : 'POST',
data : "id="+id,
success : function (data) {
var info = (JSON.parse(data));
if (info['Type'] == 'Success') {
var output = info['URL'].substr(0, 64) + "expType=light&" + info['URL'].substr(64);
$("body").append('<form action="'+output+'" target="PPDGFrame" class="standard"><input type="submit" id="submitBtn"></form>');
$("#submitBtn").click();
} else {
alert("Error: Please try again or contact support.");
}
},
error : function () {
alert("Error: Please try again.");
}
});
}
At the bottom of the buttons page:
<script type="text/javascript" charset="utf-8">
var embeddedPPFlow = new PAYPAL.apps.DGFlow({trigger: 'checkout'});
</script>
I am thinking maybe it has to do with the order things are executed but can't seem to figure it out. Any help would be great!
EDIT: I just created a blank page and copied the script from the documentation exactly. I still get the same error. Might it have something to do with server settings? I am running a WampServer with an address like 192.168.1.1/mysite/index.html.

How to Convert Maxmind Geoip1 javascript script to Geoip2

Using the first Geoip I was using a simple Javascript code (as seen below), but I've been trying all day to figure out what I need to do to have the script recognise the country code for Maxmind Javascript Geoip2.
The Original GEOip code
<script type="text/javascript">
var user_country = geoip_country_code();
if(user_country == "US")
document.write(hockeyAds[4]);
else
document.write(hockeyAds[5]);
</script>
What I have in the new header
<script type="text/javascript" src="//j.maxmind.com/js/apis/geoip2/v2.0/geoip2.js"></script>
The latest code that I have attempted to use.
<script type="text/javascript">
var user_country = geoip2.cityISPOrg.country.iso_code();
if(user_country == "US")
document.write(hockeyAds[4]);
else
document.write(hockeyAds[5]);
</script>
Below on the same page I have tried this script that someone made and I was able to get it to type out the correct country code. So I am convinced that it is a problem with the above javascript code.
<script>
geoip2.cityISPOrg(function (response) {
$("#usercountry").html(response.country.iso_code);
});
</script>
<p>
<span id="usercountry"></span>
</p>
Not really all the great with understanding Javascript.
Thanks
You need to pass success and error callbacks to the geoip2 methods. Try this:
geoip2.country(
function (response) {
if (response.country.iso_code === "US") {
document.write(hockeyAds[4]);
} else {
document.write(hockeyAds[5]);
}
},
function (error) {
// handle error
}
);
Also, this tutorial might help you understand the API: http://dev.maxmind.com/geoip/geoip2/javascript/tutorial/

How do I get email address field using the LinkedIn Javascript API?

I'm using the LinkedIn Javascript API to sign in users to my application, however the API is not returning the email address even though I'm requiring permission for that specific field. I'm including the API script as follows:
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: API_KEY
scope: r_fullprofile r_emailaddress
</script>
then I'm including the Log In button in the markup:
<script type="in/Login" data-onAuth="onLinkedInAuth">
and finally I have a function to add the callback for the API response:
function onLinkedInAuth() {
var fields = ['first-name', 'last-name', 'email-address'];
IN.API.Profile("me").fields(fields).result(function(data) {
console.log(data);
}).error(function(data) {
console.log(data);
});
};
I'm only getting the First and Last Name but the API doesn't return the email field.
Reference: https://developer.linkedin.com/documents/profile-fields#email
1- be sure you made email permission (r_emailaddress) in your app http://developer.linkedin.com/documents/authentication#granting
2- then you may use this
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: key
**onLoad: onLinkedInLoad**
authorize: true
</script>
<script>
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}
// 2. Runs when the viewer has authenticated
function onLinkedInAuth() {
IN.API.Profile("me").fields("first-name", "last-name", "email-address").result(function (data) {
console.log(data);
}).error(function (data) {
console.log(data);
});
}
</script>
hope this will help you :)
thanks
Hello there #Ulises Figueroa,
May be I am coming in a bit late but this is how I had got this done:
Start off with the initial script tag on the top of your page within the head section:
<script>
Client Id Number here:
onLoad: onLinkedInLoad
authorize: true
</script>
Then, in your JS File,(I had placed an external JS File to process this API sign up/ Auth), have the following details placed:
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
function onSuccess(data) {
console.log(data);
}
function onError(error) {
console.log(error);
}
function getProfileData(){
IN.API.Profile("me").fields(["firstName","lastName", "email-address", "positions"]).result(function(data) {
var profileData = data.values[0];
var profileFName = profileData.firstName;
var profileLName = profileData.lastName;
if(data.values[0].positions._total == "0" || data.values[0].positions._total == 0 || data.values[0].positions._total == undefined) {
console.log("Error on position details");
var profileCName = "Details Are Undefined";
}
else {
var profileCName = profileData.positions.values["0"].company.name;
}
var profileEName = profileData.emailAddress;
//console.log all the variables which have the data that
//has been captured through the sign up auth process and
//you should get them...
});
}
Then last but not the least, add the following in your HTML DOCUMENT which can help you initiate the window popup for the linkedin auth sign up form:
<script type="in/Login"></script>
The above setup had worked for me. Sure this will help you out.
Cheers and have a nice day.
Implementation looks good. I'd believe this is a result from the profile's privacy settings. Per linked-in's docs:
Not all fields are available for all profiles. The fields available depend on the relationship between the user you are making a request on behalf of and the member, the information that member has chosen to provide, and their privacy settings. You should not assume that anything other than id is returned for a given member.
I figured out that this only happens with certain LinkedIn accounts, so this might be caused because some privacy setting with the email. I couldn't find any reference to the documentation so I had to consider the case when email field is not available.

Javascript if statement in body onload

I'm just needing a little help. I'm wanting to display a success message on my index, but only if someone has come from the php page that sends the email.
This is what I have
<script>
function load()
{
if (document.referrer == 'http://www.blahblah.com/contact-form-handler.php') {
$.notify.success('We read you loud and clear; message received. Prepare for reply.', {
autoClose : 3000
});
}
}
</script>
</head>
<body onload="load()">
This works :
<script>
function load()
{
$.notify.success('We read you loud and clear; message received. Prepare for reply.', { autoClose : 3000 });
}
</script>
</head>
<body onload="load()">
So there's obviously something wrong with that if statement. Can someone please help me?
use a regular expression with .match()
function load()
{
if (document.referrer.match(/\/contact-form-handler.php/)) {
$.notify.success('We read you loud and clear; message received. Prepare for reply.', {
autoClose : 3000
});
}
}

No callback from a API call to Tumblr

I'm making a chrome extension, which needs to get the current user's followers. The tumblr API says that I need to implement oauth and send requests as listed here. I implemented oauth following the example and using the library from google here.
So, the result was that the oauth.authorize function would run, but the callback function, onFollowers, wouldn't be called, leaving me to believe that I'm not getting a response from tumblr for some reason.
This is the code I ended up with:
background.html:
<html>
<script type="text/javascript" src="chrome_ex_oauthsimple.js"></script>
<script type="text/javascript" src="chrome_ex_oauth.js"></script>
<script type="text/javascript" src="background.js"></script>
</html>
background.js:
var oauth = ChromeExOAuth.initBackgroundPage({
'request_url' : 'POST http://www.tumblr.com/oauth/request_token',
'authorize_url' : 'http://www.tumblr.com/oauth/authorize',
'access_url' : 'POST http://www.tumblr.com/oauth/access_token',
'consumer_key' : '[key provided]',
'consumer_secret' : '[secret provided]',
'app_name' : '[app name]'
});
var followers = null;
var baseHostname = localStorage.getItem('BaseHostname');
function onFollowers(text, xhr) {
//parsing JSON response
}
function getFollowers() {
oauth.authorize(function() {
var url = "api.tumblr.com/v2/blog/"+baseHostname+"/followers";
oauth.sendSignedRequest(url, onFollowers, {
'parameters' : {
'base-hostname' : baseHostname
}
});
});
};
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "getFollowers")
console.log(baseHostname);
getFollowers();
sendResponse({farewell: "getFollowers function run success"});
});
Am I missing something?
See here:
Making a POST request to Tumblr's API inside a Chrome Extension
Could be that you
sendSignedRequest
Should have the params the other way around? First method, than url ?

Categories