Ajax & Random Quote Generator

Ajax & Random Quote Generator
0

#1

Hello all!

I’ve been working on the Random Quote Generator project for about 4 days now and cannot get my $ajax request to work. I initially started with trying to use the Forismatic API but scrapped it after I saw several users that couldn’t get a reasonable work-around on the issues with jsonp and CORS. I’m now trying to implement the QuotesonDesign API but still running into the same issues.

I keep getting an “undefined” response when I try to print the responses to the console to test if my $ajax request is working.

Here’s the code I have so far:

function getQuote() {
  $.ajax({
      url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1' ,
      success: function(data) {
        console.log(data);
      } ,
      cache: false
  });
}

Any help/assistance and feedback would be greatly appreciated!


#2

I copy pasted your code in Codepen. It gives an error: “Unexpected token ILLEGAL” for your quotes you used around the url.

With that fixed (and jQuery imported), I get a quote back from the server.


#3

Hmmm, I haven’t been getting that error from Codepen.

In fact, I don’t get any kind of feedback on the JS code in Codepen but still getting the “undefined” response in the developer console when I run the code, regardless of which quote type I enclose the URL in.

Certainly showing my noob colors here with this project…

Am I just failing to parse the response out?

Is ‘data’ not the correct argument to pass to the function in the ‘success’ parameter?

Just feel like I’m missing some fundamentals that were not covered in the FCC challenges…


#4

@MisterMeeseek Not sure if you still need it but I copy pasted your code as well to a new Pen and added jQuery (in the JS tab of the Settings menu). The console gave me the JSON response from the server as expected. Here is a link to my Pen so you can compare it to yours: https://codepen.io/grelon/pen/gGKmJQ. Hope that helps.

Cheers!


#5

Thank you @grelon Grelon, that’s helping! I’m actually still working on this project without any real progress…I just can’t seem to figure out this AJAX & API thing…

I ran your code in the Google Dev Tools in Codepen.io and your code worked perfectly. But when I run it in my project it returns this:

25 AM

I’m running my project from Google Chrome and have tried referencing the jQuery library from both a locally saved library and from a CDN, same response on both. I’ve also tried changing the URL protocal from HTTPS to HTTP, no change.

I’ve been at a complete loss on this for the past 2 weeks and just need to see what I’m missing here.

Thank you again!


#6

Hmm weird. That error message doesn’t immediately ring a bell and I can’t reproduce it either. Could you share a link to your Pen? Maybe I can find your problem then.


#7

Looks like it was occurring because I was working on the code in Atom and running it through the browser via a local file path. After digging into it, looks like scripts running via file:// have limited support for CORS compared to http://

Moved my code back to Codepen, imported jQuery and it ran perfectly! Thank you again @grelon!

Here’s the Stack Overflow post where I found that information:


#8

Aah that explains it. Good job on figuring it out yourself and sticking with it!