Coffeescript and jQuery not working using Ruby on Rails on a particular view

304
February 16, 2017, at 04:50 AM

I'm having a javascript issue with Ruby on Rails (4.1.4). It is only with one controller and I can't figure out why- does anyone have any idea? Thank you.

####This works :)
$(document).on "turbolinks:load", ->
  $('#redemption_amount').keyup updateWorth
  $('#redemption_amount').change updateWorth
 updateWorth = ->
    discount = ($('#discount').val() / 100)
    worth = $(this).val() * discount
    $('#redemption_worth').html(worth.toFixed(2))
#####

Here is the issue:

####This does not work :(
$(document).on "turbolinks:load", ->
  $('#purchase_amount').keyup updatePoints
  $('#purchase_amount').change updatePoints
  updatePoints = ->
        points = (Math.round($(this).val() * 0.92))
        $('#purchase_points').html(points)
####
Answer 1

Indentation defines the structure of your CoffeeScript code so if your indentation is off then your code is also off.

In the first case:

$(document).on "turbolinks:load", ->
  $('#redemption_amount').keyup updateWorth
  $('#redemption_amount').change updateWorth
 updateWorth = ->
    discount = ($('#discount').val() / 100)
    worth = $(this).val() * discount
    $('#redemption_worth').html(worth.toFixed(2))

the JavaScript looks like:

var updateWorth;
$(document).on("turbolinks:load", function() {
  $('#redemption_amount').keyup(updateWorth);
  $('#redemption_amount').change(updateWorth);
});
updateWorth = function() { ... };

so by the time keyup and change are called, updateWorth's value is a function and everything works fine.

In the second case:

$(document).on "turbolinks:load", ->
  $('#purchase_amount').keyup updatePoints
  $('#purchase_amount').change updatePoints
  updatePoints = ->
        points = (Math.round($(this).val() * 0.92))
        $('#purchase_points').html(points)

the JavaScript ends up like:

$(document).on("turbolinks:load", function() {
  var updatePoints;
  $('#purchase_amount').keyup(updatePoints);
  $('#purchase_amount').change(updatePoints);
  updatePoints = function() { ... };
});

Your indentation puts updatePoints inside the callback. When keyup and change are called, updatePoints's value is undefined because the updatePoints = function() { ... } part hasn't been reached yet.

Rules of thumb:

  1. Define things (in the code's line order) before you use them.
  2. Be very careful and consistent with your whitespace: if you're indenting two spaces in one place then indent two spaces everywhere.

You should be saying:

updateWorth = ->
  discount = $('#discount').val() / 100
  worth = $(@).val() * discount
  $('#redemption_worth').html(worth.toFixed(2))
$(document).on "turbolinks:load", ->
  $('#redemption_amount').keyup updateWorth
  $('#redemption_amount').change updateWorth

and:

updatePoints = ->
  points = (Math.round($(@).val() * 0.92))
  $('#purchase_points').html(points)
$(document).on "turbolinks:load", ->
  $('#purchase_amount').keyup updatePoints
  $('#purchase_amount').change updatePoints
READ ALSO
Link of React Router, update redux state before redirect

Link of React Router, update redux state before redirect

I have a Link component from React Router that looks like:

436
TweenJS multiple tweens on multiple targets

TweenJS multiple tweens on multiple targets

I am using Tweenjs and have the following issue;

430
How to run JavaScript in background with cordova?

How to run JavaScript in background with cordova?

I'm using this plug-in to make a service for the app to run in background:

526
Uncaught TypeError: $.plugin is not a function

Uncaught TypeError: $.plugin is not a function

I work with a CMS Template, the CMS was Updated but that shouldn't have anything to do with the javascript or the Template

516