I'm working on a Rails 5.2 app with Turbolink installed by default. I understand that Turbolink does not reload all assets when navigating through a site so some JS components of the site stop working until I manually reload the page. In my example the navigation dropdown and save button on the edit post page doesn't work. I've tried removing Turbolink from the project altogether and this seems to fix the issue but know that I need Turbolink for performance reasons in production. To my understanding, this is the reason turbolink comes as default with Rails after version 4. The solution I' found online is to add this code below to my JS code:
document.addEventListener("turbolinks:load", function() {
my_func();
})
The problem I have with this solution is that I don't know exactly how to wrap my code with that line. I'm working with a Bootstrap theme that has 4 JS files. The smallest of these files has 200 lines and has various functions. How to do you fix this Turbolink issue when using Bootstrap themes? Do you wrap the solution around the entire javascript file?
Do you need Turbolinks for performance?
Generally, good web caching (304 for assets), defer and async for scripts, etc. will cause a browser to behave almost like with Turbolinks enabled.
But in general, if your theme and/or bootstrap (I haven't used it) doesn't have a single init function, but every single element is initializing itself, then you're probably in for a rough ride.
I would look through the prettified version of the theme (or documentation) to see if there is a general init function you can call.
Hope this helps.
Related
I have a rails application which makes use of turbolinks. I am happy with everything that turbolinks do except that I have a specific javascript file in assets folder which I want turbolinks to ignore.
I have tried adding data-turbolinks="false" and it works but I am looking for a way to avoid putting this on every link that requires this.
Removing turbolinks works as well but the rendering of all the pages slowed down quite a bit.
I have tried the solution on here as well Re-rendering specific js file with turbolinks enabled
but its not working well and the javascript is really long.
Any advice would be appreciated thanks!
Does anyone tried to play with async: true for js includes in Rails? I mean it works great but just if you are not using jQuery. If you do, then you could face some strange effects like "$" is not defined and etc. There is plenty of articles how to avoid that, but all of them seems to be done with no Rails in mind. For example, this one: http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader
Seems like I have to move jQuery from applicaction.js - means out from being putted into one big file with other JS I have.
Just wonder is there some "rails-way" of loading js asynchronously since Google is strongly recommended to do that (it is affected a page load speed a lot, and as a result - your Page Rank)?
This is a browser issue, not a Rails issue. In short, you can't do this on most browsers. This will cause a dependency error, which is what the error points to. One solution is to add the dependency in a file with all the dependent code.
However, this problem has been solved in ES6, using JavaScript imports. There is a guide on how to implement these imports in another answer here. See How do I include a JavaScript file in another JavaScript file? for that info.
I have a new project with the following components in use:
Node.js (v0.10.37)
Express micro framework
Jade templating engine
Angular.js (latest)
Material design library (material.angularjs.org)
Jquery
I have an issue when I do browser reload (hitting the browser refresh button). I am not using any of the Angular.js routing capabilities. I am using the Express router and I have a route for every page.
When I try to refresh, a page build with this components, sometimes (1 of 20 reloads) the AngularJS just doesn't run without any console errors.
The issue is more common when I navigate between routes like:
I am on localhost:3000/index and I go in localhost:3000/about
In this case is more likely to occur this issue.
EDIT: I am not using any of the AngularJS routing capabilities.
EDIT: I also tested the DOMContentLoaded wrapping solution.
EDIT: I attached a plunker but the issue doesn't reproduce. I think it has something to do with the server too. The plunker is really close to reality.
ng-app="StarterApp"
See the plunker :)
EDIT: http://plnkr.co/edit/Vi1AQxNxJTDBf4B1ZEhr?p=preview
EDIT: If you encount the error on plunker please tell me.
EDIT: I also tried to activate: $locationProvider.html5Mode(true);
EDIT: I also found that this occurs when the server and computer (running on localhost) is really stressed. (82% RAM - 1 CPU core at 99%)
I also tracked the requests and I found that the files are loaded correctly on main requests but the requests done in Angular (Ajax requests) doesn't fire.
I also installed some Chrome AngularJS debugging plugin and it doesn't run either when this occurs.
This happens on all my pages sometimes, so I don't think that some code will be useful.
To fix this I reload again and sometimes I reload 2 times to fire up the Angular.JS.
This are the following cases:
When it is working
The interface
The console
When it is not working
The interface
The console
It really annoys me. I will continue investigating this issue but I will really appreciate any help.
Evrika!
I found the problem. Thank you all for support.
It was a problem about angular.js debugging chrome/firefox extensions.
The Ng-Inspector loads on every load a script ng-inspector.js and in this script it is a controller that deals with $state service and declare how to load the user modules in order to push debugging data into the plugin.
Somehow this loading configuration messes with my loading configuration.
The code was well-written but I didn't thought about this.
So if you encount this problem make sure that your debugging plugins (ng-inspector and angular batarang) don't interact with your business logic inside your project.
I made some stress testing to make sure that this issue doesn't occur anymore.
Server load
Now everythink is ok.
I followed the instructions that were given in the Facebook Developers page in order to include a like box in my Rails 4 application. It always worked for me great in previous apps, but for some reason, in the current app I need to refresh the page after redirecting to it in order to make the like box show up.
Anyone manage to encounter this problem and found a solution?
Do you use turbolinks gem in this project? It is known to cause problems like that. Have a look at offcial solution http://reed.github.io/turbolinks-compatibility/facebook.html or see what worked for other people here Facebook SDK and rails 4 Turbolinks
If you're not using turbolinks, please add some info about what js libraries are you using, most likely one of them is to blame.
I am building a new template from the ground up for an existing site that uses the menu item type iframe-wrapper to display external content.
My template uses a bit of jQuery which works fine on all pages I have checked so far, except for those using the iframe-wrapper. On those pages joomla does not seem to include any of the js it usually does (jQuery, mootools, joomla stuff). Since I need jQuery my scripts break.
I could probably work around that by hardcoding jQuery into the template. Even ignoring all the problems that would most likely cause it solves only part of my problem. I use a module to include a bit of inline js to initialize a countdown so the end-date can be configured from the backend. That script is not included either, infact the whole module is missing in the frontend (or at least its container).
I am quite the novice with regards to joomla so this might be an obvious mistake on my end but how do I get joomla to include the js it usually does when not displaying an iframe-wrapper?
Got it to work finally:
JHtml::_('jquery.framework');
This line added to the template ensures that jQuery version shiped with Joomla is included and only loaded once.
I still don't know why jQuery was only missing from one specific pagetype rather than all of them or none, but it's working now.
If the iFrame is not part of the Joomla website and not part of the Joomla environment (which is the case 99.99% of the times), you will need to re-add the JS files there manually. There's no other way for doing this.