:star2: 3732 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
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.
<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>
$.getJSON()
.
:cookie: 600 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
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.
<!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>
?
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
callback=
in URL makes it JSONP call but he is opening html file directly in browser so CORS is not working
:warning: daytonpe already gave vinaypuppal points
:cookie: 277 | @homerrowsky |http://www.freecodecamp.com/homerrowsky
map
is index