jQuery loads browser cache to override transitions in the body class

My .load ajax function:

1) Click link

2) The requested page loads with a smooth css transition animation (applying/removing body classes)

3) If the page loads faster than 400ms, it should wait before revealing the page by removing the body class

While this functionality works perfectly in my local development environment, on the live server, the ajax page cache overrides the body class transition and abruptly displays the page without adhering to the timer mentioned in point 3.

I have currently found a solution using $.ajaxSetup({ cache: false }); which appends a unique string to the URL to prevent caching. However, I find this method unattractive.

Are there any alternative workarounds available? I could delay loading each page by 400ms, but that approach is not ideal from a performance standpoint :)

Thank you in advance. Tim

Answer №1

Here is the solution...

To implement the fix, you need to make changes in your .htaccess file:

<filesMatch "\.(html|php|js|css)$">
    FileETag None
    <ifModule mod_headers.c>
        Header unset ETag
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
    </ifModule>
</filesMatch>

This code snippet ensures that Apache does not store the specified basic files.

Relief!

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

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

Manipulate container (div) to reveal and conceal

My jQuery was working fine until I added some more divs to my HTML. I'm now trying to toggle the opening and closing of a discussion container named discussionContainer with a click on the button replyButton. Any assistance would be highly appreciated ...

Can the Flash Configurator be converted to PHP or Javascript?

Considering converting this flash application into either PHP or JavaScript. Take a look at the example: In PHP, the page reloads every time the customer selects a color. With AJAX, it's challenging to pass the selected value to PHP. Are there any ...

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

What adjustments can I make to my jQuery code in order to animate the mobile menu when it is initially clicked?

I have been using the following mobile menu code for some time now and it has been working well. I have implemented a CSS animation so that when the menu button is clicked, it smoothly scrolls into view. However, I have noticed that the animation does not ...

Animating text so it moves to a random spot within a circular div

I hope everyone is doing well. For my assignment, I need to animate an image to a circular div container at a random location. Currently, I have already completed this task. You can view my work here: jsfiddle.net/f4p6b/137 However, the issue I am faci ...

Bootstrap select box gracefully fits within a dynamically adjusting height div

Can someone help me troubleshoot the issue with displaying/overflowing the .drop-down outside of the .item box in this demo? I need to keep the height of the .item as auto but for some reason, I can't enable overflow visible on it. .item{ backg ...

The absence of a label or div element on a JavaScript checkbox change event is causing issues

Currently, I am constructing a webpage utilizing ASP.NET web forms in combination with JavaScript and jQuery. The main objective is to create a functionality for a checkbox that reacts to a change event as follows: when the checkbox is checked, display thr ...

Store identical form information in Laravel by utilizing AJAX for submission and database storage

How can I save the data of multiple forms using AJAX? I am currently able to save data through AJAX with a single form, but when I add the same form using an anchor tag, I want to be able to capture data from both forms. How can I achieve this using AJAX? ...

Display a message indicating no data is available if the specified text is not found within the div

In the code snippet below, there is an input element followed by a div containing multiple child elements: <input type="text" onkeyup="filter()" id="filter_data"> <div id="body"> <div class="child"> Text 1 </div> <div class ...

How can I create the effect of text changing color automatically after a specified time period has elapsed

I am currently dealing with a timer that is functioning properly, but I have a specific CSS inquiry. Essentially, what I would like to achieve is when the timer hits 30 seconds, I want the numbers to change to red color. $(function () { var $startTimer = ...

In what ways does the process of manually extracting data differ from utilizing a GET versus POST request through jquery AJAX?

After creating a website using Python Flask that incorporates a form with two dropdowns and a slider, I am now faced with the challenge of extracting the selected values from these form elements and sending them to a python flask route using jQuery AJAX. T ...

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

Tips for adding data-mage-init to HTML elements

I have inserted the HTML content into a specific div. styleBasedProducts += "<div class='row image-full'><div class='col-md-12 home-title text-center'><div><span class='light'>Style Based</span>& ...

What is the best way to connect a jQuery event to a function within an object?

I've been working on defining an object with properties and methods, but I'm facing some difficulty in attaching a jQuery function to a method. What I aim to achieve is that when I click on the object #myTarget, it changes its HTML text. My curr ...

Boot up 4 collapse feature to conveniently close all other collapsible items at once

Utilizing the Bootstrap 4 Collapse component. My goal is to toggle between collapsible sections like "Categories" and "Brands", displaying only one at a time. The current issue is that multiple collapsible elements are visible simultaneously. .view-cust ...

Unable to modify the appearance of text on the canvas

Trying to customize the font style of canvas text with Press Start 2P The URL has been imported into a CSS file as follows: @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); .canvasClass{ font-family: ...

Tips for aligning flex items based on the previous item in a flex container

Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5) This should be done dynamically to adjust to a varying numb ...

The addClass, removeClass, and css functions in jQuery are malfunctioning

I stumbled upon this website and I am looking to switch the font color from black to white. I attempted various methods but unfortunately, none of them seemed to work: Implementing jQuery's addClass function (to add a class to the SPAN tag) Uti ...

Locate the <li> element within the list that was clicked on by the user using JQuery UI Selectable

I am trying to retrieve the <li> element that the user has clicked on in a jQueryUI selectable. The goal is to determine whether the clicked element is already selected or not and then take action based on that. The following code is what I have so f ...