2009-05-17 6 views
0

저는 레일즈 애플리케이션을 작성 중이며이 작은 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> 

지금, 내가 어떤 사용자가 새 메시지를 보낼 때 채팅방은 항상 아래로 스크롤 할 필요가있다. 또한 현재 사용자가 수동으로 스크롤 한 경우 이러한 종류의 동작을 비활성화하십시오. 여기에 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; 
}); 

가 나는 또한 내보기의 head<%= javascript_include_tag 'jquery', 'application' %>을 추가했습니다.

내 대화방 로그가 가득 차면 스크롤바가 나타나지만 새 메시지가 나오면 자동으로 하단으로 이동하지 않습니다.

+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.call(:sub, data) 

그것이 도움이되기를 바랍니다 :

당신은 같은 클라이언트에 RJS를 전송 뭔가

page.insert_html .... 

를 교체해야합니다.

+0

그냥 application.js에 넣었지만 작동하지 않습니다. 그러나 나는 auto_scroll(); 조금 다른 곳으로 가야할까요? 내가 이해하지 못하는 것은 내 페이지가 다시로드되지 않을 때 (또는 적어도 내가 그렇게 생각하지 않는다면) 한 번 이상 함수가 호출 될 것입니다. – alamodey

+0

편집 내 대답은, 오타에 대한 첫 번째 비트를 참조하십시오. – Stefan

+0

아직 아무것도하지 않습니다. 내가 application.js에 코드를 던지고보기에 포함 시켜서 뭔가 잘못하고있는 것입니까? – alamodey