Random Quote Machine - Still Can't Make Ajax Work After A Week

1

Trying to get some help on this again…

I’ve been watching a heap of Youtube videos and tons of articles on Ajax (how to debug, how to make it work, etc.) and haven’t made any tangible progress whatsoever. Feeling discouraged and stupid since this is only the intermediate stuff and I haven’t been able to complete this project after working on it for 2+ weeks.

Can someone please, please help me out with this? I honestly think I just need that one piece of personal insight to make it click.

Here’s my HTML:

<head>

  <script src = "file:///Users/Joel/Desktop/Coding/Libraries/jquery-3.2.1.js" async></script>
  <script src = "file:///Users/Joel/Desktop/Coding/Projects/RQM/RQM.js" async></script>
  <link rel="stylesheet" href="file:///Users/Joel/Desktop/Coding/Projects/RQM/RQM.css"></link>

</head>

<div class = "quote-box">

  <div class = "quote-body">
    <i class = "fa fa-book" aria-hidden="true"></i>

    <span id = "quote"></span>

    <div class = "quote-source">

      <span id = "author"></span>

      <div class = "button-box">

        <button type = "button" id = "new-quote"> New Quote </button>

        <div class = "tweet-button">
          <i class = "fa fa-twitter"> </i>
        </div>

      </div>

    </div>

  </div>

</div>

<div class = "footer">

</div>

And here’s my Javascript using jQuery

$('#new-quote').on('click', function getQuote( {

    $.ajax({
        type: 'GET' ,
        dataType: 'json' ,
        url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1' ,
        success: function(data) {
          var post = data.shift();
          $('#quote').html(post.content);
          $('#author').text(post.title);
        } ,
        cache: false
    });
});

Currently I’m getting an “Unexpected token” error when checking the Console in Google Dev Tools on the “.” in the “$.ajax({});” call. But, this is only one of many errors I’ve run into.

I’ve read the Quotes on Design API “doc” multiple times and even used the exact same code format that’s shown in their docs and still can’t get it…

https://quotesondesign.com/api-v4-0/

What the heck am I messing up here?

2

You have a syntax error in your JavaScript’s first line.

// missing closing parenthesis over here      v
$('#new-quote').on('click', function getQuote( {

You might want to change the http to https in the URL, or you’ll most likely get this error: Blocked loading mixed active content and you’ll see nothing on your page when you hit the button.

1 Like
3

Welp, there ya go. Thanks @kevcomedia, can never underestimate the value of a fresh set of eyes!