CODEWITHSUNDEEP
javascriptruby-on-railsrubyheroku
eduardothome
eduardothome

Reputation: 13

Javascript function not load on Heroku

a have a simple application wrote on Rails 4.2.3 and i use Heroku to deploy. I use bootstrap and it works fine after rake assets:precompile, but, i have one pure-javascript function on application.js, and works perfectly on localhost, but on heroku, simply doesnt work.

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

function getCEP() {
    if ($.trim($("#endereco_cep").val()) != "") {

      $("#lbcep").html(" Pesquisando...")
    <!-- JQuery que recebe o objeto serializado via ajax. -->
        $.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#endereco_cep").val(), function(){
      <!-- Atribuindo os valores para os componentes da página-->
    if(resultadoCEP["resultado"]){
        $("#endereco_tipo").val(unescape(resultadoCEP["tipo_logradouro"]));
        $("#endereco_endereco").val(unescape(resultadoCEP["logradouro"]));
        $("#endereco_bairro").val(unescape(resultadoCEP["bairro"]));
        $("#endereco_cidade").val(unescape(resultadoCEP["cidade"]));
        $("#endereco_estado").val(unescape(resultadoCEP["uf"]));
        $("#endereco_numero").focus();
       } else {
          alert("Cep não encontrado.");
       }
       $("#lbcep").html(" CEP")});
    }
    else {
        alert("Informe um cep.");
    }
}

I have only this javascript function in my project, and not work. I'm already set
config.assets.initialize_on_precompile = false on my config/application.rb and set Rails.application.config.assets.precompile += %w( *.scss *.js ) in my config/initializers/assets.rb. I clean and precompile again and still not work. Please, i need some help. I search in many topics and follow all the instructions but i still not resolve this. Waiting for help. Thanks!

Upvotes: 1

Views: 875

Answers (3)

eduardothome
eduardothome

Reputation: 13

Great, Rich! You're the man! I create a separated file called getcpf.js to function, and call the function using:

$(document).ready(function(){
  $("#endereco_cep").blur(function(){
    getCep();
  });
})

I see a recomendation to never put functions on application.js. So, i use a file especific for funciont. I compile and works perfectly! :) Thanks so much!

Upvotes: 0

Richard Peck
Richard Peck

Reputation: 76774

There are two issues you could have:

  • Precompilation
  • JS firing the function

--

Precompilation is the standard issues on Heroku (you can use Aytan Leobowitz's answer to fix it), however, I don't think it's your issue because you said your CSS works (bootstrap)...

For the record, if you wanted to precompile before pushing to Heroku, we do as the other answer suggests except using:

rake assets:precompile RAILS_ENV=production
git add .
git commit -a -m "JS"
git push heroku master

--

This would lead me to your other problem - JS is not firing.

Using javascript / jquery in a Rails application, there are several things you'll quickly discover. The first is that running a "naked" function just isn't reliable (which is what you have). You need to bind it to the document or an event:

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

var getCEP = function()  {
    if ($.trim($("#endereco_cep").val()) != "") {

      $("#lbcep").html(" Pesquisando...")
    <!-- JQuery que recebe o objeto serializado via ajax. -->
        $.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#endereco_cep").val(), function(){
      <!-- Atribuindo os valores para os componentes da página-->
    if(resultadoCEP["resultado"]){
        $("#endereco_tipo").val(unescape(resultadoCEP["tipo_logradouro"]));
        $("#endereco_endereco").val(unescape(resultadoCEP["logradouro"]));
        $("#endereco_bairro").val(unescape(resultadoCEP["bairro"]));
        $("#endereco_cidade").val(unescape(resultadoCEP["cidade"]));
        $("#endereco_estado").val(unescape(resultadoCEP["uf"]));
        $("#endereco_numero").focus();
       } else {
          alert("Cep não encontrado.");
       }
       $("#lbcep").html(" CEP")});
    }
    else {
        alert("Informe um cep.");
    }
}

$(document).ready(getCEP);

The above is your likely issue.

The simple fact you are relying on the event firing on load is not enough - Rails has turbolinks and some other complexity which prevents "naked" JS from loading off the bat.

Instead, you need to use $(document).ready... or, if using turbolinks $(document).on("page:load"... - binding the function to either an event with an element, or the document load events.

Upvotes: 0

AytanLeibowitz
AytanLeibowitz

Reputation: 529

You can try to precompile your assets locally.

Rails Asset Pipeline on Heroku

RAILS_ENV=production bundle exec rake assets:precompile
git add -A
git commit -m "Precompiled assets"
git push heroku master

Upvotes: 1

Related Questions