I'm working on using Google's URL Shortener and I keep getting Uncaught Reference Errors. Any ideas how to "define" the function here? Here's what it looks like in the console.
<script type="text/javascript">
$(document).ready(function()
{
urlShortener.settings.apiKey='AIzaSyB445qyB-wbJEOgFW73h_HhMc6oYWMBV2b';
^Uncaught ReferenceError: url Shortener is not defined.^
$("#shortIt").click(function()
{
$("#shortUrlInfo").html("<img src='images/loading.gif'/>");
var longUrlLink =$("#longUrl").val();
shortUrl = jQuery.urlShortener({longUrl:longUrlLink});
$("#shortUrlInfo").html(shortUrl);
});
});
</script>
HTML
<html>
<head>
<meta name="google-site-verification" content="aSIpd2NtPwUbwXmpghxvaJfw-2VrgSAFBaxrImdSCT4" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/remove.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/social-buttons-3.css" rel="stylesheet">
<link href="http://www.gifmash.co/img/favicon.png" rel="icon" type="image/icon">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="//use.typekit.net/lbp6yxd.js" type="text/javascript"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<input type="url" id='longUrl' class="form-control" placeholder="">
<input type="button" id="shortIt" class="btn btn-danger" value="Create!"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="js/jquery.urlshortener.js" type="text/javascript"></script>
<script src="js/getUrlParam.js"></script>
<script src="js/getGif.js"></script>
<script src="js/getVid.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
urlShortener.settings.apiKey='AIzaSyB445qyB-wbJEOgFW73h_HhMc6oYWMBV2c';
$("#shortIt").click(function()
{
$("#shortUrlInfo").html("<img src='images/loading.gif'/>");
var longUrlLink =$("#longUrl").val();
shortUrl = jQuery.urlShortener({longUrl:longUrlLink});
$("#shortUrlInfo").html(shortUrl);
});
});
</script>
</body>
</html>
jQuery.urlshortener.js
/*!
* jQuery URL Shortener 1.0
* https://github.com/hayageek/jQuery-URL-shortener
*
* Date: 24-Oct-2013
*/
(function ($) {
var scriptsLoaded = false;
var clientLoaded = false;
$.getScript("https://apis.google.com/js/client.js", function () {
(function checkIfLoaded() {
if (gapi.client) {
scriptsLoaded = true;
gapi.client.setApiKey($.urlShortener.settings.apiKey);
gapi.client.load('urlshortener', $.urlShortener.settings.version, function () {
clientLoaded = true;
});
} else window.setTimeout(checkIfLoaded, 10);
})();
});
$.urlShortener = function (options) {
var settings = {};
var data = {};
$.extend(settings, $.urlShortener.settings, options);
(function checkScriptsAndClientLoaded() {
if (scriptsLoaded && clientLoaded) {
if (settings.longUrl != undefined) {
longToShort(settings);
} else if (settings.shortUrl != undefined) //URL info
{
shortUrlInfo(settings);
}
} else {
window.setTimeout(checkScriptsAndClientLoaded, 10);
}
})();
function longToShort(s) {
var data = {
'longUrl': s.longUrl
};
var request = gapi.client.urlshortener.url.insert({
'resource': data
});
request.execute(function (response) {
if (response.id != null) {
if (s.success) {
s.success.call(this, response.id);
}
} else {
if (s.error) {
s.error.call(this, response.error);
}
}
});
}
function shortUrlInfo(s) {
var data = {
'shortUrl': s.shortUrl,
'projection': s.projection
};
var request = gapi.client.urlshortener.url.get(data);
request.execute(function (response) {
if (response.longUrl != null) {
if (s.success) {
if (s.projection == undefined) s.success.call(this, response.longUrl);
else s.success.call(this, response);
}
} else {
if (s.error) {
s.error.call(this, response.error);
}
}
});
}
}
$.urlShortener.settings = {
apiKey: 'AIzaSyB445qyB-wbJEOgFW73h_HhMc6oYWMBV2b',
version: 'v1.0.1',
};
});
You are referring to urlShortener by itself. It isn't a global object.
If you say:
the browser doesn't know what the hell urlShortener is. Because it doesn't exist. Throw that $ in front.