[SOLVED] Random Quote Machine: jQuery getJSON / ajax methods not working on CodePen

Greeting everyone,

would someone mind to answer me what am I doing wrong in my code at CodePen?
I am trying to solve the Random Quote Machine challange by getting a JSON object from the following URL: http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en

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) 
      }
    });
  });

Hi,

You almost have this.

First, your url is slightly out.

instead of

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.

success: function(json){
         $("#quote").text(json.quoteText) 
      }

and then obviously add the author too

  success: function(json){
             $("#quote").text(json.quoteText) 
             $("#author").text(json.quoteAuthor); 
          }

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.

Hope that helps,

Mark

3 Likes

Mark,

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!

no probs,

there’s a link in the reply to a very detailed answer on stack overflow as to what jsonp is,

also on jquery website since we’re using jquery here https://learn.jquery.com/ajax/working-with-jsonp/

2 Likes

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);
    });
  });
});

Codepen will not load HTTP requests unless they has an HTTPS version. Otherwise they’ll be blocked completely.

1 Like