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.
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();
I have a javascript function, "loadFramework()" that modifies an HTML document. Specifically, it repeatedly runs the jQuery command $("#element-id").load("document/name.html"), which injects the HTML in document/name.html directly into the element with #element-id.
Originally, I ran loadFramework() in a script in the document's header. However, since then I've realized that the function fails if the page has not loaded yet, since it relies on there being an element with #element-id.
I can't figure out how to get this function to run when it should. A simple solution seemed to be setting it to be the document.onload function:
document.onload = function() {
loadFramework();
}
But in this case it never seems to run at all.
How do I make sure a header function runs only after the document has loaded?
You should use window.onload if you are looking for a vanilla JS option
window.onload = function() {
loadFramework();
}
Jquery load takes additional argument "complete". You can run the javascript there. So the code would be:
$("#element-id").load("document/name.html", function(){
loadFramework();
});
You can also use $(document).ready(function{loadFramework()}) inside the html you are loading.
If you want to execute the loadFramework() method after "document/name.html" is loaded, I would suggest the following code.
$(function() {
$("#element-id").load("document/name.html", function(){
loadFramework();
});
});
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 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
});
I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.
This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready
I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.
Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();
Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>