簡體   English   中英

jQuery和Rails

[英]jQuery and Rails

我正在編寫一個Rails應用程序,需要插入這部分jQuery代碼,但是我真的不知道如何使其工作。 這是我的控制器代碼:

class ChatroomController < ApplicationController
def send_data
    @role = Role.find_by_id(session[:role_id])
    render :juggernaut do |page|

      page.insert_html :bottom, 'chat_data', "<b>#{@role.name}:</b> #{h params[:chat_input]}<br>"
    end
    render :nothing => true
  end
end

並查看代碼:

<h2>Chat</h2>
<html>
  <head>
    <%= javascript_include_tag :defaults, :juggernaut %>
    <%= juggernaut %>
  </head>
  <body>
        <div id='chat_data', class="chatbox">
        </div>
        <br>
    <%= form_remote_tag(
          :url => { :action => :send_data },
          :complete => "$('chat_input').value = ''" ) %>
      <%= text_area_tag( 'chat_input', '', { :rows => 3, :cols => 70, :id => 'chat_input'} ) %>
      <%= submit_tag "Send" %>
    </form>
  </body>
</html>

現在,我需要使聊天室在任何用戶發送新消息時始終向下滾動到底部。 而且,當當前用戶手動向上滾動時,請禁用這種行為。 我在這里找到了一些jQuery代碼: 使用JavaScript滾動顯示溢出的DIV

現在我不知道要開始工作。 我粘貼到application.js中:

$("#chat_data").each( function() 
{
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

我還在視圖的head添加了<%= javascript_include_tag 'jquery', 'application' %>

但是,當我的聊天室日志填滿時,會出現滾動條,但隨着新消息的通過,滾動條不會自動移到底部。

問題似乎是您插入的代碼在腳本開頭僅運行一次。

我對jquery不太了解,所以這只是一個通用解決方案。

function sub(data) {
  $('#chat_data').each( function () {
    var s_top = this.scrollHeight - this.clientHeight;
    var scl = this.scrollTop == s_top;
    this.innerHTML += '<br/>' + data;
    if ( scl ) this.scrollTop = s_top + this.clientHeight;
  })
};

問題在於,現在當您從服務器接收新數據時,必須通過調用sub(“進入聊天窗口的文本”)將其添加到#chat_data中。

你必須更換

page.insert_html ....

將rjs發送到客戶端的內容,例如:

page.call( :sub, data)

希望能幫助到你。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM