Possible caching issue with Random Quote Machine

1

https://rkett.github.io/random-quote-machine/ This is where I am hosting the current version of this project.

As it stands whenever caching is disabled (in this case I’ve done it when chrome dev tools are open) the website behaves as expected. However, when dev tools are closed, and subsequently caching is re-enabled what I’ve seen is that the first quote loads, and using the button will not load a new quote in place.

I am using the quotes on design API.

This is the JS/jQuery code in question.

I guess my question is then, how should I attempt fixing this problem ?

$(window).ready(function() {

    // Window is ready.
    console.log("Window is ready."); // XXX
    randomQuote();
});

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

    // Button is clicked.
    console.log("Button Pressed"); // XXX
    randomQuote();
});



function randomQuote() {
    return (
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[post_per_page]=1", function() {
            // Get response.
        })
        .done(function(response, textStatus) {
            let html         = "";
            let link         = "";
            let name         = "";
            let content      = "";
            let height       = 0;
            let width        = 0;

            name         = "<p id='name'>" + response[0].title + "</p>";
            content      = response[0].content;
            html         = html + content + name;

            console.log(html);

            $(".message").css('opacity', '0');
            $(".message").html(html)
            $(".message").animate({
                opacity: "1"
            }, 1400);

            // On success of request.
            console.log("Successful attempt to obtain a single random quote from quotesondesign API.");
            console.log("Text Status: " + textStatus); // XXX
        })
        .fail(function(response, textStatus, errorThrown) {

            // On fail of request.
            console.log("Failure to obtain a single random quote from quotesondesign API.");
            console.log("Text Status: " + textStatus + " " + "HTTP Error Thrown: " + errorThrown); // XXX
        })
        .always(function(response, textStatus) {

            // On completion of whole request.
            console.log("Completed attempt to obtain a single random quote from quotesondesign API.");
            console.log("Text Status: " + textStatus); // XXX
        })
    );
}
2

Yup, that’s a thing.

You can do something like:

$.ajaxSetup({ cache: false });

You can see it in action in this sample pen I did.

2 Likes
3

Awesome, this worked perfectly thank you for the response :slight_smile: