Issue:
I have an E-commerce application built on Spree 3.7 and Rails 5.2, Right now I am facing turbolink(version 5.2.0) issue in which I have implemented javascript for adding items to the cart but js method firing twice and a similar item is being added into cart twice.
I have included following js in head tag-
<script>
<%= javascript_include_tag 'spree/frontend/all' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</script>
I have tried 'data-turbolinks-track': 'true/false' but my issue solved when removed
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>.
I read about turbolink from 'https://github.com/turbolinks/turbolink'. According to me turbolink is loading javascript method twice.
Any suggestions on how it can be solved?
After comment here is my application.js file
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require activestorage
//= require turbolinks
//= require cable
//= require jquery-ui/widgets/sortable
//= require wishlist
//= require product
//= require cart
Per your comment, you probably have two versions of compiled assets locally. Try running rake assets:clobber to clear out the additional assets.
So basically I was able to solve the issue, according to Turbolink our javascript should be wrapped in
document.addEventListener("turbolinks:load", function () { ... }
Our spree functions like addToCartForm etc. works on $( document ).ready()
So I have overridden those functions and wrapped in turbolinks:load, now everything is working fine.
Related
am adding all my .js and .css files to precompile like this
Rails.application.config.assets.precompile = ['*.js', 'application.scss', '*.scss', '*.css.erb']
And including application.js in layout head section like this
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
even though some of the , js files not available at my views. I have a file called image-picker.js in that directory. which make a .imagepicker() function available at my views but it's throwing an error like this
Uncaught TypeError: $(...).imagepicker is not a function
But when i include that .js file for the page specifically using
<%= javascript_include_tag "image-picker" %>
it's working as expected. Why this is happening. Do I need to set anything else in the configuration? How to avoid including my assets at each page view??
Update
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require image-picker.js #tried but not working.
//= require_tree .
Update2
am using jquery-rails - 4.3.1 and jquery-ui-rails 6.0.1
which adding jquery-2.1.4.min.js to my assets. But when i use //= require jquery i think it's not including jquery to app.
When i tried adding it manually everything works properly,
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-2.1.4.min #now everything working fine. it seems a dependency problem.
//= require image-picker.js #tried but not working.
//= require_tree .
I would like to know what is the reason for this. thanks.
Very similar question you can find - here
try to add image-picker.js in application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require image-picker
//= require_tree .
I'm building a web app on ROR5 and the layout/design is all done, with the CSS/JS files finalized. But when I open the app, click on one link, and navigate through the website, the CSS fails to load. More specifically, the CSS is all messed up. For example, say I go from 'Home' -> 'Page A', then if I backspace to 'Home' again (or click the logo to navigate to 'Home'), the 'Home' page will be messed up. Only when I refresh the page, I would get the correct display.
At first I thought it was a cache problem, but soon discovered that this line is causing the issue:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
When I delete this line, the display issue is no longer present. However, all JS effects/JS-based plugins would not work. I have a text editor, a few jQuery animations and tab navigations, which all don't work when I delete that line.
+ of course, instead of just deleting the line, I also tried to simply disable turbolinks by doing:
<%= javascript_include_tag 'application' %>
and removing turbolinks from my Gemfile. This also didn't work.
My Gemfile includes:
gem 'turbolinks', '~> 5'
gem 'coffee-rails', '~> 4.2'
gem 'jquery-rails'
And the remaining GEMs are all standard gems for my frontend side (bootstrap, SASS, font awesome etc).
My application.js looks like this:
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require tinymce
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
And for reference, my application.html.erb contains a like the following:
<head>
<title>..</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag params[:controller] %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adobe Typekit Scripts -->
<script src="https://use.typekit.net/ovy4zfg.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
What could be the problem? Thanks.
I think the issue here is that you're loading in controller-specific stylesheets (<%= stylesheet_link_tag params[:controller] %>). Turbolinks will append new stylesheets, but will not remove those that are absent in subsequent page loads. So here is the flow:
User visits Home
Stylesheet for Home's controller loaded
User visits Page A
Stylesheet for Page A's controller loaded after the Home CSS
Home CSS and Page A CSS will remain in the head
If possible, include all your CSS in the application.css manifest file. If you have some controller-specific styles, try adding a class to the body, e.g.:
<body class="<%= controller_name %>">
Then you can scope your styles, e.g. for a pages_controller:
body.pages {
…
}
Alternatively you could add data-turbolinks-track="reload" to your CSS link tag:
<%= stylesheet_link_tag params[:controller], 'data-turbolinks-track': 'reload' %>
However, this will mean that you will only get the benefits of Turbolinks when navigating between pages that use the same controller. When navigating between pages that use a different controller, you will get a full page load. This is because Turbolinks will track the presence or absence of the CSS and reload if it has changed.
One last thing: it is generally a good idea to add 'data-turbolinks-track': 'reload' to your application.css so that if you release a new version of your CSS, the users on the site will be up-to-date when the change goes live.
Hope that helps
For people who came here with a slightly different problem:
When using different CSS files for different areas of your application (e.g. application.css for your regular app and admin.css for your admin area), Turbolinks fails to handle them properly when they do not live on separate (sub)domains.
So when /admin uses a different CSS file than the rest of the application, clicking a link to, say, /admin/posts and then using the back button to navigate back to /, the wrong CSS file will be used.
In this case, you need to set a root location for Turbolinks.
From the docs:
By default, Turbolinks only loads URLs with the same origin — i.e. the same protocol, domain name, and port — as the current document. A visit to any other URL falls back to a full page load.
In some cases, you may want to further scope Turbolinks to a path on the same origin. For example, if your Turbolinks application lives at /app, and the non-Turbolinks help site lives at /help, links from the app to the help site shouldn’t use Turbolinks.
Include a <meta name="turbolinks-root"> element in your pages’ <head> to scope Turbolinks to a particular root location. Turbolinks will only load same-origin URLs that are prefixed with this path.
To make the admin area under /admin from my example display the CSS correctly, include <meta name="turbolinks-root" content="/admin"> in the layout's <head>.
Tried the same thing, reinstall Webpacker and still for the error
Webpacker can't find application in C:/Users/Admin/friends/public/packs/manifest.json. Possible causes:
You want to set webpacker.yml value of compile to true for your environment
unless you are using the webpack -w or the webpack-dev-server.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
I am finding few ways to get my work routine good with Phoenix as I have with rails, There are some perspectives which I am looking in Phoenix are.
1: In rails, I have my controller and my view, also the CSS and JS files alongside, When I want to include CSS files only in one relevant view, I only do as
<%= yield :head %>
and In my View file, I only do
<% content_for :head do %>
<%= stylesheet_link_tag "views/index/landing.css" %>
<% end %>
That's it. My CSS file is only loading for my relevant view.
2: For JS, I have application.js file in which I included my other libs and in the end, I have admin.js in which I have included my every other file as
//= require jquery
//= require dataTables/jquery.dataTables
//= require jquery_ujs
//= require bootstrap.min
//= require admin/admin.js
admin.js.coffee file
#= require admin/sign_up.js.coffee
#= require admin/company.js.coffee
#= require admin/user.js.coffee
3: For every JS file What I am doing is, e.g for Signup view's JS file I have done as under, in the very end of the file,
window.initializeSignUp = ->
onSignUp()
after this What I only need in my sign up view is
<script>
$(document).ready(function () {
window.initializeSignUp();
});
</script>
Now it's only calling that method of Signup and everything is working fine.
On the other hand, I love Elixir it's a very good and lovable language to work in, BUT whenever I start project in it, I already got afraid of Brunch and how Assets are going to be handled.
for those who will read the question and will just downvote without even understanding the main issue here: Am a newbie to Phoenix for creating an APP with views and assets, etc.
I just need a clear and correct answer to work with Phoenix without using brunch or any web-pack solution, But a normal way, Is that possible in possible?
I believe your question has been answered here. The answer shows how to add page specific javascript but the same technique can be done for your css styles.
Here's a good explanation of how templates/views work in Phoenix.
<%= javascript_include_tag "application", params[:controller] %>
I added the above tag in my application.html.erb, but it seems my js files are not loaded according to controller. When i navigate to localhost:8000/sessions it does not load sessions.js
Rails now uses the asset pipeline. In app/assets/javascripts/application.js you can require all your of javascript files with "magic comments":
//= require_tree .
Your javascript can now be inside app/assets/javascripts/sessions.js or even app/assets/javascripts/sessions.js.coffee if you want to use coffeescript.
Note that this will require all Javascript files on every page, which is often a desired effect because the client can cache the javascript and thus only has to download it at the first request. For more information read the Rails Guide I linked to above.
You can load controller specific js files as follows
<%= javascript_include_tag "application", controller_name %>
So that, if you navigate to localhost:8000/sessions it will load sessions.js file. And it is not necessary to add //= require_tree . in application.js.
Prior to rails 3.1, javascript code that was common to the application belonged in application.js by default, and was loaded by javascript_include_tag :defaults
With the asset pipeline in rails 3.1, the application.js file becomes a manifest file, and it appears that code I put in it is not included in the result. Where is this javascript code supposed to be moved to now? Obviously, I could create any other name and make sure that it is included by the manifest, but is there a default location already expected by idiom?
I encounter the same problem in rails 3.1 rc6. I use javascript_include_tag :application instead
Look closer:
the code in application.js is rendered, it's just at the end of the resulting js file.
Example, try:
//= require jquery
//= require jquery_ujs
//= require_tree .
alert('foo');
the alert dialog will appear in all pages.