2013-07-20 66 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')

希望这可以帮助别人的未来。