私は、今非同期通信で会話機能を導入しようと考えています。ページ移動なしで、データを表示することができるのですが、ページ移動・リロードなしで、表示することができない状態にあります。もしわかる方がいらしたら、方法を教えて頂きたいです。
if Entry.where(:user_id => current_user.id, :room_id => params[:message][:room_id]).present?
@message = Message.new(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id))
if @message.save
respond_to do |format|
format.html { redirect_to :action => "show", :controller=>"rooms", :id => @message.room_id }
format.json
end
end
else
redirect_back(fallback_location: root_path)
end
<% if @messages.present? %>
<% @messages.each do |m| %>
<strong><%= m.content %></strong>
<small>by <strong><a href="/users/<%= m.user_id %>"><%= m.user.email %>さん</a></strong></small>
<hr>
<% end %>
<% else %>
<h3 class="text-center">メッセージはまだありません</h3>
<% end %>
<%= form_for @message, id: "new_message" do |f| %>
<%= f.text_field :content, class: "form__message", :placeholder => "メッセージを入力して下さい" , :size => 70 %>
<%= f.hidden_field :room_id, class: "form__message", :value => @room.id %>
<br>
<%= f.submit "投稿する" , class: "form__message" %>
<% end %>
<script type="text/javascript">
$(document).ready(function() {
$('#new_message').on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action');
})
}
$("#new_message").on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false
})
}
$(document).ready(function() {
function buildHTML(message){
var html = `<div class="message">
<div class="upper-message">
<div class="upper-message__user-name">
${ content }
</div>
</div>
</div>`;
}
return false;
function scroll() {
$('.messages').animate({scrollTop: $('.message')[0].scrollHeight});
}
$("#new_message").on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false
});
.done(function(data){
var html = buildHTML(data);
$('.messages').append(html);
$('.form__message').val('');
$('.form__submit').prop('disabled', false);
});
scroll()
});
};
</script>
・jbuilder
json.id @message.id
json.content @message.content
json.room_id @message.room_id
json.user_id @message.user_id