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 !
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 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.
How to format/beautify rails erb code. The view code is a mix of erb and JS.
I tried using the following tool as well, but it didn't help
https://github.com/katgironpe/rails-erb-lint
A good IDE to format/beautify rails is RubyMine.
RubyMine is able to reformat many types of files, like Ruby, HTML, JavaScript, CSS, etc.
example for reformat erb file:
Before:
After:
You can set the code style in the Preferences / Editor / Code Style
The tool which you already used, i.e., rails-erb-lint, checks only for the validity of you ERB and doesn't help with beautifying the ERB code. I don't know which editor you are using, but you can try either Sublime Text 3 or Github's Atom. Both of these have 3rd party packages to beautify Ruby and ERB code. Moreover, the indentation and trailing whitespace removing ability of these editors are enough to beautify/format the ERB files, though they have menu items/ shortcuts to do this on-demand/selectively too.
If you are using Sublime Text, check out this "Sublime Text 2 & 3 Plugin to BeautifyRuby":
https://github.com/CraigWilliams/BeautifyRuby
Once installed via Sublime's Package Control System you can use the shortcut ctrl + alt + k (on Windows + Linux) or ctrl + cmd + k (on OS X) to beautify your Ruby and erb-files manually - or configure the plugin to do that automatically before saving any Ruby- and erb-file. Configuration is easy - you find the config-file here (via the Sublime- menu):
Preferences > Package Settings > BeautifyRuby > Settings - Default:
{
// Specify your ruby interpreter (below). (Note, if you are using a linux distro with Rbenv instead of RVM, then try the following path: "ruby": "~/.rbenv/shims/ruby")
"ruby": "~/.rvm/bin/rvm-auto-ruby",
// Use 2 Spaces instead of tabs:
"translate_tabs_to_spaces": true,
"tab_size": 2,
// You can change the file patterns handled by this plugin:
"file_patterns": ["\\.html\\.erb", "\\.rb", "\\.rake", "Rakefile", "Gemfile", "Vagrantfile"],
"html_erb_patterns": ["\\.html\\.erb"],
// This package offers a pre-save hook; when activated, your ruby and erb files will
// be reformatted automatically before saving (deactivated by default)
"run_on_save": false,
// The sublime command "beautify_ruby" performs a save after formatting.
// (activated by default)
"save_on_beautify": false
}
BeautifyRuby depends on the Ruby gem htmlbeautifier, which needs to be installed on your system first. Otherwise the plugin throws an error each time you try to beautify your code. Make sure, the ruby-interpreter-setting in the config file shown above points to the correct ruby which holds the htmlbeautifier-gem...
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 have written dust js I call render function from my jquery local function.
Anyone please example how dust render get back. Do I need to call in onload function or not?
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
your code is ok, you can call the render method at any time. if you call it in the onload, you have to compile and load that template (tmp_skill) in the dust cache previously.
the steps to render dust are:
1) compile the template
2) load it to the dust cache with a name.
3) render the template
SO
var compiled = dust.compile("Hello world {name}", "tmp_skill");
dust.loadSource(compiled);
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
Anything you need you can read our wiki. you will find a lot of documentation and examples here: https://github.com/linkedin/dustjs/wiki
I suppose this question is related to your previous question, How to write dustjs in php code without nodejs
I tested your code and it works just fine.
do check your browser's console to see if there are errors after loading the page.
also, do use the linkedin fork of dust: https://github.com/linkedin/dustjs - it's much more actively developed.