Automatically Scroll To Bottom of Page On Button Click Using Javascript / jQuery and Coffeescript

I have a website with multiple pages that are shown in order, so I have a ‘continue’ button on the bottom of each page.  I wanted my site to automatically scroll to the bottom to show the continue button when the user was finished with the page.  I imagine there are many ways to do this, but here’s what worked for me. I knew how to scroll to a certain element on the page:

$('body').scrollTop($('#your_element').position().top);

but had trouble figuring out how to scroll to the bottom of the page. Here’s how I did it. Note the use of the animate function to make it nice and smooth.

Javascript:

$("html, body").animate({
  scrollTop: $(document).height() - $(window).height()
});

Coffeescript:

$("html, body").animate({ scrollTop: $(document).height() - $(window).height() });

It will probably work just using 'body' without 'html', but might depend on different browsers. I left it in just to be safe.

Credit here.

Want to learn more about Ruby on Rails?  Checkout OneMonthRails , what I used to get started in Rails. Best Rails course I’ve ever seen!

Use Bootstrap Modal as UI Alert Popup Dialog In Rails

I found a cool new gem to easily let you somewhat customize the alert dialog boxes in your rails app.  I started out using the jQuery UI dialog and attempting to customize it myself, but ran into a bit of complications.  I found the data-confirm-modal gem to be a great solution.

As the documentation says, add the gem to your gemfile and run bundle.  Then don’t forget to add it to your application.js file:

//= require data-confirm-modal

Basically it just makes all alert popup dialogs become Bootstrap modals in your rails app, such as when you delete stuff or anytime you want a confirm dialog.

Props to ifad for a simple and useful gem!

Screen Shot 2014-09-28 at 4.42.19 PM

Change or Set Form Input Value with jQuery, CoffeeScript

So this is pretty basic, but it took me 10 minutes of Googling to figure it out.  If you need to specifically assign a value to a form input, here is how to do it via coffeescript:

$(".submit").on "click", ->
  email = $('input[name="user[email]"]').val();
  $('.hiddenEmail').val(email);

The key is the .val() method. To get the value of an element, you call the .val() method without passing in any parameters.

email = $('input[name="user[email]"]').val();

To set the value of an element, you pass in the value you want into the .val() method.

$('.hiddenEmail').val(email);

Some credit here.

Alert Confirm Dialog in CoffeeScript

I was trying to figure out how to create a confirmation alert dialog in coffeescript. Turns out like almost everything in coffeescript, its super easy.

$(".mybutton").on "click", ->
  if confirm "Ask a question?"
    # if answer yes
  else
    # if answer no

credit here

CSS or Javascript Assets not Working on Heroku Production

I had a weird issue where on my local environment, everything worked fine, but on production when pushed to heroku, my javascript and css files weren’t getting loaded.

Now I don’t fully understand the asset pipeline and if/how it was involved in this error, but here’s what worked for me.

Simply manually precompile assets prior to pushing to heroku:

bundle exec rake assets:precompile

You will notice that this create a bunch of files.  Then you need to commit to git, and push to heroku again.

git add .
git commit -am "message"
git push origin master
git push heroku master

If you know a good explanation of why this is necessary, please let me know!

Credit here.

Redirect to a link with CoffeeScript

So while using CoffeeScript in my app, I wanted to redirect to another page in my rails app on a button click.  Now I didn’t want to make the button a link by itself using the “link_to” tag because I only wanted the button to redirect depending on certain criteria in Javascript (or coffee script).

As usual with CoffeeScript, its simple easy and elegant. To redirct to a link:

  $(".button").on "click", ->
    location.href = "your_rails_page"

This will redirect to
current_path/your_rails_page

Credit here

Fix CoffeeScript Unexpected Indent Error in SublimeText

Getting this

error: unexpected INDENT

in my rails app related to the coffeescript was very frustrating, and difficult to debug because all the indentation in my code appeared to be correct.  It actually had to do with our my text editor, Sublime Text, was handling tabs and spaces.

To fix this, go to View -> Indentation and check Indent Using Spaces and Convert Indentation to Spaces.

Credit here.