イメージとしてはこういう感じのものが作りたいです。
イメージでは色が変わっていますが、今回は「オン」と「オフ」で文字の切り替えを行いたいです。
下記のコードではイベントが1回のみしか実行されなく
オフ→オンの1回で終わってしまいます。
オフ→オン→オフ→オン→....のようにループさせたいのですが
何処に問題があるのでしょうか。
モデルは下記のとおりです。
value | 0 | 2 |
---|---|---|
テキスト | オフ | オン |
※ロジック的には、オフの場合に初期値でオンのvalueをAjaxで渡して、HTML上の表示は「オフ」とするようにしています。
逆の場合はそのまま逆になります。
HTML5
1<form action="" method="POST" id="watchstatus"> 2 <button type="submit" id="watchstatus_submit" class="btn btn-primary" value="{{statuscode}}">{{watchstatus}}</button> //初期値用 3 {% csrf_token %} 4</form> 5<script src="{% static 'main_app/js/jquery-3.2.1.js' %}" type="text/javascript"></script> 6<script src="{% static 'main_app/js/jquery-ui-1.12.1.js' %}" type="text/javascript"></script> 7<script src="{% static 'main_app/js/modaal.min.js' %}" type="text/javascript"></script> 8<script> 9$('#watchstatus').on('submit', e => { 10 e.preventDefault(); 11 var $this = $(this); 12 var $button = $this.find('button[type="submit"]'); 13 $.ajax({ 14 'url': '{% url "main_app:item_detail" item.id %}', 15 'type': 'POST', 16 'data': { 17 'csrfmiddlewaretoken': '{{csrf_token}}', 18 'status': $('#watchstatus_submit').val(), 19 }, 20 'dataType': 'json' 21 }).done( response => { 22 if (response.status == 2) { 23 document.getElementById("watchstatus_submit").innerHTML='<button type="submit" id="watchstatus_submit" class="btn btn-primary" value="0">オン</button>'; 24 } else { 25 document.getElementById("watchstatus_submit").innerHTML='<button type="submit" id="watchstatus_submit" class="btn btn-primary" value="2">オフ</button>'; 26 }
補足
Djangoでテンプレートを渡してます。
{{statuscode}} //初期値は2です {{watchstatus}} //初期値はオフです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/04 14:50
2019/01/04 19:33
2019/01/05 01:58
2019/01/07 02:37