CODEWITHSUNDEEP
javascriptruby-on-railsruby-on-rails-4
Joel Grannas
Joel Grannas

Reputation: 2016

Rails 4 app... in development environment javascript not firing unless page is refreshed

So I am having an odd issue with my first rails4 app where my page javascript is not firing unless I reload the page.

This is true for both my asset pipeline JS and also inline with content_for JS.

in my /assets/javascripts/cars.js file:

$(function(){
    $("#car_car_make_id").on("change", function(){
        //SET MODELS
        $.ajax({
            url: "/car_makes/" + $(this).val() + "/car_models",
            type: "GET",
            dataType: "json",
            cache: false
        })
        .done(function(data) { model_list(data) })
        .fail(function() { alert("error"); })
    });
});

function model_list(data) {
    $("#car_car_model_id").empty();
    $.each(data, function(i,v){ 
        $("<option />").val(v.id).text(v.name).appendTo("#car_car_model_id");
    });
    //ON COMPLETE SHOW
    $("#car_model_div").show();
}

inline in page with content_for:

<% content_for :head do %>
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('yt_vid', {
            height: '390',
            width: '640',
            videoId: '<%= @timeslip.youtube_id %>'
        });
    }
</script>
<% end %>

Both of these only fire if i refresh the page.

For example, if i click a link to the page with the youtube video it will not load. but if I refresh it will. Same with the asset pipeline script, it only makes my ajax call if i reload the page first.

Upvotes: 5

Views: 2445

Answers (4)

Marino
Marino

Reputation: 116

Same problem for me in a Rails 4 and solves it the solution of rmosolgo.

First add jquery-turbolinks gem

gem 'jquery-turbolinks'

then 

bundle install

Add to application.js (as I saw at https://github.com/kossnocorp/jquery.turbolinks)

//= require jquery
//= require jquery.turbolinks
.
.
.
//= require turbolinks

And works perfectly!! Thanks!

Upvotes: 3

Chun Yang
Chun Yang

Reputation: 2601

A workaround, not a real solution: use target='_blank' for the url directed to that page, js will be loaded and fired correctly without extra gem.

Here is the same problem of mine:

I used a different approach to add page-specific js in the head, like this
<%= javascript_include_tag "js_for_a" if
controller_name == "c" && action_name == "a" %>
In js_for_a.js, I have something like this:
$(function(){...})

When the page is requested from a page not containing "js_for_a", this js file will not be loaded.

After I install gem 'jquery-turbolinks' and add //= require jquery.turbolinksin the right place, the js will not load. But if cached by browser before, it will be fired.

Anyone has a solution?

Upvotes: 0

Almaron
Almaron

Reputation: 4147

The simplest solution by now is to use the jquery-turbolinks gem. Just add it to your Gemfile, run bundle install and then add //= require jquery.turbolinks to your application.js file right after the jquery requirement.

Btw, it's best to move the turbolinks requirement to the bottom of that stack.

Upvotes: 1

rmosolgo
rmosolgo

Reputation: 1874

looks like a side effect of the new Turbolinks feature. When you click a link, the page isn't being reloaded -- it's just having its <body> loaded by an AJAX request. So:

In the first case, the $(function{ ... }) isn't being run because document.ready is only fired on the first page load, not reloading the body.

In the second case, the <head> isn't reloaded with turbolinks, just the body. So you're left with the old <script> and it isn't rerun!

Check some of the options for turbolinks, like jquery.tubrolinks.

Upvotes: 7

Related Questions