js.erb文件正在执行两次.RubyonRails-private_pub

js.erb file is executing two times . Ruby on Rails - private_pub

本文关键字：两次 RubyonRails-private pub 文件 erb 执行 js      更新时间：2023-09-26

我正在开发chating模块。为此，我使用了private_pub gem。在这个模块中，我制作了三个频道，但我不能在这里提及所有这些，因为它将显示一个非常非常大的页面。所以让我们坚持一个频道。

我点击一个具有通道"<%= subscribe_to "/conversations/send_invitation" %>"的链接，然后ajax工作并转到"conversations/send_invitation"（只一次-这是可以的），在我的"/conversations/send_invitation"中我有

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（这是好的）。

现在的问题是，我可以在我的firefox console/html中看到两个modal和same id。而buttons对closing/submit和modal也停止工作。此外，我的send_invitation.js.erb文件中的console.log显示了两次console.log结果，因此很明显，js.erb文件执行了两次。但需要注意的是，ajax只运行了一次。我在上面浪费了几个小时，只找到了这个链接，它也不适用于我，因为当我删除jquery.js或jquery_ujs.js时，它会给我错误

我找不到解决方案，但我认为有人通知实际问题是值得的

在我的案例中，问题是我在同一个页面上创建了两个通道，这就是为什么它与瘦服务器进行了两次握手。

注意但在一般情况下，如果我们两次包含js文件，也可能发生这种情况。

使用$(document).on('keydown', '.chatboxtextarea', function (event){....});，我的消息对象只创建过一次，但根据我在没有重新加载整个页面的情况下使用涡轮链接返回页面的次数，显示了几次。为了解决这个问题，我在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文件

 //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 %>

使用unbind方法删除不需要的/多个要与事件一起执行的调用。这就行了。但多个电话背后的原因尚不清楚。

$( "#foo" ).unbind( "click", handler );

希望能有所帮助。

使用此宝石

gem "private_pub", :git => 'https://github.com/ryleto/private_pub.git'

相关文章：