質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.71%

Ajaxで送信をしたときボタン(テキスト)の表示をオンオフで切り替えたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 467

am120sec

score 10

イメージとしてはこういう感じのものが作りたいです。

イメージ説明

イメージでは色が変わっていますが、今回は「オン」と「オフ」で文字の切り替えを行いたいです。

下記のコードではイベントが1回のみしか実行されなく
オフ→オンの1回で終わってしまいます。
オフ→オン→オフ→オン→....のようにループさせたいのですが
何処に問題があるのでしょうか。

モデルは下記のとおりです。

value 0 2
テキスト オフ オン

※ロジック的には、オフの場合に初期値でオンのvalueをAjaxで渡して、HTML上の表示は「オフ」とするようにしています。
逆の場合はそのまま逆になります。

<form action="" method="POST" id="watchstatus">
  <button type="submit" id="watchstatus_submit" class="btn btn-primary" value="{{statuscode}}">{{watchstatus}}</button> //初期値用
  {% csrf_token %}
</form>
<script src="{% static 'main_app/js/jquery-3.2.1.js' %}" type="text/javascript"></script>
<script src="{% static 'main_app/js/jquery-ui-1.12.1.js' %}" type="text/javascript"></script>
<script src="{% static 'main_app/js/modaal.min.js' %}" type="text/javascript"></script>
<script>
$('#watchstatus').on('submit', e => {
    e.preventDefault();
    var $this = $(this);
    var $button = $this.find('button[type="submit"]');
    $.ajax({
        'url': '{% url "main_app:item_detail" item.id %}',
        'type': 'POST',
        'data': {
          'csrfmiddlewaretoken': '{{csrf_token}}',
          'status': $('#watchstatus_submit').val(),
        },
        'dataType': 'json'
    }).done( response => {
      if (response.status == 2) {
        document.getElementById("watchstatus_submit").innerHTML='<button type="submit" id="watchstatus_submit" class="btn btn-primary" value="0">オン</button>';
      } else {
        document.getElementById("watchstatus_submit").innerHTML='<button type="submit" id="watchstatus_submit" class="btn btn-primary" value="2">オフ</button>';
      }

補足
Djangoでテンプレートを渡してます。

{{statuscode}} //初期値は2です
{{watchstatus}} //初期値はオフです
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

こうかな。

      if (response.status == 2) {
        document.getElementById("watchstatus_submit").value=0
        document.getElementById("watchstatus_submit").innerHTML='オン';
      } else {
        document.getElementById("watchstatus_submit").value=2
        document.getElementById("watchstatus_submit").innerHTML='オフ';
      }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/04 23:50

    こんな短時間で・・・
    有難うございます!!!

    キャンセル

  • 2019/01/05 04:33

    ちなみにその後は通るようになったのですが
    ページを更新した際、「フォーム再送信の確認」がGoogleChorome上で表示されるようになりました。
    恐らくJSで初期値を変えているせいかと思うのですが、「フォーム再送信の確認」を表示させないようにする方法はあるでしょうか。

    キャンセル

  • 2019/01/05 10:58

    button を type="submit" でなく type="button"にして、
    <button type="button" id="watchstatus_submit" class="btn btn-primary" value="{{statuscode}}">{{watchstatus}}</button>

    $('#watchstatus').on('submit', e => {/*略*/}) をclickイベントとかに置き換えてみてはいかがでしょう。

    キャンセル

  • 2019/01/07 11:37

    ご回答ありがとうございます。
    clickにしたら表示されなくなりました!
    お世話になりました。本当に感謝です。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.71%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる