Random Quote Machine. No text appearing

1

$(document).ready(function () {
$(’#getQuote’).click(function (){
$.ajax({
url: ‘https://talaikis.com/api/quotes/random/’,
dataType: “json”,
success: function(response){
$(’#newQuote’).html(JSON.stringify(response));
}
});
});

});
Where am I going wrong. I would think that when I click the button with id of getQuote that it would send an Ajax call and once the server responds, the callback function would change the text in the paragraph with id of newQuote into the text from the response. Yet, no changes are occurring.

2

Can you post it in codepen.

3

https://codepen.io/wkwon/pen/PjdgvX

4

Some debugging tips…

Right-click on your output page (i.e. the browser) and select Inspect > then click Console.

Right there, you’ll see you have an error message.

XMLHttpRequest cannot load https://talaikis.com/api/quotes/random/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

One way to deal with this is to append https://cors-anywhere.herokuapp.com/ in front of the URL you’re trying to call.
i.e.

$.ajax({
      url: 'https://cors-anywhere.herokuapp.com/https://talaikis.com/api/quotes/random/',

Once you do that, your Get New Quote button will now work as expected.

{"quote":"The worst thing that can happen to a man is to lose his money, the next worst his health, the next worst his reputation.","author":"Samuel Butler","cat":"health"}

The output needs to be formatted though, but that’s on you. :slight_smile:

5

That was a huge help, I didn’t know about inspecting the console for some reason, but now I can google errors like that whenever I run across them. Thanks.