Edited at

FlaskとjQueryを使ったAjax通信で他のボタンと連動して有効無効を切り替える

More than 1 year has passed since last update.

結論からいうとタグを正確に指定して$(#hoge).prop("disabled", false)のようにajax通信後にすれば良いのだが、$(this)で指定していると.done()の所で上手くいかないので、何かしらの固有のidを付けるなりして指定しやすくしましょうということです。

今回はFlask-MongoEngineというライブラリを使ってページネーションを実装する際のサンプルコードを以下に示します。


https://flask-mongoengine.readthedocs.io/en/latest/



html抜粋

<form method="post">

<button class="btn btn-primary" name="like" id="like-{{data.key}}" value='{{data.key}}'>Like</button>
<button class="btn btn-danger" name="dislike" id="dislike-{{data.key}}" value='{{data.key}}'>Dislike</button>
</form>

{{data.key}}というところはFlask-MongoEngineで作られたオブジェクトで、単純になにかの文字列が入っています。

例えばデータベースに

1. key が hoge1

2. key が hoge2

の2つのレコードがあるとすると、

{% for data in data_page.items %}

<button class="btn btn-danger" name="dislike" id="dislike-{{data.key}}" value="{{data.key}}">Dislike</button>
{% endfor %}

というコードはレンダリングする際に

<button class="btn btn-danger" name="dislike" id="dislike-hoge1" value="hoge1">Dislike</button>

<button class="btn btn-danger" name="dislike" id="dislike-hoge2" value="hoge2">Dislike</button>

というhtmlに書き換えられます。


jQuery

$("[ name = 'like' ]").on('click', function () {

$(this).prop("disabled", true);
$.ajax({
url: "/rating_insert_like",
type: 'POST',
contentType:'application/json',
data: JSON.stringify({"key":$(this).val()}) ,
}).done(function(data){
const dislike_id = "#dislike-"+ data;
$(dislike_id).prop("disabled", false);
});
});

$("[ name = 'dislike' ]").on('click', function () {
event.preventDefault();
$(this).prop("disabled", true);
$.ajax({
url: '/rating_insert_dislike',
type: 'POST',
contentType:'application/json',
data: JSON.stringify({"key":$(this).val()})
}).done(function(data){
$("#like-"+ data).prop("disabled", false);
});
});


flask側

@app.route('/rating_insert_like', methods=["POST"])

def rating_insert_like():
return request.json["key"]

@app.route('/rating_insert_dislike', methods=["POST"])
def rating_insert_dislike():
return request.json["key"]