Problems Arise Due to HTA File Cache

My JavaScript function fetches the value of a label element first, which serves as an ID for a database entry. These IDs are then sent to an ASP page to retrieve the save location of images from the database.

The save location information for each selected image is then passed to an ASP.NET page, where the images are rotated accordingly. Everything works perfectly, except for the fact that the images do not update until I reopen the HTA file.

This is the JavaScript code responsible for image rotation:

function doRotate(dir,obj)
{
    var http = getHTTPObject();
    var http2 = getHTTPObject();
    ids = fetchSelection().toString();

    //Animate button to indicate it's working
    obj.src = "http://localhost/nightclub_photography/images/buttons/"+dir+"_animated.gif";

    http.onreadystatechange = function() 
    {
        //Fetch the save location of selected images
        if (http.readyState == 4 && http.status == 200) {
            //Create URL string to send to rotate script
            var locs = http.responseText;
            locs = locs.split(",");

            //Start of URL 
            var url = "http://localhost/nightclub_photography/net/rotate_script.aspx?dir=" + dir;

            for (var i=0; i < locs.length-1; i++)
            {
                url = url + "&t=" + locs[i];
            }
            //Add random math
            url = url + "&k=" + Math.random();

            http2.onreadystatechange = function() 
            {                   
                if (http2.readyState == 4 && http2.status == 200)
                {

                    //Stop animated button
                    obj.src = "http://localhost/nightclub_photography/images/buttons/"+dir+".png";

                    //Split id's
                    var idsSplit = ids.split(",");
                    for (var k=0; k < idsSplit.length; k++) {
                        reapplyStyle(idsSplit[k]);
                    }
                }
            }
            http2.open("GET", url);
            http2.send();
        }
    }
    http.open("GET", "http://localhost/nightclub_photography/asp/returnDatabaseData.asp?ids="+ids+"&k=" + Math.random());
    http.send();
}

I also have a function that should reapply the background image, which would reload the rotated images. However, reloading the page doesn't work, and hence I cannot see that function in action either. Here is the function:

function reapplyStyle(id) {
    var background = doc(id+"_label").style.backgroundImage;
    doc(id+"_label").style.backgroundImage = background;
}

Answer №1

When dealing with caching issues, one solution could be to generate a unique URL for the image. Consider implementing the following method:

var timestamp = new Date().getTime();
image.src = "http://localhost/nightclub_photography/images/buttons/"+directory+".png?timestamp=" + timestamp;

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

Do we really need to use redux reducer cases?

Is it really necessary to have reducers in every case, or can actions and effects (ngrx) handle everything instead? For instance, I only have a load and load-success action in my code. I use the 'load' action just for displaying a loading spinne ...

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

What is the equivalent of $.fn in AngularJS when using angular.element()?

Currently, I am conducting a directive unit test using jasmine. The test is now functional, but I need to find an alternative for $.fn in angularjs since the use of $ is prohibited in my workplace. Code: (function scrollTopEventDirective(application) ...

React - Uncaught Error: e.preventDefault is not a function due to Type Error

Encountering an issue with Axios post and react-hook-form: Unhandled Rejection (TypeError): e.preventDefault is not a function The error arises after adding onSubmit={handleSubmit(handleSubmitAxios)} to my <form>. Seeking to utilize react-hook-form ...

Passing variables to each view in Node.js using Express

Currently working on coding a web-based game and looking to share variables across all views. Each user has their own unique race with various variables, such as commodities (money, energy, etc.) and planets (owned, built, etc). The goal is to display th ...

Error: The function expressValidator is not recognized in the current environment. This issue is occurring in a project utilizing

I am currently working on building a validation form with Express and node. As a beginner in this field, I encountered an error in my console that says: ReferenceError: expressValidator is not defined index.js code var express = require('express& ...

Tips for transforming a date into a time ago representation

Can someone help me with converting a date field into a "timeago" format using jquery.timeago.js? $("time.timeago").timeago(); var userSpan = document.createElement("span"); userSpan.setAttribute("class", "text-muted"); userSpan.appendChild(document.crea ...

Verify the dimensions of the file being uploaded

I have a file uploader component that requires a dimensions validator to be added. Below is the code for the validator: export const filesDimensionValidator = (maxWidth: number, maxHeight: number): ValidatorFn => (control: AbstractControl): Vali ...

Needing to utilize the provide() function individually for every service in RC4

In Beta, my bootstrapping code was running smoothly as shown below: bootstrap(App, [ provide(Http, { useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: HelperService, authProvider: AuthProvider) => new CustomHt ...

Unable to return true within an ajax call

Currently, I am working on implementing form validation which involves checking if the email address exists to return either true or false. However, the issue I am facing is that it does not return true, hence preventing me from validating other fields aut ...

Create an HTTP-only cookie from the resolver function in Apollo GraphQL

My objective is to pass the 'res' from my context into a resolver in order to utilize 'context.res.cookie' within my signin function and send an http only cookie. Although my sign-in function works fine, I am unable to see the cookie ad ...

What sets apart an object within the scalajs scope from the exact same object within the js.global scope?

Attempting to create a basic example for rendering a cube using the THREEJS library. package three import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.Dynamic._ import scala.scalajs.js.annotation.JSName ... object ThreeExample { d ...

Node Pagination and Filtering feature malfunctioning

I am currently working on incorporating Pagination and Filtering in the backend functionality. This controller receives input such as Page number and Filtering conditions. Controller:- const getPosts = asyncHandler(async (req, res) => { const { ...

Implementing fancybox with an ajax call in jQuery/JS

Currently, to create a fancybox you set up a link and define some parameters: $("a#a_sendMail").fancybox({ 'titleShow' : false, 'width': 400, 'height': 120, 'autoDimensions': false, 'overlayOpacity&ap ...

Generate an array of checked inputs to be used when posting to a REST API

I have been using .push() to create a checked array of "List" inputs for posting to a REST API. However, it doesn't seem to be working correctly. When unchecking an item, it is not automatically removed from the array. Does anyone have a better solut ...

Error encountered: syntax error, unexpected token while executing a basic AJAX request

Hello, I am new to AJAX and javascript, so please be patient with me. I am trying to pass a variable (document.getElementById('txtSearch').value) from my AJAX to PHP. Here is the code I attempted: $("#btnSearch").click(function() { ...

Retrieve information using server-side rendering

I'm faced with a situation where my page utilizes query parameters to fetch data via SSR. The challenge arises when these query parameters frequently change, triggering a re-fetch of the data using SSR despite there being no client-side data fetching ...

Exploring the inner workings of AngularJS SEO in HTML5 mode: Seeking a deeper understanding of this hidden functionality

There are plenty of resources available for incorporating SEO-friendly AngularJS applications, but despite going through them multiple times, I still have some confusion, especially regarding the difference between hashbang and HTML5 mode: In hashbang (# ...

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

What's the best way to ensure that only the most recent 100 entries are retained in a CSV file

Currently, I am working on an application that requires me to extract timestamp-based parameter values from various devices. The data is highly structured and because I have to retrieve 100k rows every few minutes, I haven't explored the option of usi ...