I have a custom js file in app/assets/javascripts.
This is the js file:
//app/assets/javascripts/contacts.js
//$(document).ready(function() { //I've already tried with this method
$(window).load(function() {
alert("foo bar")
});
I require the file contacts.js file in the application.js file.
If I inspect the html page I see the js file loaded correctly, but the message is not shown.
If I reload the page (by pressing f5), the message is correctly show.
When the page is loaded the javascript is loaded (I can see it in source html code in the browser) but not executed.
Can you help me?
SOLUTION:
Rails 4: how to use $(document).ready() with turbo-links
$(document).ready(function() { } # Not working with turbo-links
From
Turbolinks overrides the normal page loading process, the event that
this relies on will not be fired. If you have code that looks like
this, you must change your code to do this instead:
$(document).on('ready page:load', function () {
// you code here
});
Another question
With Turbolinks version 5 (starting from Rails 5) you need to use:
$(document).on("turbolinks:load", function () {
// YOUR CODE
});
Related
I need some help. I'm a beginner on this. My javascript doesn't seem to be loading after a user clicks on a link_to and I think the issue might be compatibility with Turbolinks. Any one can help me on this? Below is my script. Thanks in advance!
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
$(".navbar-nav").clone().prependTo("#off-canvas");
$(function() {
$(document).trigger("enhance");
});
// document ready
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
// window load
});
This solution suggested in another question doesn't work for me at all;
$(document).on('turbolinks:load', function() {
try changing the line: (document).ready(function() {
to: $(document).on('turbolinks:load', function() {
if you have already tried that and it does not work, you may need to reinitialize/load the js in the final js.erb file.
You can do this a few ways. Here is one:
Attach your javascript to the window so that it is globally available.
Call that function in your js.erb like this: Global.some_js_function();
My rails app load application.js functions only when im refresh the page,in other case (site surfing,AJAX operations) it doesent.So how to load application.js every server-client actions?Every function pulled inside the
$(document).ready(function() {
$(document).ready(function() { will not work properly with Turbolinks enabled since it'll be triggered just once, you want to use this instead:
var ready;
ready = function() {
...your javascript goes here...
};
$(document).ready(ready);
$(document).on('page:load', ready);
See this link for more information: Rails 4: how to use $(document).ready() with turbo-links
I'm using a *.js.erb in my Rails-App, which reacts to a clicked Link.
But when I render my page, by getting there via a link_to, I have to refresh the Page, to make it work. Is there any Trick, how I can make this work?
Here is a very simplified version of my code:
$(document).ready(function(){
$('#toright').click(alert(">> was clicked"));
});
$(document).ready(function(){
$('#toleft').click(alert("<< was clicked"));
});
$(document).ready(function(){
$('#save').click(alert("save was clicked"));
});
$(document).ready(function() {
alert("The document is ready!");
});
After the site is rendered, it does not show my function, but when I type the URL into my address-bar, it works.
Some EDITS:
I'm using Rails 4.0.1
I have the js.erb in my assets folder
Ok. I've put them all in one $(document).ready, but I still have to reload my file for making my JS work.
UPDATE:
So I have edited my application.js to contain
$(document).ready(function(){
alert("The document is ready!");
$('#toright').click(alert(">> was clicked"));
$('#toleft').click(alert("<< was clicked"));
$('#save').click(alert("save was clicked"));
});
and put my js.erb to be only .js in my assets/javascripts folder.
But anyway, it just won't work until I have refreshed the page.
ready is a jQuery function, thus ensure you to use and include properly the jQuery library in your Javascript.
Furthermore, if you don't need to exchange data between your controller and your Javascript, I advice you to put your Javascript in your asset folder, for instance: /app/assets/application.js.
This is possible only for the Rails applications 3.x and 4.x.
Best regards.
Since the introduction of turbolinks in rails 4 you can use:
$(document).on('turbolinks:load', function() {
// Events
}
Instead of:
$(document).ready(function(){
// Events
}
I would like to hide an element in a page on my Rails site, but I'm not yet that familiar with Jquery or Coffeescript.
This code works in the console:
$('#TheButton').click(function(){$('#TheText').toggle()});
I then converted it to Coffescript:
$("#TheButton").click ->
$("#TheText").toggle()
But it doesn't work on my Rails page. How do I fix it? Below is the generated javascript file:
(function() {
jQuery(function() {
# stuff...
});
$('form').on('click', '.add_fields', function(event) {
# stuff...
});
$("#TheButton").click(function() {
return $("#TheText").toggle();
});
}).call(this);
If your JS files are embedded at the top of your layout, every file you have must be wrapped in that jQuery call
jQuery's selectors don't work until after the page is loaded. You'll need to make sure your code runs after the document is ready:
$(document).ready ->
$("#TheButton").click ->
$("#TheText").toggle()
# other stuff you want to happen after document load
Add
$ ->
Before your code to ensure it runs after the DOM is loaded.
Am currently using head.js to defer loading of js files for my website. Am using colorbox in my project. The problem is that at times, the colorbox doesnt fully load (it opens the colorbox in a new page rather than in a dialog), but when i do several refreshes, it finally loads.
I guess it might be that the page content that is meant to open the colorbox dialog gets loaded even before colorbox js files are fully loaded by head.js. Is this the actual cause?
I would want to have colorbox display correctly each time without need for a refresh.
How do I keep the colorbox page code to execute only after head.js finishes loading all its dependent files?
thanks. nikk
Put your colorbox html code in a div.
<div id="colorBoxDiv" style="display:none;">
</div>
In the last line of head.js, add this code:
$("#colorBoxDiv").html($("#colorBoxDiv").html()).show();
head.js had a lot of different options how to do that. you can run callback function when needed files loaded, or use test feature api call.
For example:
// queue scripts and fire a callback when loading is finished
head.load("file1.js", "file2.js", function() {
// do something
});
// same as above, but pass files in as an Array
head.load(["file1.js", "file2.js"], function() {
// do something
});
// you can also give scripts a name (label)
head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
// do something
});
// same as above, but pass files in as an Array
head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
// do something
});
// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
// do something
});
// Actually if no label is supplied, internally the filename is used for the label
head.ready("file1.js", function() {
// do something
});
More in documentation