Javascript doesn't get executed the first time when I access a page from a link

StackOverflow https://stackoverflow.com/questions/23436210

Question

There's a template in my rails application that doesn't execute the javascript code the first time when it is loaded by clicking on a link in my home page. It only happens when it's accessed from the link and only the first time. I don't know why is this happening. Any help? Here is the code.

Home page: 

#app/views/static_pages/home.html.erb
#...
<%= link_to "Nofify an absence", new_cancellation_path %>

this is the Javascript file:

//app/assets/javascripts/cancellations_new.js

var validateDateTime = function(){
// some other code that returns true or false
  }
  $(document).ready(function(){
    $("#new_cancellation").submit(function(event){
      event.preventDefault();
      if (validateDateTime()) {
        alert("Some alert");
      }
      else { 
        // some more code 
      }
    }); 
  });

And the template where the javascript should be executed: 

#app/views/cancellations/new.erb

<%= provide(:title, "Notify an absence")%>
<div class="row">
<div class="span3 offset4">
  <h3> Notify an absence </h3>

  <%= form_for @cancellation, :id => "new_cancellation" do |f| %>
    <%= render 'shared/error_messages' %>
    <% # some form elements...%>
    <%= f.submit "Send", class: "btn btn-primary"%>        
  <% end %>
</div>
</div>

I have already tried adding //= require cancellations_new to the app/assets/javascripts/application.js with no improvement

EDIT

I did some research, following @radubogdan lead and I found that Turbolinks is responsible for the "strange" behavior of Javascript. If you have Turbolinks activated in your application, the <a> elements get loaded from an Ajax request, and then the content is used to modify the <body> of your HTML. Since the way the DOM is loaded is not the usual one, the code written inside of

$(document).ready(){...}

won't work unless the page is fully reloaded (for example refreshing the browser). If you want your Javascript to run as usual, you might have to change your

$(document).ready(){...}

to

$(document).on("page:change", function() { // some more code. });

You can find some more info about this topic here
more

Was it helpful?

Solution

I think turbolinks is the problem. Did you try to deactivate it?

Remove it from application.js and from layout.html.erb where you use stylesheet link tag.

If it works without turbolinks, then you should checkout how to use

$(document).on('page:load', .....)

Thanks

OTHER TIPS

just add in your application.html.erb

<body data-no-turbolink="true" >
  # your content
</body>

OR

add this to your gem-file

gem 'jquery-turbolinks'

BOTH WILL WORK AS PER YOUR EXPECTION.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top