結論からいうとタグを正確に指定して$(#hoge).prop("disabled", false)
のようにajax通信後にすれば良いのだが、$(this)
で指定していると.done()
の所で上手くいかないので、何かしらの固有のidを付けるなりして指定しやすくしましょうということです。
今回はFlask-MongoEngineというライブラリを使ってページネーションを実装する際のサンプルコードを以下に示します。
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で作られたオブジェクトで、単純になにかの文字列が入っています。
例えばデータベースに
- key が hoge1
- 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"]