社内システムにて更新処理をモーダルが表示されている時だけ止めたい

前提

社内システムのメイン画面にて更新処理(10秒間隔)をおこなっているのですが、
そこにある「依頼確認」ボタン押下すると閲覧、記入用のモーダルウインドウが表示されます

モーダル画面

実現したいこと

モーダルウィンドウの画面が表示されている間はrefresh(更新処理)を止めたい

発生している問題・エラーメッセージ

特にありません

該当のソースコード

html,php
1更新処理
2<meta http-equiv="refresh" content="10">
3
4モーダル用
5<button type="button" class="btn <?php echo $btn_color; ?> btn-sm mb-2" data-toggle="modal" data-target="#modal1">
6依頼確認<?php if($count1==1){}else{echo "(".sprintf("%03d", $count1-1).")";} ?>
7</button><br>
8</div>
9<!--<div class="p-1 mb-1 bg-light"></div>--> 
10<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
11<div class="modal-dialog">
12<div class="modal-content">
13<div class="modal-header">
14...

試したこと

https://teratail.com/questions/121785
上記のjsも行いましたが、よくわからず出来ませんでした

また更新する理由としてはモーダルから依頼の登録が行えて、
登録すると依頼確認ボタンに依頼件数と24時間以内の登録の場合ボタンの色を変更する処理を入れております。
そのため更新しないと登録した場合、反映されないため

ご指導のほどよろしくお願いします。

m.ts10806

2022/08/22 20:50

refreshではなくsetTimeout()に変更した方が制御しやすいと思うのですが、そういった変更は可でしょうか。

kou___chan

2022/08/23 15:06

m.ts10806　さん返信ありがとうございました。 setTimeout()のサンプルも色々試しましたが自分には難しく改善までいきませんでした。ご指導ありがとうございました

行動規範の内容に同意します

回答1件

ベストアンサー

metaはやめてざっくりこんな感じ
（サンプルは3秒毎に更新しています）

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let timerID;
4  timer=()=>timerID=setTimeout(()=>location.reload(),3000);
5  timer();
6  d.value=(new Date).getTime();
7  btn_modal.addEventListener('click',()=>{
8    dlg.showModal();
9    clearTimeout(timerID);
10  });
11  btn_close.addEventListener('click',()=>{
12    dlg.close();
13  });
14  dlg.addEventListener('close',e=>{
15    timer();
16  });
17});
18
19</script>
20<input id="d">
21<input type="button" value="modal" id="btn_modal">
22<dialog id="dlg">
23<input type="button" value="close" id="btn_close">
24</dialog>

ただしページ更新ではなくapiを用意してfetchをつかった非同期処理で一部だけ更新すれば良いと思います。

投稿2022/08/23 00:48

yambejp

総合スコア114814

kou___chan

2022/08/23 15:07

yambejp　さん返信ありがとうございます。こちらでいけそうです。素晴らしい。組み込んでみますありがとうございました。

kou___chan

2022/08/23 15:34

yambejp　さんお世話になります。組み込んでみたのですが、モーダル起動すると確かに一時停止してモーダルウインドウも残ります。そしてcloseボタンから解除となるのですが、モーダルウィンドウ起動した際に更新は止めるのですが、モーダルの中にＤＢへ登録する処理があります。こちらもすべて操作不可となってしまうのですが、やはりそこの登録処理を更新止めている状態で操作するのは難しいでしょうか？