質問編集履歴

3 viewの追加

shunxile

shunxile score 7

2021/06/10 19:28  投稿

削除実行時の確認ダイアログを自作 削除実行時のコードが分からない
### 前提・実現したいこと
登録されたデータを削除する際に最初confirmメソッドを用いて実装していました。
confirmの場合確認時『OK』と『キャンセル』だったので
『はい』・『いいえ』に変更したいと思い調べたところ
関数を自作するしかないと分かり進めていきました。
・削除ボタンを押すと確認のダイアログが出現する
・『いいえ』を押すとダイアログが消える(ダイアログが消えているだけなので機能としては違うのかも)
・『はい』を押すと該当データが削除され一覧のページへ
という流れを考えています。
### 発生している問題・エラーメッセージ
```
削除ボタンを押す
確認のダイアログが出現
『いいえ』を押すとダイアログが非表示になる
『はい』を押すと二重submitでアクセス禁止となる
```
### 該当のソースコード
```HTML
<!-- CSSの設定 -->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'employee/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'employee/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'employee/show.css' %}">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<div class = top>
   <h1>一覧</h1>
   <!-- ページを遷移するボタンの表示 -->
   <div class = move-btn>
       <div><a href="/employee/" class = btn>メニュー</a></div>
   </div>
   <!-- 登録されているユーザー情報をテーブルで表示 -->
   <div class = show-table>
       <table border="1">
           <tr>
               <th class="th1">ID</th>
               <th class="th2">担当者名</th>
               <th class="th3">性別</th>
               <th class="th4">年齢</th>
               <th class="th5">部署</th>
           </tr>
           <!-- 繰り返し処理でUserモデルに登録されているデータを全て表示する -->
           {% for value in registrations %}
           <tr>
               <td class="td1">{{ value.id }}</td>
               <td class="td2">{{ value.employee_name }}</td>
               <!-- Userモデルに登録されたsexのカラムの値によって表示する文字を変える -->
               <td class="td3">{% if value.sex == True %}男{% endif %}
                   {% if value.sex == False %}女{% endif %}</td>
               <td class="td4">{{ value.age }}</td>
               <!-- Userモデルに登録されたdepartmentのカラムの値によって表示する文字を変える -->
               <td class="td5">{% if value.department == 1 %}管理{% endif %}
                   {% if value.department == 2 %}システム開発{% endif %}
                   {% if value.department == 3 %}営業{% endif %}</td>
                   <!-- 更新と削除のボタン表示 -->
                   <td class="edit">
                       <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                       <button id='del_btn' class='del_btn'><img src="{% static "employee/delete-btn.png" %}"></button>   
                       <div id="dl2" style="display:none;">
                           <p>この行を削除しますか?</p>
                           <footer>
                               <button id='cancel_button'>いいえ</button>
                               <form name="delete_form" id="delete_form" method="post" action="{% url 'employee:delete' id=value.id %}"></form>
                               {% csrf_token %}
                                   <button id='delete_button' type="submit">はい</button>
                               </form>
                           </footer>
                       </div>
                   </td>
               </td>
           </tr>
           {% endfor %}
       </table>
       
       <script type="text/javascript">
           
           $(function() {
             $(".del_btn").click(function() {
               $("#dl2").dialog({
                 modal:true,
                 title:"登録者情報の削除確認",
                 buttons: {
                   "はい": function() {$(this).dialog("close");},
                   "いいえ": function() {$(this).dialog("close");}
                 }
               });
             });
           });
           </script>
   </div>
</div>
```
```view  
# 削除へのリクエストに対する処理  
def delete(request, id):  
   employee = get_object_or_404(User, pk=id)  
   employee.delete()  
   return redirect('employee:show')  
```  
### 試したこと
```
<!-- 更新と削除のボタン表示 -->
                   <td class="edit">
                       <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                       <form name="delete_form" id="delete_form" onsubmit="return confirm();" method="post" action="{% url 'employee:delete' id=value.id %}"></form>
                       {% csrf_token %}
                           <button id='del_btn' class='del_btn' type="submit"><img src="{% static "employee/delete-btn.png" %}"></button> 
                       </form> 
                   </td>
               </td>
           </tr>
           {% endfor %}
       </table>
       <div id="dl2" style="display:none;">
           <p>この行を削除しますか?</p>                               
       </div>
       <script type="text/javascript">
           /* function confirm() {} */
           
           $(function confirm() {
             $(".del_btn").click(function() {
               $("#dl2").dialog({
                 modal:true,
                 title:"登録者情報の削除確認",
                 buttons: {
                   "はい": function() {
                       $(this).dialog("close");
                   },
                   "いいえ": function() {
                       return false;
                       $(this).dialog("close");
                   }
                 }
               });
             });
           });
       </script>
```
formタグにonsubmit属性を追加
ダイアログで『いいえ』を選択するとsubmitをキャンセルさせる
### 補足情報(FW/ツールのバージョンなど)
Windows10
Python3.9.4
Django 3.2.3
VitualStudioCode
他にも不足なとこあれば教えてください
  • JavaScript

    36487 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    23413 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Django

    4313 questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • ダイアログ

    57 questions

    ユーザーにウィンドウやボックス等の形で個別で表示されるフォームであり、ユーザーに判断を促す目的で表示される。ユーザーが見逃す事のないよう、操作中のフォーム上にポップアップして表示される。

