Menu
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
978
On the web browser menu click on the "Edit" and select "Preferences". In the "Preferences" window select the "Security" tab. In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox.
Approach: We can use window. location property inside the script tag to forcefully load another page in Javascript. It is a reference to a Location object that is it represents the current location of the document. We can change the URL of a window by accessing it.
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
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
