削除ボタンをlink_toで作成したのですが、非同期で表示させたいです
リロードしないとボタンが出現しません
jsのbuildHTMLに書き込むのはわかるのですがlink_toの記述をjsにどう記述すればいいか分からないです
クラスをそのまま書き込んだのですが、ダメでした
他の方法もあれば教えていただきたいです
宜しくお願いします
haml
8行目が削除機能です
.message{data: {id: message.id}} .message__upper-info %p.face %p.message__upper-info__talker = message.user.name %p.message__upper-info__date = message.created_at.strftime("%Y/%m/%d %H:%M") = link_to '削除', "/groups/#{@group.id}/messages/#{message.id}", method: :delete,class: "message__delete" - if message.content.present? %p.message__text = message.content = image_tag message.image.url, class: 'lower-message__image' if message.image.present?
messages.js
$(document).on('turbolinks:load',function(){ function buildHTML(message){ var img = message.image ? `<img src= ${ message.image }>` : ""; var html = `<div class="message" data-id="${message.id}" > <div class="message__upper-info"> <p class="face"> <p class="message__upper-info__talker"> ${message.user_name} </p> <p class="message__upper-info__date"> ${message.created_at} </p> </div> <p class="message__text"> ${message.content} <div> </div> ${img} </p> </div>` return html ; } $('#new_message').on('submit', function(e){ e.preventDefault(); var formData = new FormData(this); $('#ajax').removeAttr('data-disable-with'); var url = $(this).attr('action') $('#new_message')[0].reset(); $.ajax({ url: url, type: "POST", data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ var html = buildHTML(data); $('.messages').append(html); $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight}); }) .fail(function(){ alert('エラーが発生しています'); }) }); var reloadMessages = function() { if(window.location.href.match(//groups/\d+/messages/)){ last_message_id = $('.message').last().data("id"); $.ajax({ url: 'api/messages', type: 'get', dataType: 'json', data: {id: last_message_id} }) .done(function(messages) { if(messages.length > 0){ var insertHTML = ''; messages.forEach(function (message) { insertHTML = buildHTML(message); $('.messages').append(insertHTML); $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight}); }) } }) .fail(function() { alert('error'); }); }; } setInterval(reloadMessages, 5000); });
あなたの回答
tips
プレビュー