2 onsubmit属性の活用

shunxile

shunxile score 7

2021/06/10 18:54  投稿

削除実行時の確認ダイアログを自作 削除実行時のコードが分からない
### 前提・実現したいこと
登録されたデータを削除する際に最初confirmメソッドを用いて実装していました。
confirmの場合確認時『OK』と『キャンセル』だったので
『はい』・『いいえ』に変更したいと思い調べたところ
関数を自作するしかないと分かり進めていきました。
・削除ボタンを押すと確認のダイアログが出現する
・『いいえ』を押すとダイアログが消える(ダイアログが消えているだけなので機能としては違うのかも)
・『はい』を押すと該当データが削除され一覧のページへ
という流れを考えています。
### 発生している問題・エラーメッセージ
```
削除ボタンを押す
確認のダイアログが出現
『いいえ』を押すとダイアログが非表示になる
『はい』を押すと二重submitでアクセス禁止となる
```
### 該当のソースコード
```HTML
<!-- CSSの設定 -->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'employee/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'employee/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'employee/show.css' %}">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<div class = top>
   <h1>一覧</h1>
   <!-- ページを遷移するボタンの表示 -->
   <div class = move-btn>
       <div><a href="/employee/" class = btn>メニュー</a></div>
   </div>
   <!-- 登録されているユーザー情報をテーブルで表示 -->
   <div class = show-table>
       <table border="1">
           <tr>
               <th class="th1">ID</th>
               <th class="th2">担当者名</th>
               <th class="th3">性別</th>
               <th class="th4">年齢</th>
               <th class="th5">部署</th>
           </tr>
           <!-- 繰り返し処理でUserモデルに登録されているデータを全て表示する -->
           {% for value in registrations %}
           <tr>
               <td class="td1">{{ value.id }}</td>
               <td class="td2">{{ value.employee_name }}</td>
               <!-- Userモデルに登録されたsexのカラムの値によって表示する文字を変える -->
               <td class="td3">{% if value.sex == True %}男{% endif %}
                   {% if value.sex == False %}女{% endif %}</td>
               <td class="td4">{{ value.age }}</td>
               <!-- Userモデルに登録されたdepartmentのカラムの値によって表示する文字を変える -->
               <td class="td5">{% if value.department == 1 %}管理{% endif %}
                   {% if value.department == 2 %}システム開発{% endif %}
                   {% if value.department == 3 %}営業{% endif %}</td>
                   <!-- 更新と削除のボタン表示 -->
                   <td class="edit">
                       <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                       <button id='del_btn' class='del_btn'><img src="{% static "employee/delete-btn.png" %}"></button>   
                       <div id="dl2" style="display:none;">
                           <p>この行を削除しますか?</p>
                           <footer>
                               <button id='cancel_button'>いいえ</button>
                               <form name="delete_form" id="delete_form" method="post" action="{% url 'employee:delete' id=value.id %}"></form>
                               {% csrf_token %}
                                   <button id='delete_button' type="submit">はい</button>
                               </form>
                           </footer>
                       </div>
                   </td>
               </td>
           </tr>
           {% endfor %}
       </table>
       
       <script type="text/javascript">
           
           $(function() {
             $(".del_btn").click(function() {
               $("#dl2").dialog({
                 modal:true,
                 title:"登録者情報の削除確認",
                 buttons: {
                   "はい": function() {$(this).dialog("close");},
                   "いいえ": function() {$(this).dialog("close");}
                 }
               });
             });
           });
           </script>
   </div>
</div>
```
### 試したこと
```HTML
                   <!-- 更新と削除のボタン表示 -->
```
<!-- 更新と削除のボタン表示 -->
                   <td class="edit">
                       <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                       <button id='del_btn' class='del_btn' onclick="clickDelete(id=value.id)"><img src="{% static "employee/delete-btn.png" %}"></button>
                       <form method="post" action="{% url 'employee:delete' id=value.id %}">
                           {% csrf_token %}
                           <dialog id='dialog'>
                               <h3>登録者情報の削除確認</h3>
                               <div>
                                   この行を削除しますか?
                               </div>
                               <footer>
                                   <button id='cancel_button'>いいえ</button>
                                   <button id='delete_button' type="submit">はい</button><!--   onclick='return confirm("この行を削除しますか?");' -->
                               </footer>
                           </dialog>
                       </form>
                       <form name="delete_form" id="delete_form" onsubmit="return confirm();" method="post" action="{% url 'employee:delete' id=value.id %}"></form>
                       {% csrf_token %}
                           <button id='del_btn' class='del_btn' type="submit"><img src="{% static "employee/delete-btn.png" %}"></button> 
                       </form> 
                   </td>
               </td>
           </tr>
           {% endfor %}
       </table>
         
       <script>  
           document.getElementById("dialog").style.display = "none";  
           function clickDelete(id){  
               const dialog = document.getElementById("dialog");  
               if(dialog.style.display=="block"){
                   dialog.style.display = "none";
               }else{
                   dialog.style.display = "block";
               }
               document.getElementById("cancel_button").addEventListener('click',() =>{
                   return false;
                   dialog.style.display = "none";
               })
           }
       <div id="dl2" style="display:none;">
           <p>この行を削除しますか?</p>                               
       </div>
       <script type="text/javascript">
           /* function confirm() {} */
           
           $(function confirm() {  
             $(".del_btn").click(function() {  
               $("#dl2").dialog({  
                 modal:true,  
                 title:"登録者情報の削除確認",  
                 buttons: {  
                   "はい": function() {  
                       $(this).dialog("close");  
                   },  
                   "いいえ": function() {  
                       return false;  
                       $(this).dialog("close");  
                   }  
                 }  
               });  
             });  
           });  
       </script>
