I wrote this function in app/assets/javascripts/expand.js
$( document ).ready(function() {
var open = $('.toggle-expand'),
a = $('ul').find('a');
open.click(function(e){
e.preventDefault();
var $this = $(this),
speed = 500;
if($this.hasClass('active') === true) {
$this.removeClass('active').next('.expandable').slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active').next('.expandable').slideDown(speed);
} else {
a.removeClass('active').next('.expandable').slideUp(speed);
$this.addClass('active').next('.expandable').delay(speed).slideDown(speed);
}
});
});
The script works fine locally and behaves as expected, but when I deploy to Heroku it stops working entirely.
for reference, here is the HTML that the script is acting on:
<ul>
<li>
<h2>text here</h2>
<div class="expandable">
...more stuff here
</div>
</li>
...more li tags here
</ul>
Debugging I have already done:
I've been able to replicate the problem in my development environment by changing a line in development.rb to config.assets.debug = false. I don't know enough about rails to gain any insight from that.
I precompiled all the assets with RAILS_ENV=production bundle exec rake assets:precompile. and pushed that up.
after that didn't work I tried precompiling again after a git rm -r public/assets/
When that did not work I then used the developer tools on chrome or firefox to look through all the uglified js being loaded in my production environment. I saw that my functions appear to have been loaded, but then I'm not seeing the functionality I expect so I don't know what's going on there either.
To see what I saw you can go to https://www.shopperbot.com/about and look at the resource https://www.shopperbot.com/assets/application-db55113ff25f4decb133ccb74aa98298822de2381cddc0ae3fa8c03b65180dd0.js It's a huge file so you will want to search for the word expandable. that word is unique to the function in question.
I am still very new to rails so I am not sure where to go from here. I could try changing the location of my js but I don't think that would be ideal. Does anyone have any suggestions?
Because this all works fine in my local environment... I suspect I'm making some beginner's mistake that can be fixed with some magic 1 liner out there that I have not yet found.
As Jan Klimo pointed out in a comment I had removed the google maps API and still had functions expecting the API to exist. Those errors caused my script to not function.
The solution was to remove all references to the removed API.
Related
I found this javascript plugin that allows to visualize STL files in 3D:
https://www.viewstl.com/plugin/
The example works very well, the problem is that I can not find how to put that into a rails template. I took all the javascript files to my assets/javascript, then I added the respective '// = require' in aplication.js, I took the small script with the div:
<div id="stl_cont" style="width:500px;height:500px;margin:0 auto;"></div>
<script>
var stl_viewer=new StlViewer(
document.getElementById("stl_cont"),
{ models: [ { filename:"viewstl_plugin.stl" } ] }
);
</script>
and put them in my template but it does not work. Watching the console of my browser I found the following error: ReferenceError: importScripts is not defined. I saw that it has to do with web workers and that an importScripts only works inside them but this problem does not appear in the test.html so I guess something I'm doing wrong when putting them in rails that blocks or prevents the correct operation of importScripts.
I apologize for my lack of fluency in English.
Help :(
I'm using Rails 5.2.0 and Webpacker gem to deploy a Vue application.
The show.html.erb file is very simple:
<div data-behavior="vue-app"><MyComponent></MyComponent></div>
And then in my entry pack, packs/my_vue_app.js:
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm'
Vue.use(TurbolinksAdapter);
import MyComponent from '../components/my_app/index.vue'
document.addEventListener('turbolinks:load', () => {
var element = $('[data-behavior="vue-app"]');
if(!element) { return };
console.log('Initializing Vue');
const app = new Vue({
el: element[0],
data: {
},
components: { MyComponent }
})
})
In development, everything works absolutely fine. The app is mounted and functional.
But in production, after the page load and JS runs, <div data-behavior="vue-app"> is removed from the paging, leaving only <!-- --> in it's place.
In the console, there are absolutely no errors. I can confirm using DevTools that the pack js file is loaded, and it was parsed, since the console.log is printed in the console.
Heck, the proof that Vue is working is that the entire <div> where it was mounted was removed from DOM after JS parsing.
The weirdest thing of all is that I could get the app to mount ONCE, by attaching a debugger on the console.log line and turning it off while the debugger paused execution. Even tough I saw the app mounting that time, I could not get it to mount later on, even fiddling with the debugger again ... it's really, really weird.
These are the versions of package.json:
"vue": "^2.5.16",
"vue-loader": "14.2.2",
"vue-template-compiler": "^2.5.16",
The Rails app is brand new, with no config other than the default.
Webpacker gem is 3.5.3 and Rails is 5.2.0.
After spending a really long time on this, I only found this github issue: https://github.com/rails/webpacker/issues/1520
EDIT: I'm providing a link to the real, production app where this bug is happening: https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q
You'll see it's not mounting. Here's the same page in development:
I eventually managed to solve it by changing how the Vue app loading was defined.
Try import Vue from 'vue' (instead of from 'vue/dist/vue.esm') and then:
const app = new Vue({
el: domElement,
render: h => h(RootComponent)
})
The comments that appear in the hello_vue.js scaffold from the Webpacker gem tell you that you can choose between using the DOM as your template OR load the component with a render function; they both do work in development, but only the latter (loading the component with a render function, using vue instead of vue/dist/vue.esm and render: h => h(RootComponent) worked for me in production.
This has been, by far, the longest, most frustrating debugging session of my life, since there are absolutely no errors in console, you just stare into a blank screen, and Vue is running since it removes the DOM element it was mounted to from the DOM.
Source of solution: https://stackoverflow.com/a/48651338/1290457 and here's the github issue (currently open) on Webpacker gem https://github.com/rails/webpacker/issues/1520
I still don't know how to use DOM as template with Vue in production tough.
I had similar problem in Rails 5.2 + webpack Vue. All was good in development, but not working in production. After hours of investigating I found the reason. It was in this recommendation from webpaker gem docs.
Adding this
Rails.application.config.content_security_policy do |policy|
if Rails.env.development?
policy.script_src :self, :https, :unsafe_eval
else
policy.script_src :self, :https
end
end
brokes production. Removing else part - fixing the situation.
Chrome silently ignoring this. Firefox shows warnings.
I try to use web workers to be able to run several javascript codes at the same time. To start the worker I put the following into my javascript code section:
var worker = new Worker("my_task.js");
worker.onmessage = function(e) {
console.log('Worker said: ', e.data);
};
worker.postMessage("test");
my_task.js is the same folder as the file that holds the code above. This is how my_task.js looks like:
self.addEventListener('message', function(e) {
self.postMessage(e.data);
}, false);
But there seems to be a problem with Ruby on Rails (version 3.2.1):
Started GET "/users/my_task.js" for 127.0.0.1 at ...
...
...
ActiveRecord::RecordNotFound (Couldn't find User with id=my_task)
As you can see Rails tries to send an http get request when the script is started.
How can I solve this problem? Is there a better way to use web workers in Rails projects?
Thanks
Put my_task.js in /public/javascripts
In your javascript code where the worker is created, use the following ERB: var worker = new Worker("<%= javascript_path "my_task.js" %>");
Add .erb to the extension of whatever file the above javascript code is found in. So if it's mypage.js, it becomes mypage.js.erb.
The above works for me on Rails 4.2.0, ruby 2.0.0p598
Put my_task.js in the public folder.
the above <% javascript_path %>
and lib/assets/javascripts worked for me using Rail5
I'm working on jRuby on Rails app in Eclipse. I recently install Aptana to better support the rails files. This provides reasonable highlighting and support for most file types includes "html.erb" files but not for other *.erb files.
It's driving me insane their must be some editor that doesn't give me a damn syntax error when I use ruby tags in js.erb files. It seems like such a basic function.
Any advice is appreciated. I am open to pretty much anything I just want some way to write javascript in erb files without a million syntax errors after every ruby tag.
This example give me a syntax error in the editor despite working perfectly fine when I run the app:
<%= render :partial => 'qunit/frame_wrapper_top' -%>
module("Carousel");
asyncTest('Slider Right Button', 1, function() {
setTimeout(function() {
var center_image = frame.find('.carouselContainer li img.current').attr('id');
var e = $q.Event("click");
$('.navButton_right').trigger( e );
setTimeout(function(){
start();
var current_center = frame.find('.carouselContainer li img.current').attr('id');
notEqual( current_center, center_image, "New item is in center");
}, 1000);
},1000);
});
I'm also looking for an editor or IDE that can handle .js.erb. Aptana (3.0.9 or 3.2.0) only seems to recognise the ERB part, the JS does not get highlighted. Maybe Emacs+nXhtml will work.
Update: nXhtml does do the job for emacs. Load the file in your ~/.emacs as described in the README, then M-x eruby-javascript-mumamo-mode !
After worked on many small addon i want to put those add on on my server so that people can download it and use it so that i can get the feedback from the people ..but when i am downloading it from my server(it is a xpi file) getting following error..
Firefox could not install the file at
http://abhimanyu.homeunix.com/Work/abhiman_2k5#yahoo.com.xpi
because: Install script not found
-204
but when i m putting these files manually in the path it works fine..After fiddling many hours couldn't figure it out whats the problem ...please help me.
I assume that you are letting the users download your add-on through some install button.
Unfortunately, its not as simple as pointing the browser to the xpi file on the server's file system. Below, I have pasted the script that installs Omture when the user presses on the "Download Omture" button on the add-on's website which you could also find using firebug.
function installExt()
{
var url="omture_current.xpi";
InstallTrigger.install({
"Omture": { URL: url,
toString : function() { return this.URL; } } });
return false;
}