javascript - API Forismatic JSON: Random Quote Machine -
i'm building quote machine using forismatic api , utterly stumped. program working fine until decided revisit work in future. here's 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 , 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 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 doing wrong? i've created variable hold url, created function gets data, , used getjson utilize function. (excuse terminology)
it works when run on website, on: https://codepen.io/gilioo/pen/jkpjgr doesn't generate quote.
any appreciated.
i believe it's cross-origin resource sharing (cors) issue, you're accessing codepen.io via https forismatic api offered via http afaik. try http://codepen.io , see if works. i've run same issue myself when trying use api via https.
Comments
Post a Comment