Trouble encountered with CodePen and jQuery

I decided to create a webpage that showcases random quotes sourced from QuotesOnDesign API. However, I encountered an issue with the "New Quote" element not triggering the getQuote function when clicked. To take a look at my code, kindly follow this link:

CodePen Random Quote

The problem seems to be related to jQuery, as indicated by the error message in Chrome console stating that the script (referring to jQuery) failed to load. Interestingly enough, when I click on "New Quote" with Developer Tools open in Chrome, it works perfectly fine!

Answer №1

When you initially call the API, the browser caches the response and uses it for subsequent calls. To solve this issue, add a cachebuster to the URL.

If the code works when you open the console, it's likely because you have enabled the Disable cache (while DevTools is open) option.

function getQuote() {
  var cb = Math.round(new Date().getTime() / 1000);
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + cb, function(a) {
    $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>");
  });
}

Check out the Working CodePen example

Answer №2

To completely eliminate the function call, you can opt for using $.ajax in the following manner:

$(".button").on("click", function(e) {
  e.preventDefault();
  $.ajax({
      url: 'http://randomquotes.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        $(".quote-text").html(data[0].content + "<p>— " + data[0].title + "</p>")
      },
      cache: false
   });
});

By setting cache: false, you ensure that caching is disabled for each individual call, resulting in new content being displayed whenever the button is clicked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a set through an express server cookie for the client to see

New to using Express and encountering issues with sending cookies. Created a basic express app that is supposed to set a cookie in the browser. Here's the server setup: const express = require('express'); const cookieParser = require(' ...

Animate sliding bar to move from the left using jQuery

I am currently experiencing an issue with a sliding animation on mouseover in the navigation. The animation works fine, but the problem arises when I hover over any menu item - the sliding bar starts from the very left instead of starting where the navigat ...

Unable to transfer AJAX data to PHP script

Trying to figure out how to send AJAX data to PHP. While I am comfortable with PHP, JavaScript is a bit new to me. Incorporating HTML / JavaScript <input type="text" id="commodity_code"><button id="button"> = </button> <script id="s ...

Is it possible for a component to have multiple templates that can be switched based on a parameter?

Scenario My task is to develop a component that fetches content from a database and displays it on the page. There needs to be two components working together to create a single page, following a specific component tree structure. DataList - receives ful ...

Steps for creating a bold column in an HTML display

Here is my PowerShell script that generates a nicely formatted HTML table. I am struggling to figure out how to make just one column (Full %) bold within the table. I have attempted inserting bold tags in various places and considered using the replace fu ...

Dealing with net::ERR_CONNECTION_REFUSED in Axios on a Vue.js platform

Here's the code I'm using for my connection request: doLogin(this.login).then(response => { var token = response.data.token; localStorage.setItem('AUTH_TOKEN', JSON.stringify(token)); this.$router.push({name: ...

Is there a way to verify if the input is a numerical value? If it's a string, then display an error

When I press the Send button, I need to verify if the input is a number between 1 and 30. If it is not a number, display an alert as an error message. <form action="index.php" method="post" id="formFlow"> <label for="level">Level:< ...

What is the most effective method for creating a personalized select in Angular?

I am currently working with the MEAN stack (Angular 6) and exploring different methods to build a custom and reusable <select> form control that utilizes an array of strings fetched from the backend server to generate all the <option> tags. For ...

How feasible is it to develop a built-in browser within a webpage utilizing frameworks like React.js or Astro?

Is it possible to create a web application with 4 separate 'tiles', each functioning as its own web browser for accessing different websites? I am unfamiliar with how web browsers work and tried using npm packages like react-embedded-browser with ...

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...

What's the reason behind JavaScript's Every method not functioning properly?

I'm struggling to understand why the array method 'every' is not functioning properly in my project (working on a roguelike dungeon crawler game). Here's an example of the array of objects I am working with: { x: newrm.x, ...

The deployment is currently being carried out

Here is the javascript code snippet I am working with: $scope.fav_details = function(id1,id2,bio) { document.getElementById(id2).style.display="none"; document.getElementById(id1).style.display="block"; $scope.getLegislatorDeta ...

Unable to import CSV file

I'm currently in the process of developing a CSV editor that involves importing a CSV file and converting it into HTML tables. Below is the code I have been working on: <html> <head> <title></title> </head> <body& ...

The dynamic image is having trouble showing up properly

On my basic webpage, I have a dynamic image that refreshes every minute. Here is the simple code I am using: <html> <body> <p><img width=1024 height=768 src="../image/someImage.jpg"></p> </body> </html> Despite t ...

Can JavaScript impact the appearance of the printed version of a website?

Just a quick question - I currently don't have access to a printer. My client is wondering if the hidden elements of the webpage (items that are only visible when clicked on) will be included when printing or if they will remain hidden? ...

What is the best way to retrieve the offsetHeight of a Component Element using Vue.js?

I am currently working on a Vue.js component and successfully inserting it into the DOM. My goal is to find out its rendered height once it's in the DOM, specifically its offsetHeight. However, I seem to be missing something obvious as I can't fi ...

jQuery is behaving unexpectedly with no error messages displayed

I've encountered an issue while working on a jQuery script that involves a form with the following elements: Country dropdown list USA state dropdown list Non-USA state text input box The objective is to have a country dropdown, and based on the se ...

Is there a way to format the text into a curved half-capsule shape?

<div class="bg-primary rounded-pill"> <p class="text-right"> TOTAL AMOUNT </p> <p class="text-right"> 200 </p> </div> I would like the text within a div element to appear in a capsule shape. Is there a way t ...

Passing data from PHP to an AJAX error message

Can a PHP error trigger the return of a timestamp variable to an AJAX request? I am looking to implement a timestamp on the server side and send it back if a PHP error occurs. Best regards / H ...

Run a Node command when the button is clicked

I am developing a web application where I need to run a node command upon clicking a button. Instead of manually executing the node command in the command line, I want it to be triggered by a click on the front end. For example: $( ".button_class" ).on( ...