Quote Generator JSON

Quote Generator JSON


In Codepen.io I can’t run the script of the exercices about JSON and AJAX like below. In Codepen Settings I added JQuery and JQuery-UI bat when I click in button nothing happens. May someone help me?

  $(document).ready(function() {
		$("#getMessage").on("click", function() {
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {       		$(".message").html(JSON.stringify(json));


You need backticks ``````` ```` for code formatting.

Do you have a codepen link?

EDIT: Never mind, I found it (I guess). It doesn’t work, because you put the JS in the HTML section. I suppose jQuery is loaded after the HTML, so you can’t use jQuery in the HTML section.


Tks BenGitter. I modified my solution. Put in JS section. I changed the source of JSON quotes.
But doesn’t work.
The link for codepen is https://codepen.io/phomero/pen/oYPyaZ
I’ll appreciate if you could help me.


It doesn’t work, because you use https in the CodePen url and http for the api. Most browser don’t allow you to load insecure (http) content on a secure (https) page. Since the forismatic api doesn’t allow https, you should acces (and link from wherever you want to share this page) the pen like this: http://codepen.io/phomero/pen/oYPyaZ

Quick tip: place the JSON request in a function and call that function: 1. when the page is loaded, 2. when the button is clicked. This way you don’t write the same code twice.


Now the things happen. http and https. I’ll never wonder where the problem was. Tks!
I tried with
I put the JSON request in one function. It’s smart. To write once and use several times.
I searched and included the tweet user story.