Javascript TypeError: Variable ist undefined

Question

Derzeit arbeite ich an einer Ruby on Rails App, und ich versuche, die unten JS mit der App arbeiten zu bekommen. Das erste Problem, auf das ich stieß, war, dass turbolinks 5.0 verhinderte, dass die Seite beim ersten Laden die JS geladen wurde, und dass ich die Seite aktualisieren musste, um die folgende JS zu laden. Ich habe etwas gegoogelt und bin auf this stackoverflow answer gestoßen, aber ich kann nicht scheinen, das JS richtig zu laufen zu lassen, ohne einen Fehler zu werfen. Jede und jede Hilfe würde sehr geschätzt werden.

orders.js

console.log('inside orders.js'); 

$(document).on('turbolinks:load', function() { 
// Your JS here 
var payment; 

jQuery(function() { 
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content')); 
    return payment.setupForm(); 
}); 

payment = { 
    setupForm: function() { 
    return $('#new_order').submit(function() { 
     $('input[type=submit]').attr('disabled', true); 
     Stripe.card.createToken($('#new_order'), payment.handleStripeResponse); 
     return false; 
    }); 
    }, 
    handleStripeResponse: function(status, response) { 
    if (status === 200) { 

     // return alert(response.id); 
     $('#new_order').append($('<input type="hidden" name="stripeToken" />').val(response.id)); 
     return $('#new_order')[0].submit(); 

    } else { 

     // return alert(response.error.message); 
     return $('#stripe_error').text(response.error.message).show(); 

    } 
    } 
}; 
}); 

Answer 1

Als Kommentar oben erwähnt, wurde das Problem im Zusammenhang mit denen die jQuery Anweisung in der JS lag. Ich habe das JS so umstrukturiert, dass es wie folgt aussieht und alles scheint jetzt zu funktionieren.

orders.js

console.log('inside orders.js'); 

$(document).on('turbolinks:load', function() { 
// Your JS here 
var payment; 

payment = { 
    setupForm: function() { 
    return $('#new_order').submit(function() { 
     $('input[type=submit]').attr('disabled', true); 
     Stripe.card.createToken($('#new_order'), payment.handleStripeResponse); 
     return false; 
    }); 
    }, 

    handleStripeResponse: function(status, response) { 
    if (status === 200) { 

     // return alert(response.id); 
     $('#new_order').append($('<input type="hidden" name="stripeToken" />').val(response.id)); 
     return $('#new_order')[0].submit(); 

    } else { 

     // return alert(response.error.message); 
     return $('#stripe_error').text(response.error.message).show(); 

    } 
    } 
}; 

jQuery(function() { 
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content')); 
    return payment.setupForm(); 
}); 
});