1

I'm having trouble grasping how to deal with front end events in volt, and hopefully this specific question could help enlighten me.

I implemented the simple chat program from the webcast and wanted to build on it. Specifically I want the chat window to stay scrolled to the bottom as the chat window is populated. I think the key is the jquery .animate({ scrollTop:...}) method, but I don't understand how to implement that in volt. Could someone enlighten me?

My first attempt is the "scroll_bottom" method in the controller https://github.com/mmattthomas/chat/blob/master/app/main/controllers/main_controller.rb#L30-L36

def scroll_bottom
  `
   var newscrollHeight = $('.panel-body').attr('scrollHeight') - 20;
   //alert('newscrollHeight:' + newscrollHeight);
   $('.panel-body').animate({ scrollTop: newscrollHeight }, 'normal');
  `
end

The javascript runs, but the variable returns NaN.

View is here: https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html

Even this specific example doesn't solve the whole problem (what if someone else adds to the chat, what event can animate the chat window to the bottom?) - so how best to implement this client-side action with volt?

Matt Thomas
  • 13
  • 4

1 Answers1

0

Well, one good thing to know about Volt is that it uses OpalRb for client-side workings. To run something like jQuery in Volt, I think it would be easiest to use an Opal wrapper, which allow access of libraries like jQuery with Ruby.

Using the opal-jquery wrapper, I would implement a jQuery animation like so:

panel_body = Element.find(".panel-body")
panel_body.animate({ scrollTop: panel_body.children.height }, speed: "normal")

EDIT:

Here is a fork of your project where I have implemented a fix for this issue that you can check out.

GDP2
  • 1,948
  • 2
  • 22
  • 38
  • Thank you this worked. For some reason I didn't seem to need the `require 'jquery'` line (only `require 'opal-jquery'`). I'm starting to grasp now that the line is blurred between controller and view with opal able to be used within the controller. – Matt Thomas Aug 05 '15 at 03:47
  • @MattThomas Glad to help :) – GDP2 Aug 05 '15 at 04:39