2009-05-17 7 views
0

Я пишу приложение Rails и должен подключить этот маленький код jQuery, но я действительно не знаю, как заставить его работать. Вот мой код контроллера:jQuery and Rails

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> 

Теперь мне нужно сделать Chatroom всегда прокрутите вниз до дна, когда любой пользователь отправляет новое сообщение. Но также, когда текущий пользователь вручную прокручивается, отключите такое поведение. Я нашел код jQuery здесь: Scrolling Overflowed DIVs with JavaScript

Теперь я не знаю, чтобы заставить его работать. Я вставил в application.js:

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

Я также добавил <%= javascript_include_tag 'jquery', 'application' %> к head моего зрения.

Но когда мой дневник в чате заполняется, появляется полоса прокрутки, но автоматически не перемещается в ногу по мере поступления новых сообщений.

+0

Какой код вы вложили в приложение? Оставить отзыв? – Stefan

+0

и что работает и что не работает? – Stefan

ответ

0

Проблема заключается в том, что введенный вами код запускается только один раз, в начале сценария.

Я не знаю много о 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; 
    }) 
}; 

проблема заключается в том, что теперь, когда вы получаете новые данные с сервера необходимо добавить его в #chat_data путем вызова к югу («текст, который идет в окне чата»).

вам придется заменить

page.insert_html .... 

с чем-то, что посылает RJS клиенту, как:

page.call(:sub, data) 

надеюсь, что это помогает.

+0

Я просто положил это в application.js, и он не работает. Но я подозреваю auto_scroll(); бит должен идти куда-то еще? Я не понимаю, как функция будет вызываться более одного раза, когда моя страница не перезагружается (или, по крайней мере, я не думаю, что это так). – alamodey

+0

Отредактированный мой ответ, см. Первый бит о опечатке. – Stefan

+0

Все еще ничего не делает. Я что-то делаю неправильно, просто выбросив код в application.js и включив его в представление? – alamodey