Random quote generator with $.getJSON()

1

Has anyone managed to get the random quote generator working with the getJSON method? Every API have tried has the same issue*. So I’m giving up and going to try with ajax method.

I have built everything apart from pulling the quotes in, including fallback quotes.

*Issue seems to be calling http (JSON) into https (codepen). Not sure if this is a Chrome only issue.

2

Have you tried with quotesondesign.com?

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});

I tried this api endpoint and it works fine. Go for it mate :smiley:

1 Like
3

Thanks for your help but I get the same problem:

Mixed Content: The page at ‘https://codepen.io/drgs100/pen/wJZxEa/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=’. This request has been blocked; the content must be served over HTTPS.

Options are work out what the problem is or try different method. Think I will try the latter.

4

Try this:

https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=

If you use https it should world.

1 Like
5

I was about to say yes, then went and looked at my site again and it doesn’t work anymore… It looks like the Quotes on Design API is having the same cross origin problem. I got around it by adding https://cors-everywhere.herokuapp.com/ to the beginning of the API endpoint.

2 Likes
6

Brilliant, could not find a generator that worked over https so that’s fantastic. Cheers!

1 Like
7

That’s also a good solution, now Quotes on Design work over https aswell tho’

1 Like
8

Seems like the problem is a security issue with recent Chrome update. More details here.

9

Here is my finished quote generator.

Well sort of. I was trying to add a fall back if the API failed. Most of it is in place apart from to check if the request failed but it is enough for now. Thanks for your help.

10

And I forgot about twitter…

11

hi i am getting below error using the https link:

s.codepen.io/boomerang/iFrameKey-1ebadbd9-9a78-423e-3ac7-be9e7e9d44c3/index.html#:1 XMLHttpRequest cannot load https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.