前提・実現したいこと
https://qiita.com/yuki-n/items/885f6f059167a7b5aedc
このページを参考にして自動更新をしようと思っています。
問題のプログラムはgithubに上げました。
https://github.com/Tatsuki5274/teratail
発生している問題・エラーメッセージ
[ブラウザ上の表示 下記変更適応後] Messages Text aaa Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy undefined Show Edit Destroy ・・・・以下無限に続く・・・
Ruby(Ruby on Rails) Javascript(Jquery) JSON
試したこと
ページに書かれていた以下のコードをそのまま入力したら正常に更新できずにundefinedのみが大量に表示されてしまったため、
$(function(){ $(function(){ setInterval(update, 10000); }); function update(){ //var message_id = $('.messages:last').data('id'); var message_id = $('.massages:last').data('data-id') //に変更した。 $.ajax({ url: location.href, type: 'GET', data: { message: { id: message_id } }, dataType: 'json' }) } });
update関数の最初の行のdataメソッドの引数(?)をidでなくdata-idに変更したところ、更新が適応されるようになったが、上記のようにデータの下にundefinedが表示されてしまいます。
また以下のコードのalwaysのfunction関数の引数dataとeachメソッドの引数のfunction関数の引数iがどこから来ているのか教えてほしいです。
$(function(){ function buildMESSAGE(message){ //引数のmessageオブジェクトからhtmlを生成する var messages = $('tbody').append('<tr class="messages" data-id=' + message.id + '><td>' + message.text + '</td><td><a href="/messages/' + message.id + '">Show</a></td><td><a href="/messages/' + message.id +'/edit">Edit</a></td><td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/messages/' + message.id + '">Destroy</a></td>'); } $(function(){ setInterval(update, 1000); }); function update(){ if($('.messages')[0]){ var message_id = $('.messages:last').data('data-id'); } else{ var message_id = 0 } $.ajax({ url: location.href, type: 'GET', data:{ message: { id: message_id } }, dataType: 'json' }) .always(function(data){ $.each(data, function(i, data){ buildMESSAGE(data); }) }) } });
あなたの回答
tips
プレビュー