Help us understand the problem. What is going on with this article?

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"]


Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away