前提・実現したいこと
Djangoのテンプレートでmodelのデータ一覧を表示し、チェックボックスで選択したデータを削除するページ(index.html)を作成しています。
削除前の確認ダイアログを当初tkinterで簡易表示していましたが、Materializeのモーダルに変更することになりました。
-
チェックボックスの値をPOSTで受け取り、削除対象データ一覧を表示するページ(answer.html)を更新
-
「削除する」ボタンクリックで、モーダルタグの内部にanswer.htmlをAjaxで読み込み、モーダルウィンドウで削除確認画面を表示
上記のような動作にしたかったのですが、試したところボタンクリック1回ではanswer.htmlが読み込まれただけで、モーダルは非表示のままでした。同じボタンをもう1回クリックしないとモーダルが表示されません。
2回クリックしなければならない以外は一応希望の動作ではありますが、クリックの問題がなかなか解消できません。
ワンクリックでAjaxとモーダル両方を起動する方法がありましたら、ご教示いただけないでしょうか。
よろしくお願いいたします。
発生している問題・エラーメッセージ
クリック1回ではAjaxが読み込まれるだけでモーダルが表示されず、同じボタンをもう1回クリックしなければならない。
該当のソースコード
HTML
1templates/index.html 2 3<html> 4<head> 5<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 6</head> 7<body> 8 <form id="fm_del_ids" name="fm_del_ids" action="answer" method="POST"> 9 {% csrf_token %} 10 11 <table> 12 {% for item in log %} 13 <tr> 14 <td> 15 <label> 16 <input type="checkbox" class="filled-in" name="del_ids" value="{{item.id}}" /> 17 <span></span> 18 </label> 19 </td> 20 <td>{{item.id}}</td> 21 <td>{{item.name}}</td> 22 <td>{{item.group}}</td> 23 </tr> 24 {% endfor %} 25 </table> 26 27 <!-- Modal Trigger --> 28 <button id="btn_del" data-target="modal1" class="btn modal-trigger" type="submit"> 29 チェックしたデータを削除する 30 </button> 31 </form> 32 33 <span id="div_response"></span> 34 35<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 36<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 37 38<script> 39$("#fm_del_ids").submit(function(event) { 40 event.preventDefault(); 41 var form = $(this); 42 $.ajax({ 43 url: form.prop("action"), 44 method: form.prop("method"), 45 data: form.serialize(), 46 timeout: 10000, 47 dataType: "html", 48 }) 49 .done(function(data) { 50 $("#div_response").html(data); 51 }) 52 }); 53</script> 54 55</body> 56</html>
HTML
1templates/answer.html 2 3 <!-- Modal Structure --> 4 <div id="modal1" class="modal"> 5 <div class="modal-content"> 6 <form method="POST" name="del_comp" action="{% url 'index' %}"> 7 {% csrf_token %} 8 <input type="hidden" name="del_key" value="{{res}}"> 9 10 <p>以下のデータを本当に削除しますか?</p> 11 <table> 12 {% for item in del_log %} 13 <tr> 14 <td>{{item.id}}</td> 15 <td>{{item.name}}</td> 16 <td>{{item.group}}</td> 17 </tr> 18 {% endfor %} 19 </table> 20 <button type="submit">本当に削除する</button> 21 </form> 22 </div> 23 <div class="modal-footer"> 24 <a href="" class="modal-close waves-effect waves-green btn">閉じる</a> 25 </div> 26 </div> 27 28<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 29<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 30 31<script> 32$(document).ready(function(){ 33 $('.modal').modal(); 34}); 35</script>
Django
1view.py 2 3from django.shortcuts import render 4from .models import test_log 5 6def index(request): 7 log = test_log.objects.all() 8 9 if request.POST == "POST": 10 del_list = request.POST['del_key'].split(',') 11 del_obj = test_log.objects.filter(id__in=del_list) 12 del_obj.delete() 13 14 params={ 15 "log":log, 16 } 17 return render(request, "index.html",params) 18 19def answer(request): 20 select_ids = request.POST.getlist("del_ids") 21 del_log = test_log.objects.filter(id__in=select_ids) 22 res = ",".join(select_ids) 23 24 params={ 25 "del_log":del_log, 26 "res":res, 27 } 28 return render(request, "answer.html",params) 29 30
Django
1models.py 2 3from django.db import models 4 5class test_log(models.Model): 6 name = models.CharField(max_length=100) 7 group= models.CharField(max_length=100)
Django
1urls.py 2 3from django.urls import path 4from . import views 5 6urlpatterns = [ 7 path('', views.index, name='index'), 8 path("answer", views.answer), 9]
試したこと
内部からクリックイベントかモーダルイベントを起こせないかと思い、Ajaxのところ(doneの最後)で以下を試しましたが、事象は変わりませんでした。
jQuery
1$("#btn_del").click(); 2$("#btn_del").trigger("click"); 3 4$("#modal1").modal("open");
補足情報(FW/ツールのバージョンなど)
Python 3.7.3
Django 2.2.1
jQuery CDNJS 3.4.1
Materialize 1.0.0
動作確認
Chrome 75
Windows10
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/03 15:48
2019/07/03 20:13