Javascript Error: Page reload interrupted by Broken Pipe IOError [Errno 32]

I am facing an issue with my javascript function that sends a signal to my flask app for recalculating figures using ajax. Upon successful figure production, I want to reload the page with updated figures by adding a version number to the filename (using '?') to enforce the reload process. Here is a snippet of my code:

$.ajax({
    url: $SCRIPT_ROOT + "/process_figures",
    type: "POST",
    async: true,
    cache: false,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({}, null, '\t'),
    success: function(data){ 
        if(data.error){
            console.log('Error = ', data.error)
        }
        else{
            var images = document.getElementsByClassName('metric_img');
            for(i = 0; i < images.length; i++){
                images[i].src = images[i].src.split("?")[0] + '?version=' + new Date().valueOf();
            }
            window.location.reload();
        }
    }
});

However, this codes leads to an error message like:

127.0.0.1 - - [20/Nov/2017 14:59:39] "GET metrics_indices_1.png?version=1511189978191 HTTP/1.1" 200 -
Error on request:
Traceback (most recent call last):
  File "/usr/local/lib/python2.7/site-packages/werkzeug/serving.py", line 205, 
in run_wsgi
    execute(self.server.app)
  File "/usr/local/lib/python2.7/site-packages/werkzeug/serving.py", line 196, 
in execute
    write(data)
  File "/usr/local/lib/python2.7/site-packages/werkzeug/serving.py", line 164, 
in write
    self.send_header(key, value)
  File "/usr/local/Cellar/python/2.7.13/Frameworks/Python.framework/Versions/2.7/lib/python2.7/BaseHTTPServer.py", line 412, in send_header
self.wfile.write("%s: %s\r\n" % (keyword, value))
IOError: [Errno 32] Broken pipe

Can anyone help me identify what might be causing this error? Also, I would appreciate assistance in reloading only the images using Javascript without having to refresh the entire page.

Answer №1

After making some changes to the javascript code, the updated version now looks like this:

var images = document.getElementsByClassName('metric_img');
for(i = 0; i < images.length; i++){
    var image_src = images[i].getAttribute('src');
    if(image_src){
        image_src = image_src.split('?')[0] + '?version=' + new Date().valueOf();
        images[i].setAttribute('src', image_src);
    }
}

Surprisingly, this modification works perfectly without requiring a page reload. It's much more efficient, although the reason behind it is unclear.

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

The code threw an error stating: "Error: Unable to set a new value to the unalterable property 'children' of the object '#<Object>'"

Encountering internal server error in Next.js build with Docker when reloading all routes with getServerSideProps react: "17.0.2" next: "^11.1.2" Local setup and deployment without Docker works fine, but with Docker implementation, reloading pages leads ...

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

Currently, I am attempting to partially mock a module and customize the return value for the mocked method in specific tests. An error is being thrown by Jest: The error message states: "mockedEDSM.getSystemValue.mockResolvedValue is not a function TypeEr ...

Node Express JS: Efficiently handling multiple fetch responses before sending data to client

My goal is to call an API that only accepts one animal name at a time, but I receive the names of multiple animals in a query separated by commas. To achieve this, I plan to call the API once for each animal, push the JSON data into an array, and then resp ...

Generate numerous div elements by utilizing ng-repeat

I am trying to generate 'n' red blocks with text (where n represents the number of elements in an array), but unfortunately, I am seeing a blank page. <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angu ...

"Enhance readability by adjusting the font size on mobile devices and iPhones for an

I'm currently working on a website that needs to maintain a consistent look across all types of devices, including laptops, PCs, iPads, iPhones, and other smartphones. To achieve this, I've implemented fittext.js, a pure JavaScript solution that ...

Having trouble creating a polygon from JSON in ESRI ArcGIS Javascript framework?

Can anyone assist with understanding the issue of trying to draw a polygon using the ESRI ArcGIS Javascript API? The image, JSON string, and code snippets provided below outline the code, console output, and expected behavior. Any help would be greatly app ...

Having trouble accessing the div element inserted by the Angular application

I've encountered an issue while trying to access a div that is injected into the DOM by an Angular app on the page. Below is the script I have placed at the end of the HTML page: $(document).ready(function () { var targetNode = document.querySelect ...

Continue looping in Javascript until an empty array is identified

Currently, I am in search of a solution to create a loop in Javascript that continues until the array of objects is empty. The object I am working with looks like this: "chain": { "evolves_to": [{ "evolves_to": [{ ...

ways to verify ng-if post modification occurrence

Currently, my project is utilizing Angular 6. In the code, there is a div element with *ng-if="edited" as shown below: <div *ngIf="edited"> {{langText}} </div> Initially, when the page loads, edited is set to false and the div is not vis ...

Troubleshooting the issue of onclick not functioning in JavaScript

My attempt to utilize onclick to trigger a function when the user clicks the button doesn't seem to be successful. For instance: function click(){ console.log('you click it!') } <input type='button' id='submitbutto ...

Experiencing a lack of information in express?

Whenever I attempt to send a POST request (using fetch) with the body containing the state of the application, I receive an empty object on the server side. What am I doing wrong here? I should be receiving the object with the properties name, username, an ...

Show HTML content from different domains within a navigation tab's content area

I am in need of showing content from a different domain on my webpage within a navigation tab. I have followed the example given in the link below: Loading cross domain endpoint with jQuery AJAX This is how my HTML code looks like: <section class=" ...

Issue with adding object to array using forEach() function

As I navigate my way through an express route, I am puzzled as to why the "purchasedCards" array turns out empty after going through these database calls. Despite successfully gathering all the necessary information from various DB Queries and placing it i ...

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

Trouble with executing two asynchronous AJAX calls simultaneously in ASP.NET using jQuery

When developing a web application in asp.net, I encountered an issue with using jQuery Ajax for some pages. The problem arose when making two asynchronous Ajax calls - instead of receiving the results one by one, they both appeared simultaneously after the ...

Customize and adjust the default color for dark themes in Material-UI

When using Material-UI and switching to a dark theme, you may notice that some components change their color to #424242 while others change to #212121. This color inconsistency stems from the use of theme.palette.grey: theme.palette.grey[800]: '#424 ...

When "this" doesn't refer to the current object, how to self reference an object

I am currently working on developing a modular series of element handlers for an application that features pages with different configurations. For example, the 'Hex T' configuration includes elements labeled from 'A' to 'O', ...

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data ...

Setting a Value?

Within the services.js/Cordova file, I am encountering an issue with the following code: .factory('GCs', ['$http', function($http) { var obj= {}; $http.post("mydomina.com?myrequest=getbyid", { "id": "1"} ) ...

Sorting in reverse order within a table

Is there a way to reverse the order in which my function renders table rows with incremental id? (first row with id=n, last with 1) Here is the code snippet I am using: renderRows = () => { const { receipts } = this.props const reversedReceipt ...