RailsにてjQueryを用いたアプリを作っています。
setIntervalを使いajax通信をし、
別の人が新規メッセージを投稿していた場合、現在表示されているメッセージとの差分を比較し、
新規メッセージがある場合はアラーム(**件の新着メッセージを表示)を出し、それをクリックするとメッセージが実際に追加される仕組みです。
ajax通信、for文などはうまく動いているのですが、肝心の新着メッセージを追加する、という機能がうまくいっていません。
二重に投稿されるなど、ajax通信をすればするほど同じ投稿が繰り返される、といった感じです。
一度クリックして新着メッセージを表示しても次にまた新着があり、クリックした時に一つ前のメッセージが追加されるなど、ajax通信を行ってからif文、for文を抜けるまでに何か問題があると思います。
どなたか力を貸していただけるとありがたいです。
jQuery
1$(function(){ 2 3 setInterval(function(){ 4 reload(); 5 },5000); 6 7 function reload(){ 8 9 $.ajax({ 10 type: 'GET', 11 url: '/messages.json', 12 dataType: 'json' 13 }).done(function(data) { 14 var all_message_num = $('.message-list').length; 15 16 if (all_message_num !== data.length){ 17 var data_num = data.length; 18 var suuzi = data.length - all_message_num; 19 20 var htm = 21 '<div class="message-alarm">' + 22 suuzi + 23 '件の新着メッセージを表示' + 24 '</div>'; 25 $('.message-alarm-div').html(htm); 26 }; 27 click(suuzi,data); 28 }); 29 function click(suuzi,data){ 30 $('.message-alarm-wrapper').on('click', function(){ 31 for (var i = suuzi; i >0; i--){ 32 var num = i; 33 var numm = num -1; 34 var html_tag = buildNewMessage(data[numm]); 35 $('.message-lists').prepend(html_tag); 36 $('.message-alarm-div').empty(html_tag); 37 } 38 }); 39 }; 40 };
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/30 10:42