Forismatic JSON API: Random Messaging Machine

Question

I am currently creating a quotation machine using the forismatic API, and is completely dead end. My program worked fine until I decided to review my work in the future. Here is my code:

var html = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?"; var getQuote=function(data){ if(data.quoteAuthor === "") { data.quoteAuthor = "Unknown"; } $('#author').text(data.quoteAuthor); $('#text').text(data.quoteText); var quote = 'https://twitter.com/intent/tweet?text=' + "\"" + data.quoteText + "\"" + ' Author: ' + data.quoteAuthor +' @Gil_Skates'; $('#tweet').attr("href", quote); }; $(document).ready(function() { $.getJSON(html, getQuote, 'jsonp'); }); // On button click $('#new-quote').on("click", function(){ // Deletes text and creates spinner $('#text').text(""); $('#author').text(""); $('<span style = "margin-left:200px" class="fa-li fa fa-spinner fa-spin"/>').appendTo('#text'); // Calls our random quote $.getJSON(html, getQuote, 'jsonp'); }); // Tweet popup window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class = "quote-box centered"> <div class = "quote-text"> <i class="fa fa-quote-left"></i><span id = "text" >Quotes inspire<span> </div> <div class = "quote-author"> <span id = "author">Programmer</span> </div> <div class = "buttons"> <a class="button" href="https://twitter.com/intent/tweet" data-size="large" id="tweet" title="Tweet this now!" target="_blank"> <i class = "fa fa-twitter"></i> </a> <!--<a class="button" id="tumblr" title="Share on Tumblr!" target="_blank"> <i class = "fa fa-tumblr"></i> </a>--> <button class = "button" id ="new-quote">New Quote</button> </div> </div> 

What am I doing wrong? I created a variable to hold my url, created a function that receives data, and used getJSON to use my function. (Sorry for my terminology)

It works when I run it on this website, but on: https://codepen.io/gilioo/pen/JKpjgr it does not generate a quote.

Any help is appreciated.

Answer 1

I believe the Cross-Origin Resource Sharing Problem (CORS), you get access to codepen.io through https, but the forismatic API is only provided through http afaik. You can try http://codepen.io and see if it works. I myself encountered the same problem when trying to use the API via https.