質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1071閲覧

非同期通信 link_to

yakumo02

総合スコア103

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/14 09:29

編集2022/01/12 10:55

削除ボタンを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); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問