Random Quote Gen: Quotes work, buttons don't

Well now, this is a fine pickle jar I’ve gotten myself into. This pen here shows my progress on the random quote generator so far. Now, it seems like I’ve nailed down the quote generation part–I keep seeing different quotes when reloading the page or loading it on different devices.

However, neither my tweet button nor my new quote button respond at all to my clicks! I’ve done some reading on it, and I was pretty sure that .on(‘click’) was the way to go based on the discussions I saw on StackOverflow and such, but I can’t seem to get it working.

EDIT: @paulotokimatu in the chat indicated that the New Quote button was actually doing something, but it kept loading the same quote, hence the appearance of doing nothing. That’s baffling to me, because when I reload the actual url I’m referencing in my browser, it keeps producing different quotes every time. My twitter button, meanwhile, is still not functioning at all.

Curiouser and curiouser.

I tried replacing .getJSON with .ajax.

$.ajax({
  url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10",
  cache: false, // This is what makes it work as intended. It seems the browser caches the first JSON it gets, and reuses that for the next requests.
  success: function(data) {
    // ...
  }
});

Kev, thanks for pointing out the caching issue. I went and did a little digging on that and saw that you can also inject a timestamp into the .getJSON request as a parameter. I’ve gone ahead and implemented that in my pen and now the button works. What do you think of that versus using the .ajax syntax?

EDIT: I also managed to get my tweet function up and running. Huzzah!

1 Like

I don’t know about the timestamp (I’m guessing it’s part of the API you’re using), but if it works, then great! It’s a tad less complex than using .ajax.

And huzzah for the tweet function!

1 Like

By including timestamp in the url, you’ve just hacked the behavior you want. Since there’s a specific option that explicitly prevents caching, using hack to get the same functionality is not a good idea.

Hacks are not a good idea because:

  • they hurt readability
  • they can stop working in the future (because api may change)