JS for my Random Quote Machine doesn't work on CodePen

Hi, first time posting here on the forums. So I got just about everything completed with my Random Quote Machine, although I didn’t use CodePen during the development process and just wrote everything up in my text editor (Notepad++), testing directly in my browser (Firefox) as I went along. Got it mostly done, and everything works directly in my browser, no issues whatsoever.

However, after I copied all of my HTML, CSS, and JS code over to CodePen, my Get New Quote button stopped working, and I could see that the error handling callback function on both my $.getJSON and $.ajax functions kept getting called.

I set up jQuery and Bootstrap’s JS in my CodePen so I’m really not sure why it’s not working, I don’t suppose anyone could take a look and tell me if I’m missing something obvious? Thanks!

My CodePen is here: https://codepen.io/astv99/pen/VjxAqp

1 Like

@astv99 I believe your getting the error about CORS because you’re connected to Codepen via https but you’re trying to ajax to an non-https URL.

If you remove the “s” from your code pen url and access it from below link it should work
http://codepen.io/astv99/pen/VjxAqp?editors=1010

2 Likes

Thanks for the tips, I think I’ll just use the non-HTTPS version of CodePen for now to get around the issue since that’s the simplest solution, thanks! The CORS issue is certainly aggravating, kept running into that when I first started trying to use the Forismatic API, was probably the most time-sucking part of this project. :wink:

You may like this new API a fellow camper just released that removes some of the headaches associated with CORS.

2 Likes

You saved me from going crazy. I’ve tried several projects on codepen which didn’t work but should have. Changing https to http did the trick!

I try to change the url on my pen to http but chrome just loads it with the ‘s’ anyway. I also clicked that link to the other API thinking I would just use that one instead but the link gives an error.