```
上記のように変更したところ『はい』・『いいえ』どちらでも削除されてしまう。かつテーブルの1番上のデータが削除されてしまう
formタグにonsubmit属性を追加
ダイアログで『いいえ』を選択するとsubmitをキャンセルさせる
### 補足情報(FW/ツールのバージョンなど)
Windows10
Python3.9.4
Django 3.2.3
VitualStudioCode
他にも不足なとこあれば教えてください
  • JavaScript

    36487 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    23413 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Django

    4313 questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • ダイアログ

    57 questions

    ユーザーにウィンドウやボックス等の形で個別で表示されるフォームであり、ユーザーに判断を促す目的で表示される。ユーザーが見逃す事のないよう、操作中のフォーム上にポップアップして表示される。

1 jQueryを活用したことによるコード変更

shunxile

shunxile score 7

2021/06/10 16:21  投稿

削除実行時の確認ダイアログを自作 削除実行時のコードが分からない
### 前提・実現したいこと
登録されたデータを削除する際に最初confirmメソッドを用いて実装していました。
confirmの場合確認時『OK』と『キャンセル』だったので
『はい』・『いいえ』に変更したいと思い調べたところ
関数を自作するしかないと分かり進めていきました。
・削除ボタンを押すと確認のダイアログが出現する
・『いいえ』を押すとダイアログが消える(ダイアログが消えているだけなので機能としては違うのかも)
・『はい』を押すと該当データが削除され一覧のページへ
という流れを考えています。
### 発生している問題・エラーメッセージ
```
削除ボタンを押す
確認のダイアログが出現
『いいえ』を押すとダイアログが非表示になる
『はい』を押すと二重submitでアクセス禁止となる
```
### 該当のソースコード
```HTML
<!-- CSSの設定 -->  
{% load static %}  
<link rel="stylesheet" type="text/css" href="{% static 'employee/reset.css' %}">  
<link rel="stylesheet" type="text/css" href="{% static 'employee/style.css' %}">  
<link rel="stylesheet" type="text/css" href="{% static 'employee/show.css' %}">  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">  
 
