0

我在我的一个 Rails 视图中使用 firebase 进行聊天,但我无法正确捕获用户输入的值以显示在页面上。这发生在我添加 jquery插件页面幻灯片时。为了让这两者一起工作,我一定在我的实现中遗漏了一些东西。

这是我的rails视图的显示页面-

<script src="https://cdn.firebase.com/v0/firebase.js"></script>

<div id='chat-window'> 
  <%= render 'chat_window' %>
</div>
<a href="#chatty" class="second">Open Chat</a>

这是部分聊天窗口-

<% if @list.chat_enabled %>
  <%= render 'chat' %>
<% else %>
  <% if @list.owner?(current_user) %>
    <%= link_to 'Get ' + @list.name + "Chat Ticket",  enable_chat_list_path(@list), :class => 'btn', :remote => true %>
  <% end %>
<% end %>

这是聊天部分-

<div id="chatty" >
  <ol id='messagesDiv' class="conversation">  
  </ol>
  <input id='messageInput' class="conversation" placeholder='Message...'>
  <a href="javascript:$.pageslide.close()"><span class="btn btn-info">Done Chatting</span></a>
</div>

<script>
  $(document).ready(function() {
      $(".second").pageslide({ direction: "left", modal: true });
  });
</script>

这是基于firebase文档启用和编写聊天的coffeescript文件-

window.enableChat = (baseRef, projRef, userName, token) ->
  # Get a reference to the root of the chat data.
  messagesRef = new Firebase(baseRef)
  projectRef = ''
  messagesRef.auth token, (error, user) ->
    if error
      $("#messageInput").prop('disabled', true)
      $("#messagesDiv").html('disabled')
    else
      projectRef = messagesRef.child(projRef)

      # Add a callback that is triggered for each chat message.
      projectRef.on "child_added", (snapshot) ->
        message = snapshot.val()
        $("<li class='self'>").append($("<div class='message'>").append($("<p>").text(message.text))).prepend($("<span class='userVal'/>").text(message.name + ": ")).appendTo $("#messagesDiv")

      # When the user presses enter on the message input, write the message to firebase.
      $("#messageInput").keypress (e) ->
        if e.keyCode is 13
          text = $("#messageInput").val()
          projectRef.push 
            name: userName
            text: text
          $("#messageInput").val ""

更多信息如果我在不激活页面幻灯片的情况下使用聊天,聊天会写入显示页面就好了。 在此处输入图像描述

一旦我激活页面幻灯片并使用文本框,一个新的 li 将被附加到主显示页面的列表中,但其中没有任何值。并且没有附加到页面幻灯片内的列表中。

在此处输入图像描述

此链接<a href="#chatty" class="second123">Open Chat</a>用于打开 jQuery pageslide 插件。

在 jQuery pageslide 插件中按回车时,控制台没有任何内容。

我怎样才能更好地解决这个问题?

4

1 回答 1

0

Pageslide 插件创建了一个

<div id="pageslide"></div>

我把我的聊天数据包裹在里面。我通过添加解决了这个问题

#pageslide

在咖啡文件中的引用之前。所以$('#messagesDiv')

变成$('div#pageslide #messagesDiv')

希望这对将来的某人有所帮助。

于 2013-07-27T17:55:37.643 回答