我正在研究chating
模块。为此,我使用了private_pub gem
。在这个模块中,我已经制作了三个频道,但我不能在这里提到所有这些频道,因为它会显示一个非常非常大的页面。所以让我们坚持一个渠道。
点击有频道"<%= subscribe_to "/conversations/send_invitation" %>"
的链接然后ajax
工作,然后转到"conversations/send_invitation"
(只有一次 - 这没问题),在"/conversations/send_invitation"
我有< / p>
def send_invitation
@conversation = Conversation.new(conversation_params)
respond_to do |format|
format.js { render :layout => false }
format.html
end
end
然后在我的send_invitation.js.erb
文件中,我有以下
<% publish_to "/conversations/send_invitation" do %>
var recipient_id = "<%=@conversation.recipient.id %>";
var current_temp_user = $("#current_temp_user").val();
if(recipient_id == current_temp_user){
console.log('here')
$("#invitation_div").html("<%=j(render :partial => '/restaurants/invitation')%>");
card_modal = $('#invitation_card').modal();
card_modal.modal('show');
}
<% end %>
这是我的application.js
文件
//= require jquery
// require jquery-ui
//= require jquery_ujs
// require turbolinks
//= require bootstrap
//= require jquery.raty
//= require private_pub
//= require_tree .
模态显示在recipient side
(这很好)。
现在的问题是我可以在modal
中看到两个same id
firefox console/html
。而buttons
closing/submit
的{{1}}也停止了工作。此外,modal
文件中的console.log
显示了send_invitation.js.erb
结果的两次,因此很明显console.log
文件正在执行两次。但值得注意的是,js.erb
仅运行一次。我浪费了几个小时就发现它只发现This link这对我来说也不起作用,因为当我删除ajax
或jquery.js
时,它会给我错误
答案 0 :(得分:0)
我找不到解决办法,但我认为有人告诉实际问题是值得的。
在我的情况下,问题是我在同一页面上制作了两个频道,这就是为什么它与瘦服务器进行两次握手的原因。
注意但在一般情况下,如果我们将js文件包含两次,也会发生这种情况。
答案 1 :(得分:0)
使用$(document).on('keydown', '.chatboxtextarea', function (event){....});
我的消息对象只创建了一次,但根据我在没有完整页面重新加载的情况下使用turbolink返回页面的次数显示了多次。
要在js.erb文件中解决此问题,我添加了event.handled来检查是否已经附加了partial。
的application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require turbolinks
//= require jquery.remotipart
//= require chat
//= require refile
//= require bootstrap-sprockets
//= require private_pub
//= require local_time
//= require moment
//= require fullcalendar
//= require bootstrap-datetimepicker
//= require_tree .
js file
//submitting chat message (it's OUTSIDE $(document).on('page:change'..)
//bind submit to document --> not affected by turbolinks
$(document).on('keydown', '.chatboxtextarea', function (event) {
var id = $(this).data('cid');
checkInputKey(event, $(this), id);
});
function checkInputKey(event, chatboxtextarea, conversation_id) {
if (event.keyCode == 13 && event.shiftKey == 0) {
event.preventDefault();
//checking if field is empty and submitting the form
message = chatboxtextarea.val();
message = message.replace(/^\s+|\s+$/g, "");
if (message != '') {
$('#conversation_form_' + conversation_id).submit();
}
}
}
html.erb表单
<div class="chatboxinput">
<%= form_for([@conversation, @message], :remote => true, :html => {id: "conversation_form_#{@conversation.id}"}) do |f| %>
<%= f.text_area :body, class: "chatboxtextarea", "data-cid" => @conversation.id %>
<% end %>
</div>
......
<%= subscribe_to conversation_path(@conversation) %>
_message.html.erb
<li class="<%= self_or_other(message) %>">
<div class="chatboxmessagecontent">
<p>
<%= message.body %>
</p>
</div>
</li>
create.js.erb
<% publish_to @path do %>
var id = "<%= @conversation.id %>";
var chatbox = $(".chatboxcontent");
var lastMessage = chatbox.children().last();
//with this one message will be displayed only once
if(event.handled !== true) {
$message = $('<%= j render @message %>');
chatbox.append($message);
chatbox.scrollTop(chatbox[0].scrollHeight);
//for displaying incoming and outgoing messages differently
if(sender_id != receiver_id) {
chatbox.children().last().removeClass("self").addClass("other");
chatbox.scrollTop(chatbox[0].scrollHeight);
}
event.handled = true;
};
<% end %>
答案 2 :(得分:0)
使用unbind方法删除要在事件中执行的不需要/多个调用。这样就可以了。但多次通话背后的原因尚不清楚。
$( "#foo" ).unbind( "click", handler );
希望它有所帮助。
答案 3 :(得分:0)
使用此gem代替
<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
<children>
<ScrollPane fitToWidth="true"
AnchorPane.leftAnchor="10"
AnchorPane.rightAnchor="10"
AnchorPane.topAnchor="10"
AnchorPane.bottomAnchor="10">
<content>
<GridPane hgap="10">
<padding>
<Insets topRightBottomLeft="10"/>
</padding>
<columnConstraints>
<ColumnConstraints />
<ColumnConstraints fillWidth="true" hgrow="ALWAYS" />
</columnConstraints>
<children>
<Text text="Family Name:"/>
<TextField GridPane.columnIndex="1"/>
</children>
</GridPane>
</content>
</ScrollPane>
</children>
</AnchorPane>