Q&A
HTMLもお願いします。
チャットシステムで返信機能を追加しようとしています。やり方としては、返信ボタンを押すと、テキストボックスの中に返信番号が値として入力されます。返信番号にたいして、idを付与して、後でjavascriptを用いて、返信元をメッセージを表示できるようにしたいです。id付与の方法として、直接値にidを入力する方法をとりあえず試したのですが、タグは残っているのですが、idがついていません。これはどうしてでしょうか？やり方として、表示するときにidを付与するやり方のほうが良いのでしょうか？
返信を入力するコード
javascript
1// 返信ボタンをクリックした時 2$(document).on('click', '.reply', function(event) { 3 // メッセージ番号を取得 4 let rid = this.id.replace("reply-",''); 5 let mnumber = document.getElementById(rid).innerText; 6 7 if($('.speaker_txt').val() == ''){ 8 $('.speaker_txt').val('<div id="reply">' + ">>" + mnumber + '</div>' + '\n'); 9 }else{ 10 let result = window.confirm("返信をしてもいいですか？"); 11 if(result){ 12 $('.speaker_txt').val('>>' + mnumber); 13 } 14 } 15 document.getElementById('speaker').focus(); 16 });
できればcodepenやjsfiddleにも貼り付けてURLをお願いします。
チャット送信欄のhtmlです。
textareaがspeakerになっています。
<nav class="navbar navbar-default navbar-fixed-bottom message_form">
<div class="container">
<div class="row">
<div class="col-xs-10">
<form style="display: flex;">
<input type="hidden" id="user_name" value="<%=current_user.id%>">
<textarea id="speaker" class="form-control speaker_txt" data-behavior="room_speaker"><%= cookies[:speaker] %></textarea>
<button class="btn btn-default chat_sendbtn" type="submit">送信</button>
<span class="picture">
<input id="picture" name="page[fine_name]" size="4" type="file" accept='image/jpeg,image/gif,image/png' >
</span>
</form>
</div>
<div class="col-xs-2">
<div style="margin-top:1.5rem;">
<a class="latest" href="#bottom">最新</a>
</div>
</div>
</div>
</div>
</nav>
<div id="bottom">
</div>
表示するメッセージのバーシャル
<%= simple_format(
text_url_to_link(
render_with_hashtags(
message.content)).html_safe) %>
質問は編集できるので質問本文に追記を。
ただ、コードからするとRailsでしょうか。Javascriptだけに留まらないような気もするので質問タグ追加願います
期待する出力は何で、実際の出力はどうなってしまうのか、具体的に書いてください。
.speaker_txt の値の話なのかなと思いますが、どうなって欲しいのかよくわからんです。
htmlとして出力される際に、テキストボックスの中で入力したタグの中のidが反映されてほしいです。現状は、テキストボックスの中にidを入力することは、返信ボタンを押したときに実現できていますが、表示されるときに、idが付与されていないことになってしまいます。
テキストボックスというのは .speaker_txt、idというのは mnumber のことでよいですか? 返信ボタンを押したときの挙動は問題ないということは、質問文にあるコードに現状問題はないと思っているのですよね。
表示するときはどうやっているのですか?
テキストボックスはそうですね。idは、現在はreplyになっていますが、mnumberのほうがいいですね。変更しておきます。
表示は、ActionCableを用いて非同期で表示しています。表示している中身自体はメッセージのパーシャルです。
_message.html.erb
<% if message.disable != true %>
<li class="messages_<%= message.id %>">
<% if message.group_id %>
<% message_id = Group.find(message.group_id).messages.ids.sort.index(message.id) + 1 %>
<% else %>
<% message_id = Room.find(message.room_id).messages.where(group_id: nil).ids.sort.index(message.id) + 1 %>
<% end %>
<input type="hidden" id="rm-<%= message_id %>" value="<%= message.id%>">
<span class="mnumber" id="<%= message.id %>">
<%= message_id %>
</span>
<b>
<% if !message.user.name.nil? %>
<%= "#{message.user.name}" %>
<% else %>
<%= "S#{message.user.id}" %>
<% end %>
</b>
<button type="button" class="btn btn-light btn-xs reply ml-2" id="reply-<%= message.id %>">>></button>
<!--いいね-->
<%# render 'likes/like', message: message %>
<span class="timestamp text-right">
<%= message.created_at.strftime('%m/%d %H:%M') %>
<%= link_to message_path(message.id) ,method: :patch, data: { confirm: '本当にいいですか?' } do%>
<i class="fas fa-trash-alt color"></i>
<% end %>
</span>
<!--simple_format: 改行が反映される-->
<%= simple_format(
text_url_to_link(
render_with_hashtags(
message.content)).html_safe) %>
<%= image_tag message.picture.url if message.picture? %>
</li>
<% end %>
回答2件
0
class="reply"の要素は追記のHTMLにはないので、勝手に作り上げました：
html
1 <span id="rid123">Aさん</span> 2 <button class="reply" id="reply-rid123">返信</button>
JsFiddle-gx3rsLbv
返信を押すとidは付きます。
Developer Toolsにエラーは載ってないのでしょうか？
投稿2021/12/06 05:40
総合スコア910
id自体は付きますが、表示されるときに、idが付与されないということですね。
返信ボタンのhtml
<button type="button" class="btn btn-light btn-xs reply ml-2" id="reply-<%= message.id %>">>></button>
0
投稿2021/12/05 21:04
総合スコア80875
あなたの回答
tips
プレビュー
