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

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

#1

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

#2

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

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!


#4

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/


#5

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

#6

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

With respect to your question, are you seeing any errors in the browser’s console (Ctrl+Shft+J in Chrome)? Also, can you share your Codepen url, so we can view all the code (html and js)?


#7

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