Can't seem to get forismatic api working

I cannot seem to find a solution to get the forismatic api working. I’d appreciate any help.

UPDATE: I have ditched forismatic, and switched to quotesondesign, which worked for me. I would still like to know how I could have made forismatic work though.

Here is my code:

$(“getQuoteButton”).on(“click”, function() {
getQuote();
});

function getQuote() {

$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?",
function(response) {

  $("#quoteDisplay").html(response.quoteText);

  $("#authorDisplay").html(response.quoteAuthor);
})

};

$(document).ready(function() {
getQuote();
});

When you open you console in the browser by pressing F12 you will see a warning. This is because codepen is using https and the quote api is using http.

I don’t know how to fix this error…
Maybe you have to use a other api that uses https

I have found another codepen using a similar $.getJSON method, but is working fine.

I checked its settings, and discovered this link

https://code.jquery.com/jquery-2.2.4.min.js

in its settings > javascript, but I can’t get it to work if I apply the same settings.

I have also tried the ajax method with CORS but is also unsuccessful.

I am still looking for a solution, and is also trying to figure out how other campers have succeeded. I will post an update if I manage to figure it out. Maybe it is an issue with codepen.

Nevertheless, thanks for your feedback!

UPDATE

I have ditched forismatic for now and used quotesondesign instead. Will still love to explore how I could have made forismatic work though.

The answer is Mixed Content.

When you go to http://codepen.io/roessland/pen/bedjGB everythink works.
But when you go to https://codepen.io/roessland/pen/bedjGB and you will open the console with F12 you will see a warning, because codepen is now using https but the api is using http

Ah, I didn’t notice that!

Was codepen using http not long before? I have seen threads in the forum whereby they have managed to get the forismatic api working before, but now when I visit their codepens some of them aren’t working any more.

Now the real question: is this an issue faced by developers in the real world? Or is it merely a limitation of codepen that we are facing as we are learning to code?

I mean, I could get by it now as a project since I do not HAVE TO use forismatic. Will I (if I manage to become a developer in the future) face similar issues then? I’d love to find out how I can fix this, or at least where I should be looking for ways to fix this.

At this point I feel I have too much I do not understand, but I don’t know what I don’t know. Hopefully as I progress through the syllabus and projects I’d be guided to the right direction.

Thanks for the help!