<div class = top>
   <h1>一覧</h1>
   <!-- ページを遷移するボタンの表示 -->
   <div class = move-btn>
       <div><a href="/employee/" class = btn>メニュー</a></div>
   </div>
   <!-- 登録されているユーザー情報をテーブルで表示 -->
   <div class = show-table>
       <table border="1">
           <tr>
               <th class="th1">ID</th>
               <th class="th2">担当者名</th>
               <th class="th3">性別</th>
               <th class="th4">年齢</th>
               <th class="th5">部署</th>
           </tr>
           <!-- 繰り返し処理でUserモデルに登録されているデータを全て表示する -->
           {% for value in registrations %}
           <tr>
               <td class="td1">{{ value.id }}</td>
               <td class="td2">{{ value.employee_name }}</td>
               <!-- Userモデルに登録されたsexのカラムの値によって表示する文字を変える -->
               <td class="td3">{% if value.sex == True %}男{% endif %}
                   {% if value.sex == False %}女{% endif %}</td>
               <td class="td4">{{ value.age }}</td>
               <!-- Userモデルに登録されたdepartmentのカラムの値によって表示する文字を変える -->
               <td class="td5">{% if value.department == 1 %}管理{% endif %}
                   {% if value.department == 2 %}システム開発{% endif %}
                   {% if value.department == 3 %}営業{% endif %}</td>
                   <!-- 更新と削除のボタン表示 -->
                   <td class="edit">
                       
                           <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                           <button id='del_btn' class='del_btn' onclick="clickDelete()"><img src="{% static "employee/delete-btn.png" %}"></button>
                           
                           <dialog id='dialog'>
                               <h3>登録者情報の削除確認</h3>
                               <div>
                                   この行を削除しますか?
                               </div>
                               <footer>
                                   <button id='cancel_button'>いいえ</button>
                                   <form name="delete_form" id="delete_form" method="post" action="{% url 'employee:delete' id=value.id %}"></form>
                                   {% csrf_token %}
                                       <button id='delete_button' type="submit">はい</button><!-- onclick='return confirm("この行を削除しますか?");' -->
                                   </form>
                               </footer>
                           </dialog>
                       
                       <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                       <button id='del_btn' class='del_btn'><img src="{% static "employee/delete-btn.png" %}"></button>   
                       <div id="dl2" style="display:none;">
                           <p>この行を削除しますか?</p>
                           <footer>
                               <button id='cancel_button'>いいえ</button>
                               <form name="delete_form" id="delete_form" method="post" action="{% url 'employee:delete' id=value.id %}"></form>
                               {% csrf_token %}
                                   <button id='delete_button' type="submit">はい</button>
                               </form>
                           </footer>
                       </div>
                   </td>
               </td>
           </tr>
           {% endfor %}
       </table>
       
       <script>
           document.getElementById("dialog").style.display = "none";
           function clickDelete(){
               const dialog = document.getElementById("dialog");
               if(dialog.style.display=="block"){
                   dialog.style.display = "none";
               }else{
                   dialog.style.display = "block";
               }
               document.getElementById("cancel_button").addEventListener('click', () => {
                   dialog.style.display = "none";
                   return false;
       <script type="text/javascript">
           
           $(function() {
             $(".del_btn").click(function() {
               $("#dl2").dialog({
                 modal:true,
                 title:"登録者情報の削除確認",
                 buttons: {
                   "はい": function() {$(this).dialog("close");},
                   "いいえ": function() {$(this).dialog("close");}
                 }
               });
               document.getElementById("delete_button").addEventListener('click', function() {
                   document.getElementById("delete_form").submit();   <!-- ここのコードをどう記述すればいいか分かりません -->
               });
           };
           
       </script>
             });
           });
           </script>
   </div>
</div>
 
```
### 試したこと
```HTML
                   <!-- 更新と削除のボタン表示 -->
                   <td class="edit">
                       <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                       <button id='del_btn' class='del_btn' onclick="clickDelete(id=value.id)"><img src="{% static "employee/delete-btn.png" %}"></button>
                       <form method="post" action="{% url 'employee:delete' id=value.id %}">
                           {% csrf_token %}
                           <dialog id='dialog'>
                               <h3>登録者情報の削除確認</h3>
                               <div>
                                   この行を削除しますか?
                               </div>
                               <footer>
                                   <button id='cancel_button'>いいえ</button>
                                   <button id='delete_button' type="submit">はい</button><!--   onclick='return confirm("この行を削除しますか?");' -->
                               </footer>
                           </dialog>
                       </form>
                   </td>
               </td>
           </tr>
           {% endfor %}
       </table>
       
       <script>
           document.getElementById("dialog").style.display = "none";
           function clickDelete(id){
               const dialog = document.getElementById("dialog");
               if(dialog.style.display=="block"){
                   dialog.style.display = "none";
               }else{
                   dialog.style.display = "block";
               }
               document.getElementById("cancel_button").addEventListener('click',() =>{
                   return false;
                   dialog.style.display = "none";
               })
           }
           
       </script>
```
上記のように変更したところ『はい』・『いいえ』どちらでも削除されてしまう。かつテーブルの1番上のデータが削除されてしまう
### 補足情報(FW/ツールのバージョンなど)
Windows10
Python3.9.4
Django 3.2.3
VitualStudioCode
他にも不足なとこあれば教えてください
  • JavaScript

    36487 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    23413 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Django

    4313 questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • ダイアログ

    57 questions

    ユーザーにウィンドウやボックス等の形で個別で表示されるフォームであり、ユーザーに判断を促す目的で表示される。ユーザーが見逃す事のないよう、操作中のフォーム上にポップアップして表示される。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る