--- title: flaskでjavascriptの変更が反映されない場合の対処法 tags: Flask Python author: pytry3g slide: false --- flaskを使ってるときに、ちょっと問題が発生したので、その解決方法を書いておきます。 #発生した問題 更新してもjavascriptの変更が反映されなかった。 #おすすめの対処法 [静的ファイルの更新がブラウザのキャッシュで反映されない問題の対策](https://qiita.com/ymko/items/b03499aefcceec10ef8f) #自分がやったこと flaskのdocumentationにある下のコードで遊んでました。 ```python:server.py from flask import Flask, jsonify, render_template, request app = Flask(__name__) @app.route('/_add_numbers') def add_numbers(): a = request.args.get('a', 0, type=int) b = request.args.get('b', 0, type=int) return jsonify(result=a + b) @app.route('/') def index(): return render_template('index.html') if __name__ == "__main__": app.run(host='0.0.0.0', port=80) ``` ```html:templates/index.html Home

jQuery Example

+ = ?

calculate server side ``` ```javascript:static/calculate.js(変更前) $(function() { $('a#calculate').bind('click', function() { $.getJSON($SCRIPT_ROOT + '/_add_numbers', { a: $('input[name="a"]').val(), b: $('input[name="b"]').val() }, function(data) { $("#result").text(data.result); }); return false; }); }); ``` 入力フォームに数値を入力し、その計算結果を表示するサンプルプログラムです。 ![a.PNG](https://qiita-image-store.s3.amazonaws.com/0/157216/12c5b753-fde8-28d3-5766-e3ce25f985f5.png) これで、例えば以下のようにcalculate.jsを書き換えると計算結果のテキストが強調されて表示されるはずですが、表示されませんでした。 ```javascript:static/calculate.js(変更後) $(function() { $('a#calculate').bind('click', function() { $.getJSON($SCRIPT_ROOT + '/_add_numbers', { a: $('input[name="a"]').val(), b: $('input[name="b"]').val() }, function(data) { $("#result").html("" + data.result + ""); }); return false; }); }); ``` 左上にある更新ボタンを押したり、プログラムをいったん終了して再度動かしてみても計算結果が強調されて表示することはありませんでした。 で、調べてたら解決方法を見つけました。 https://stackoverflow.com/questions/41144565/flask-does-not-see-change-in-js-file どうやらブラウザのキャッシュに問題があるようでブラウザを強制的に更新すればjavascriptの変更が反映されます。 ```:解決方法 Windows -> Ctrl + Fn + F5 Mac -> Cmd + Shift + R Linux -> Ctrl + Shift + R ``` ちゃんと表示されました。 ![b.PNG](https://qiita-image-store.s3.amazonaws.com/0/157216/bf18c95e-c1a5-7668-85de-a64280c8c426.png)