My program is supposed to work like that: user fills the form and presses button, JS script reads the form into array and sends it to server with ajax, python server generates a picture with info from form, when done, JS uploades the picture.

The problem is the script works only once, unless I refresh the page (then again it works only once). It works as intended only with google-chrome developers tools opened. What could possibly be the reason for that?

js function:

function readSendLayers(ev) {
    (ev||event).preventDefault();
    var arr_layers = ['100', '50', '100'];
    var str_arr_layers = JSON.stringify({arr_layers: arr_layers});
    $.ajax({
        type: 'POST',
        url:'/layersPic',
        cache: false,
        data: JSON.stringify(str_arr_layers),
        contentType: "application/json; charset=utf-8",
        error: function() {
            alert('Unexpected error');
        }
    }).done(function() {
        //change arch__pic with generated picture
        $("#arch__pic").attr("src", "../static/layer_pictures/0.png");
    });
};

python:

from drawTree import *
from flask import Flask, render_template, request
import json

app = Flask(__name__,template_folder='template')

@app.route('/')
@app.route('/index.html')
def index():
    return render_template('index.html')

@app.route('/layersPic', methods=['POST'])
def layersPic():
    if request.method == 'POST':
        output = request.get_json()
        result = json.loads(output)
        drawTree(result['arr_layers'])
        return ("",204)

if __name__ == "__main__":
    app.run(debug=False)

UPDATE: I added unique data to the picture's src and this seem to do the trick.

$("#arch__pic").attr("src", "../static/layer_pictures/0.png"+ '?' + (new Date()).getTime());