Hey Everyone,
I’m having issues with my Random Quote Generator. I have successfully received data from the api and have inserted the quote and author into my html when the page loads but when I click the button to get a new quote it just posts the same quote. If I wait 5 or so minutes and then click the button I will receive a new quote. I have been trying to figure this out for days now and have read just about every post I can find but I don’t seem to be getting any closer.
Also, unfortunately I can’t get my JS code to work on codepen… but here’s my code anyway:
I noticed going to your URL gives the same quote everytime as well. Try using their 4.0 api and setting the URL to something like this:
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
or if you need to use a callback since your using JSONP: (see it described here: https://quotesondesign.com/api-v4-0/)
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback
Since it returns an object you can use your callback parameter.content to grab the quote. then you the replace method to strip whatever you don’t want out. (Like for instance I stripped out the <p>/<p> tags since I wanted to use something else.
The Wordpress JSON API goes into more details on the different options you can put in the URL but that should get you started.
what @msmith1114 said, also use https protocol, quotes on design allows this and also avoids cors issues with codepen.
I guess id also suggest just using $.getJSON instead of the full-blown ajax call. its a shorthand equivalent and saves some of the unnecessary options that we can easily screw up.