Already tried the $.getJSON and $.ajax methods but I’m not sure if I’m doing it the right way.
// When the "New Quote" button is pressed...
$("#newQuoteButton").on("click",function(){
/* First Try: using getJSON to get a random quote.
$.getJSON(url, function(json){
$("h3").text(json.quoteText);
});
*/
// Second Try: using the "ajax version" of getJSON.
$.ajax({
dataType: "json",
url: url,
success: function(json){
$("h3").text(json.quoteText)
}
});
});
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&key=XXXXX&format=json&lang=en";
use:
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&key=XXXXX&format=jsonp&jsonp=?&lang=en";
See the difference? I used jsonp. &format=jsonp&jsonp=?
It will now work
But secondly, you need to target your div where you want it to show up properly. You made a slight error. Once you have more than one h3 on the page it will change all of them i think. Better to target the div specifically using a class or ID. I think ID is probably best.
If you press f12 in your browser and navigate to the console, you will see your errors show up there and this will start you on the right troubleshooting path.
It works now!
I had no clue that I needed to use JSONP instead of JSON. As a newbie, I’m not really sure what is the major difference between the two but I’ll look for it. Thankyou!
My code is working in browser but not working on CodePen. I don’t know why I am not able to fetch quotes in Code pent. Please help by looking at below JS
JS -
$(document).ready(function() {
window.twttr = (function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) returnt;
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");
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function createTweetButton(text) {
twttr.widgets.createShareButton(
"https://twitter.com/share", // url : string
document.getElementById("twitter-button"), // targetEl : DOM node
{
text: text
} // options : object
);
}
// Generates tweet text and creates button
function createTweetButtonFromQuote(tweetText) {
var tweetText = tweetText.quote + " -" + tweetText.author;
createTweetButton(tweetText);
}
$.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(a) {
createTweetButtonFromQuote(a);
$("#quoteTextBox").html(a.quote + "<p>— " + a.author + "</p>");
});
$("#quoteChangeButton").click(function() {
var randomColor = getRandomColor();
$("#quoteChangeButton").css("backgroundColor", randomColor);
$("body").css("backgroundColor", randomColor);
$("#titleCase").css("color", randomColor);
$.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(a) {
$("#quoteTextBox").html(a.quote + "<p>— " + a.author + "</p>");
$("#twitter-button").empty();
createTweetButtonFromQuote(a);
});
});
});