JavaScript works fine both locally and production on Chrome, but when I try in Safari, it doesn't. I would think the solution would be to enable JavaScript on Safari, but I do have it enabled, and it's working locally on Safari. It just doesn't work on production. I would think there's a problem with how I'm pushing up to production, but my production environment is working on Chrome.
I'm using Rails with jQuery Turbolinks.
My application.js:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require social-share-button
//= require zeroclipboard
//= require google_analytics
//= require turbolinks
//= require_tree .
A sample JS file that isn't loading correctly:
$(document).ready(function() {
var referLinkClip = new ZeroClipboard($("#referral-text-button"))
var referCodeClip = new ZeroClipboard($("#referral-code-button"))
var embedClip = new ZeroClipboard($("#embed-text-button"))
alert('foobar');
$(".copy-button").hover(function(){
$(this).css('background-color', '#7b7b7b');
}, function(){
$(this).css("background-color", '#949494');
});
$(".copy-button").click(function(){
$(this).css('outline', 'none');
$(this).css('background-color', '#2d3538');
setTimeout(function(){
$(this).css('background-color', '#949494');
}, 100);
});
});
My view using this JS (HAML):
%button#referral-code-button.plan-show.round-corners-8px.col-md-2.referral-links.copy-button{:'data-clipboard-target'=>'referral-code'}
Copy code
.plan-show.round-corners-8px.col-md-8.referral-links.light-text
Your affiliate code:
%span#referral-code.medium-text= "#{current_user.affiliate_code}"
This all works fine in Chrome locally and on production, but just not on production in Safari. I've compiled my assets with bundle exec rake assets:precompile, and it makes no difference.
Any ideas? I'm stumped.
Edit:
More info that may prove useful... Recently, even on Chrome, I've had trouble getting the JS to load properly unless the page is refreshed. In the JS file I provided, the $(".copy-button").click function works (button changes color), but neither the $(".copy-button").hover works, nor do the ZeroClipboard objects initialize. I'm including the JS in my application.html head, with =javascript_include_tag 'application'
I encountered a similar issue (see Safari iOS not loading Javascript file?) and found that the reason was Safari automatically sandboxing (blocking all JS execution) on requests done using HTTP/0.9.
For more details check out my answer in the other thread.
Related
I'm trying to initiate a JS file when clicking on a link "link_to" in my rails app.
I ensured the the asset pipeline is working correctly by testing with
$(document).ready(function() {
alert("test");
});
and the alert popups without a problem.
However, the script only loads when I refresh after the page is loaded. I've tried the code below without any luck but as I said, it works once the page is reload.
var ready;
ready = function() {
//My JS Code
};
$(document).ready(ready);
$(document).on('page:load', ready);
I have the Turbolinks gem file complied Gem file below
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require jquery.slimscroll
//= require app
//= require zopim
//= require turbolinks
I'm sure it's something small I'm missing. I've seen examples using coffee script but I don't know enough about it to use it at this time.
Edit:
While monitoring Network under Chrome Dev tools, I noticed that none of the JS load until I hit F5 to reload the page but I don't seem to have problems with the other scripts. This might be a separate issue.
maybe try this ?
$(document).on('turbolinks:load', ready);
$(document).on('turbolinks:load', function() {
//My JS Code
})
This should work for you.
I have a js code which should add a class to all images within an element with a class:
$(document).on('turbolinks:load', function() {
$('.blog-article img').addClass('img-fluid');
});
View where it should work looks like:
<div class="blog-article">
<p><img src="http://image_address..." alt=""></p>
</div>
in development environment it works perfect. But in production environment this code does not work although I can see it in assets using browser console:
$(document).on("turbolinks:load",function(){$(".blog-article img").addClass("img-fluid")});
Any ideas?
Thanks!
PS. application.js file:
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
$(document).on('turbolinks:load', function() {
$('.blog-article img').addClass('img-fluid');
});
PPS. And interesting moment - when I see in console in production, js code looks like this:
and it has extra spaces, so it might be the causing reason. But when I rename slass replacing - with _ or removing it or leaving just .article, it still has extra spaces in production:
.blog- article
.blog_ article
.blog article
. article
And I have everything correct in development (as described above).
And the interesting point - if I copy the code from console, these "extra spaces" disappear.
I see you're using bootstrap. Bootstrap 4 requires 'tether' to work without generating errors. And because compiled javascript is compressed to only one row, all javascript stops working if you get errors :)
Does it work better if you install Tether?
https://github.com/twbs/bootstrap-rubygem/blob/master/README.md#installation
I would recommend you initiating the .js.coffee as following
jQuery ($) ->
$(document).on "turbolinks:load", ->
Okay, so I installed this gem:
https://github.com/bigtunacan/rails-jquery-autocomplete
And configured it and it works really well, I even used the CSS from one their examples on my web app for autocompletion and it works locally.
Problem was after I pushed to github, I tried pushing to heroku and heroku kept aborting rake assets compilation because of invalid punc. My application.js file is really small and I don't see any errors :/
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require bootstrap-sprockets
//= require highlight.pack
//= require turbolinks
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.search-query').bind('railsAutocomplete.select', function(event, data {
$('.search-me').trigger('click')
});
});
jQuery(function($) {
$("tr[data-link]").click(function() {
window.location = this.dataset.link
});
I do have other coffeescript files but those are all empty execept for one listings.coffee
$(document).ready(ready);
$(document).on('page:load', ready);
But I don't think this is causing a problem either.
I've been trying for a week to get autocomplete to work, so I've tried adding multiple libraries and css files to go with them, could that possibly be the problem?
EDIT: If anyone needs to know the site, it's rpastie.xyz ( it's just like a pastebin ) and here's my github repo for it: https://github.com/ilovemysillybanana/pastie I just noticed my repo says it's 72% javascript now because of that library I added, it's huge.
EDIT:
The error I get when I checked the javascript developer console is this:
application.self-1a1712b70bebadf78204351833a15e6960033fd69d5422f3985a596223711942.js:30 Uncaught SyntaxError: Unexpected token {
I assume this means there's an issue on line 30, I've checked but it looks fine to me I don't really understand it.
http://pastebin.com/T1bXxMcy I put it on pastebin, but only a small part of it(only first 50 or so lines, most are comments or white space).
I'm using the free tier of Heroku, if anyone is wondering. I definitely want to undo the last commit I did but I really don't wanna mess things up worse it added all the assets to git and heroku and now the project is huge.
I am building an app on my local machine. When I precompile and run it in production mode, the compiled javascript stops working. Specifically, I have javascript in one coffeescript file and application.js, both in the assets folder. All other javascript (i.e. jquery in ajax forms, etc) continues to work, which is why I think it must have to do with compilation.
Here is my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require jquery-ui/dialog
//= require autocomplete-rails
//= require dresssed
//= require raphael
//= require morris
//= require best_in_place
//= require_tree .
$('.label-stock-health').popover({ html : true});
$(document).keypress(function(e) {
if ($('.search-bar').length){
if($(".search-bar").is(":visible")) {
} else {
$(".search-bar").show();
$("#q_name_cont").focus();
}
}
});
$("#spinner").hide();
$(document).ajaxStart(function() {
$("#spinner").fadeIn('slow');
}).ajaxStop(function() {
$("#spinner").hide();
});
$(document).ready(function() {
$(".show-search").click(function(){
if ($('.search-bar').length){
$(".search-bar").toggle();
}
});
$(".best_in_place").best_in_place();
});
This functionality still works in development mode. Additionally, if I hard code the javascript into my layout template, it will work. But without the hardcoding, it does not.
Any advice on what might be the culprit? If not , what is the best way to go about debugging this?
UPDATE #1
The only two errors I am seeing in the Javascript console of Chrome developer tools are posted below. They also show on my localhost development instance, where my javascript functionality is working in full.
Uncaught Google Maps API is required. Please register the following
JavaScript library
http://maps.google.com/maps/api/js?sensor=true.(anonymous function) #
application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9t.(anonymous
function) #
application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9(anonymous function)
# application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9 variants:565 GET
http://www.example.com/bootstrap/glyphicons-halflings-regular.woff2
404 (Not Found)
I did wrote to you in upwork.com how ever here it is... If it is working in local host but when uploaded online stops working than it is permissions problem. I have encounter same problems in godady and blue host. Try playing with permissions. For (on blue host) worked permissions to be set at 5 5 4. or 5 5 5 I did not remember correctly. How ever delete all and reupload with new permissions once you figure out what they should be.
The culprit here is the popover line, you will need to include the popover plugin if you want to use it. Comment it out and deploy your code, it will start working again.
I've just sent you a message on upwork as well, but you should check if removing turbolinks from your application.js files resolves the issue:
//= require jquery
//= require jquery_ujs
//= require turbolinks ** remove this line as turbolinks interferes with javascript occasionally.
//= require_tree .
Please include another file name custom.js and updated
$(document).ajaxStart(function() {
$("#spinner").fadeIn('slow');
});
$(document).ajaxStop(function() {
$("#spinner").hide();
});
This is likely a simple case of bringing external scripts with dependencies into Rails.
I'm trying to get my Adobe Edge generated Animations to work within my Rails app and the first step is to include all of Adobe Edge's generated js files, but so far I'm just getting a bunch of 404 Not Found Errors for all of the Edge files I've included in the Application.js file.
Here's my Application.js file
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require california_internet
//= require hero_edgePreload
//= require edge_includes/edge.1.5.0.min
//= require hero_edge
//= require hero_edgeActions
Here is how Edge's Preloader.js is trying to find some of the files...
aLoader=[{load:"edge_includes/jquery-1.7.1.min.js"},{load:"edge_includes/edge.1.5.0.min.js"},{load:"hero_edge.js"},{load:"hero_edgeActions.js"}]
The way I got this to work was change hero_edgePreload.js to hero_edgePreload.js.erb
And change:
aLoader=[
{load:"edge_includes/jquery-1.7.1.min.js"},
{load:"edge_includes/edge.1.5.0.min.js"},
{load:"hero_edge.js"},
{load:"hero_edgeActions.js"}
];
To:
aLoader=[
// {load:"edge_includes/jquery-1.7.1.min.js"}, Already required in application.js
{load:'<%= asset_path("edge.1.5.0.min.js") %>'},
{load:'<%= asset_path("hero_edge.js") %>'},
{load:'<%= asset_path("hero_edgeActions.js") %>'}
];
You can remove any Adobe Edge JS files from your requires in application.js too.
You'll have to add asset_path to any images in hero_edge.js and change it to hero_edge.js.erb too.
If there's an easier way, I'd love to know it :)
The solution of Michael Johnston of changing Edge's aLoader paths works, but gives errors. While on localhost, I would get Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. on random basis, while after deployment to Heroku at every page refresh.
Additionally, my app depends on jQuery already in higher version - therefore adding the one from Edge animation could possibly cause conflicts.
After trial and error(s) I decided to use this solution:
place the whole animation into /public/edge folder
put the animation into an iframe: <iframe class="animation-container" src='/edge/animation.html' />
Not the most elegant one, but certainly saves a lot of headaches.