LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-10

結論からいうとタグを正確に指定して$(#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"]


Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5