テキストエリアの内容を保持
解決したいこと
Paiza CloudでFLASKの練習をしています。
インターネット上で公開されているgarlic.jsというファイルを読み込みhtmlで作成したテキストエリア内のデータを保持したいと思っているのですがどうもうまくいきません。
解決方法を教えていただきたいです。
参照したサイト
https://www.telln.com/lesson/2021/05/28/%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E5%85%A5%E5%8A%9B%E5%86%85%E5%AE%B9%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%80%8Cgarlic-js%E3%80%8D%E3%81%AF%E4%BE%BF/
（フォームの入力内容を保持してくれるgarlic.jsについて）
https://www.sejuku.net/blog/65045
（jqueryのCDNを読み込む方法）
https://note.com/junyaaa/n/ncbec90fe8cad
（jsファイルの読み込み方法について）
ファイル構造
/home/ubuntu
│
└─myapp
│
└─cal.py
│
└─static
│ └─js
│ └─garlic.js
│ │
│ └─main.js
│
└─templates
└─cal.html
cal.py
from flask import Flask, render_template
import os
import calendar
import pandas as pd
app = Flask(__name__)
@app.route("/")
def hello_world():
return render_template("cal.html")
cal.html
<!DOCTYPE html>
<html lang=”ja”>
<meta charset=utf-8>
<body>
<script src= "https://code.jquery.com/jquery-3.7.0.min.js" ></script>
<script type="text/javascript" src="./static/js/garlic.js" ></script>
<script type="text/javascript" src="./static/js/main.js" ></script>
<script>
$(function(){
$(“form”).garlic();
});
</script>
<h3>適当なフォーム</h3>
<form data-persist=”garlic” method=”post”>
<p> <input type=”text” name=”a”> </p>
<p> <textarea rows=5 cols=50 name=”b”></textarea> </p>
<p> <input type=”submit” value=”テスト”> </p>
</form>
</body>
</html>
main.js
alert("This Page is Index.html");
garlic.js
garlic.jsはダウンロードしたものの中身をコピペしました。
実行結果について
本来であれば参照したサイトのように、テキストエリア内に何か入力した後画面左上の更新ボタンを押しても入力内容は失われないはずなのですが、そうなりません。
jsファイルの読み込みに失敗しているのかなと思い試しにmain.jsを読み込んでみたところちゃんとアラートが表示されたのでgarlic.jsの読み込みには問題ないと思います。
またjqueryもCDNで指定しているのでこちらも問題ないと思うのですがだとすると何が原因なのでしょうか。
