2013-07-20 101 views
0

我在我的一個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的情況下使用聊天,那麼聊天就會寫入演示頁面。 enter image description here

一旦激活pageslide並使用文本框,新的li將被添加到主要顯示頁面上的列表中,但不會有任何值。並沒有任何附加到pageslide裏面的列表。

enter image description here

此鏈接<a href="#chatty" class="second123">Open Chat</a>用來打開了jQuery插件pageslide。

在jQuery pageslide插件中敲入回車時控制檯沒有任何內容。

我該如何更好地解決這個問題?

+0

我相信我更瞭解這個問題。 Pageslide插件創建了一個'

',我的聊天數據被包裹在其中。我通過在咖啡文件中的引用之前添加#pageslide來解決此問題。所以'$('#messagesDiv')'變成'$('div#pageslide #messagesDiv')' –

回答

0

Pageslide插件創建一個

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

,我不得不裹着它裏面我的聊天數據。我在咖啡文件中引用之前添加

#pageslide

彌補這個問題。所以$('#messagesDiv')

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

希望這可以幫助別人的未來。