:star2: 3732 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@mikail1998 If you want to debug why your loop/code is not working you can place some
debugger statements, setup some breakpoints and step through your code line by line and find whats missing . If you dont know how to debug code in chrome search in google you will find many videos and articles.
Hi everyone. Working on the random quote machine. I've got it to where when I hit the button, the correct query of the https://quotesondesign.com/api-v4-0/ API pops up where the quote should. I need to figure out how to get the actual quote from that query string
i dont see any errors or anything
<script>
$(document).ready(function() {
var html = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
$("#getMessage").on("click", function(){
// Only change code below this line.
// $(".message").html("Here is the message");// Only change code above this line.
$(".message").html(html);
});
});
</script>
@daytonpe are you working locally or on codepen ?? And you need to make AJAX call with that URL , you can find an example here https://quotesondesign.com/api-v4-0/ about how to use
$.getJSON().
:cookie: 600 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@daytonpe If you working on codepen move your JavaScript (without
script tags)to JS Panel of your codepen . And if your new to codepen read this article to learn how to codepen https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
:cookie: 601 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@daytonpe sorry i did not understand your above question
but you need to make a call to API to get quotes like
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(response) {
console.log(response);
});After executing above line you will see a response in chrome/browser console.
function(response) {
console.log(response);
}The above part is called callback we are telling $.getJSON to call this callback function after it receives a response from API as AJAX calls are Asynchronous i.e may take a while to complete
:warning: daytonpe already gave vinaypuppal points
@daytonpe more precisely like this
$("#getMessage").on("click", function(){
// Only change code below this line.
// $(".message").html("Here is the message");// Only change code above this line.
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(response) {
console.log(response);
$(".message").html(response[0].content);
});
});response is an Array so you can access your quote like response[0].content you will get idea how to access required data from response once you see the console.log of response
and if you want to learn more about AJAX follow this course https://www.udacity.com/course/intro-to-ajax--ud110
@vinaypuppal When i put this in, I get: XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
Googled it and it got pretty complicated very quickly.
@daytonpe don't know how your opening your html file in browser but it works here http://jsbin.com/jipaqu/1/edit?html,js,console,output
@vinaypuppal I'm opening it in chrome. The files are hosted locally on my computer.
<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(response) {
console.log(response);
$(".message").html(response[0].content);
});
});
});
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Random Quote Generator</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</body>
</html>
thanks again for helping me out
@daytonpe okay i found it you need to add
? after callback= in AJAX URL and need to run a local server since CORS does not work over normal file opening in browser as i read in this. http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin
@homerrowsky yeah the
callback= in URL makes it JSONP call but he is opening html file directly in browser so CORS is not working
@homerrowsky he needs to run a localserver then it will work
:warning: daytonpe already gave vinaypuppal points
:cookie: 277 | @homerrowsky |http://www.freecodecamp.com/homerrowsky
@eemebarbe second argument to
map is index
@vinaypuppal I added that ? and now i'm getting: Refused to execute script from 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_p…_page]=1&callback=jQuery18305606229390975579_1475867186116&_=1475867189607' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.