Quote Generator JSON

1

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?

<script>
  $(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));
      });
    });
  });
</script>
2

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.

1 Like
3

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.

4

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.

1 Like
5

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.