Javascript function not load on Heroku

Question

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!

Richard Peck · Accepted Answer · 2015-11-17 09:45:35Z

1

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

edited Nov 17, 2015 at 9:45

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

answered Nov 17, 2015 at 5:25

AytanLeibowitz

5292 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gagan Gami Over a year ago

you can also do at point 2 git add . and 3 as git commit -a -m "Precompiled assets"

Richard Peck · Accepted Answer · 2015-11-17 10:57:03Z

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.

eduardothome · Accepted Answer · 2015-11-18 22:03:00Z

0

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!

answered Nov 18, 2015 at 22:03

eduardothome

133 bronze badges

Collectives™ on Stack Overflow

Javascript function not load on Heroku

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related