#通知が画面遷移で消えてしまう
一定時間おきにajaxで通信をして通知があった場合にはHeaderのベルマークが光る仕様です。
ヘッダーは全画面で共通
しかしながら画面遷移をしてしまうとベルマークの色は消えてしまい、
再びajaxから通知を受け取るまでは光りません。
どのようにすれば画面遷移をしてもベルマークを光ったままにできるのでしょうか?
仕様としてベルのマークが消えるのはマークをクリックした時のみとしたいです。
こちらの機能はまだ未実装です。
js
1$(function(){ 2 var token = $("meta[name='_csrf']").attr("content"); 3 var header = $("meta[name='_csrf_header']").attr("content"); 4 $(document).ajaxSend(function(e, xhr, options) { 5 xhr.setRequestHeader(header, token); 6 }); 7 8 //ajax 9 function doDataRefresh() 10 { 11 $.ajax( // promiseを返す 12 { 13 url:"/checkdb", 14 type:"POST" 15 }) 16 .done(function(returnData){ 17 if(returnData.length > 3) { 18 console.log(returnData); 19 console.log(returnData.length); 20 //ベルを光らせる 21 $('#alert').addClass('alert'); 22 } 23 }) 24 .fail(function(xhr) {console.log('error')}); 25 return false; 26 } 27 28 29 (function(){ 30 var t = setInterval(function() 31 { 32 doDataRefresh(); // 定期的に行いたい処理 33 }, 10000); // refresh間隔=5分=300秒=300000ms 34 })(); 35 36}); 37
CSS
1.alert { 2 color:#fc9d03; 3}
##HTMLヘッダー部分
HTML
1<header class="header"> 2 <div class="container"> 3 <div class="container-small"> 4 <a href="http://localhost:8080/top" class="headA">TOP</a> 5 <button type="button" class="headC"> 6 <span class="fa fa-bars" title="MENU"></span> 7 </button> 8 </div> 9 <nav class="headB"> 10 <ul> 11 <li><a href="http://localhost:8080/top">TOP</a></li> 12 <li><a 13 href="http://localhost:8080/profile/2">マイページ</a></li> 14 <li><a href="http://localhost:8080/profile/messageBox">メッセージ</a></li> 15 <li><a href="http://localhost:8080/logout">ログアウト</a></li> 16 <li class="alert-wrapper"><i class="far fa-bell" id="alert"></i> 17 </ul> 18 </nav> 19 </div> 20 </header>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。