我在我的一個rails視圖中使用firebase進行聊天,並且我無法正確捕獲用戶輸入的值以顯示在頁面上。發生這種情況時,我添加了jquery plugin pageslide.我一定錯過了我的實現中的這兩個一起工作。Javascript + Rails查看渲染混淆
這裏展示頁面我的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>
這裏是chat_window partial-
<% 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 %>
這裏是partial-
<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>
聊天這裏是CoffeeScript的根據firebase文檔啓用和寫入聊天的文件 -
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 ""
更多信息 如果我在不激活pageslide的情況下使用聊天,那麼聊天就會寫入演示頁面。
一旦激活pageslide並使用文本框,新的li將被添加到主要顯示頁面上的列表中,但不會有任何值。並沒有任何附加到pageslide裏面的列表。
此鏈接<a href="#chatty" class="second123">Open Chat</a>
用來打開了jQuery插件pageslide。
在jQuery pageslide插件中敲入回車時控制檯沒有任何內容。
我該如何更好地解決這個問題?
我相信我更瞭解這個問題。 Pageslide插件創建了一個'
',我的聊天數據被包裹在其中。我通過在咖啡文件中的引用之前添加#pageslide來解決此問題。所以'$('#messagesDiv')'變成'$('div#pageslide #messagesDiv')' –