Rails 3.1 edge use sprockets to handle .js and .scss files.
Sprockets use comments to deal with dependencies.
I put the three folders (dojo dijit dojox) in vendor/assets/javascripts.
Then add a line in app/assets/javascripts/application.js
//= require dojo/dojo
console.log(dojo);
Now dojo has been merged into application.js.
But dojo has dependency system itself. When I require more dojo modules. It cannot find the right path.
dojo.require("dojox.grid.DataGrid");
// Error in webkit console: Error: Could not load 'dojox.grid.DataGrid'; last tried '../dojox/grid/DataGrid.js'
// Error in rails server log: Started GET "/undefined../dojox/grid/DataGrid.js" for 127.0.0.1 at Sat Apr 16 01:26:05 +0800 2011
These are two different dependency systems. How can I put them together?
dojo.js doesn't take too naturally to being renamed. This is because part of Dojo's initialization process involves searching through the DOM for the script tag responsible for loading itself. It does this for two reasons:
Determine its baseUrl if not already specified
Pick up any djConfig (or data-dojo-config in 1.6+) properties specified in the script tag itself
When it searches for this script tag, it looks for one with src set to dojo.js or dojo.xd.js; it's not finding it in your case, thus the failures.
It should be possible to work around both of these issues, by specifying djConfig (or dojoConfig in 1.6+) fully programmatically in another script tag before the one that loads Dojo, and by specifying baseUrl manually in these config properties.
For example, if your application.js were in vendor/assets/javascripts as referred to in your original post, you could try doing this:
<script type="text/javascript">
//if you're using 1.5 or earlier, use djConfig instead of dojoConfig
var dojoConfig = {
//note that baseUrl points to the folder containing dojo.js, therefore the dojo folder
baseUrl: 'vendor/assets/javascripts/dojo/'
};
</script>
<script type="text/javascript" src="vendor/assets/javascripts/application.js"></script>
For more information on dojo config settings: http://dojotoolkit.org/reference-guide/djConfig.html (in fact, that page actually has a note under baseUrl specifically about renamed dojo.js.)
Try adding the dojo files into a dojo/scripts directory under /vendor/assets/javascripts. In the dojo directory, create a dojo.js file in the dojo directory and put //= provide "scripts" in that file.
Then in your application.js file put //= require <dojo>. Check out the Sprockets site http://getsprockets.org/ for info but that should work.
The docs aren't out for Rails 3.1 and the asset pipeline yet so a lot of this stuff is kind of trying to figure out on your own.
Umm... why are you placing your javascripts in vendor and app rather than public/javascripts? you have include anything in public/javascripts with =javascript_include_tag('path_to_javascript') where path_to_javascript would be "dojo/DataGrid" for public/javascripts/dojo/DataGrid.js
http://guides.rubyonrails.org/getting_started.html
I know it's maybe a bit late but I could help someone else.
I finally made it work and posted the explanations here.
Related
I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.
I am creating a web app using Hexo. I want to use a package called slick-carousel in one of my pages. This package also contains jQuery by the way. So I successfully installed (and "--save"ed) the package via npm. The package shows up in my node_modules folders and on my package.json file.
I expected that after doing this, I should have access to both jQuery and slick functions in my markdown files, but I don't. When I render the generated page on my browser, I am told that 'jQuery is undefined.' What step am I missing here so that I can actually use my installed packages?
Here is the script tag I added to my markdown file that I am trying to make work:
<script>
jQuery(document).ready(function(){
jQuery('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
I am still trying to fully grasp the relationship between installed packages and the rest of my application, so forgive me if this question doesn't even make sense. Any insight or explanation you can give me would be much appreciated!
Just because the scripts are in node_modules, doesn't mean they are automatically added to your projects frontend.
There are different ways to achieve what you need:
Manually moving the assets
Instead of trying to fiddle around with package.json and module requirements, the probably easiest way to get what you want is
moving the distribution files of jquery and slick-carousel out
of the node_modules folder into a folder where Hexo can work with
them better (after a quick read-up it should be source) then you
just link your JS file in your HTML layout and everything should work fine
Automatically moving the assets
With using some kind of task toolkit (like Gulp or Grunt) you could write tasks that automatically move the assets out of the node_modules folder inside a folder that is accessible by Hexo, a Gulp task could look something like this:
gulp.task('jquery', function () {
return gulp.src('./node_modules/jquery/dist/jquery.js')
.pipe(gulp.dest('./source/js'))
})
Using require (if supported)
I never used Hexo before, so I have no idea of it's internals, but sometimes it might be possible to just use require in the Javascript files to load modules that were downloaded, so you could use
window.jQuery = window.$ = require('jquery')
for example, to directly load the script as module.
You might need to test this yourself, but these are probably the three most common ways to handle assets in Node.js projects.
I would like to include PIE.htc in my Rails application to make CSS3 easier for IE. I can't seem to figure out how to include the PIE.htc file.
I tried to include PIE.htc in my assets folder as well as assets/stylesheets folder, but I no routes matching error.
How do I include PIE.htc with rails asset pipeline?
Try the solution in this post: Using PIE.htc in rails
Basically, it should be:
behavior: url(/assets/PIE.htc);
Also, if you want to be completely sure that the PIE.htc file is being loaded, open it and add an alert as so:
<script type="text/javascript">
alert("PIE works);
If the file if being loaded, a popup should appear showing the message.
Many jQuery plugins have the following directory structures:
/<plugin name>
../css
../images
../js
The CSS files usually have relative links to the images in them. What I want to do is include these plugins in the Rails Way under the Asset Pipeline, and hopefully that doesn't involve having to renamed the file references to remove the relative links. Is there such a Rails Way?
Could it also be that it's overkill to include an already-minified jQuery plugin in the Asset Pipeline?
You should try to add your assets to the load path which is the recommended way, as far as I know. If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("plugins/plugin_name/assets/")
Not shure, if this is what you asked for but if not, you should check: http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Remeber to restart your server
I had the same issue and also tried to find "the Rails way" to do this. And this is what I ended up with at the end of the day:
As Rob already mentioned:
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Source: 2.1 Asset Organization
Lets take a practical example: using the jquery_datepicker gem (Note: we had to use a workaround because of this issue: bundle pack does not work with git sources).
1) Installing the gem (pretty straighforward):
cd vendor/gems
git clone https://github.com/albertopq/jquery_datepicker.git
2) Add this to your Gemfile
gem 'jquery_datepicker', :path => 'vendor/gems/jquery_datepicker'
3) Install a jquery-ui theme
From ThemeRoller select a theme, check Datepicker and Slider
and the jQUery version
Download and extract the content of the package
CSS/images from the css/theme-name folder move them:
jquery-ui-1.8.xx.custom.css to app/vendor/stylesheets/
the images folder to app/vendor/images/ (yes, move the entire folder images so you end up with something like this app/vendor/images/images/ui-icons_256x240.png
i18n from the development-bundle/ui/i18n folder (optional) move them to:
Create a folder i18n under app/vendor/javascripts/
move jquery.ui.datepicker-xx.js to this folder app/vendor/javascripts/i18n/
make sure the i18n folder is loaded so include in application.js
//= require_directory ./i18n
vendor/assets is loaded automatically AFAIK so you don't have to include the path in the asset pipeline.
I'd like to see how others are approaching this, it's a very good question.
I think the reason you haven't received an answer is because it's kind of unclear what you're asking. Are you asking if it's overkill to put your plugins in the asset pipeline? Are you asking if you have to rename file references?
I always put all my jquery plugins in my asset pipeline. Overkill or not, there all in one place and they only get compiled once so even if compiling them takes longer, it doesn't affect my app.
I've noticed that when working on a meteor application it will auto refresh the entire page when any stylesheets have changed. Is there a way to make it only refresh the stylesheet assets similar to how LiveReload works?
Also note that I'm using stylus for my stylesheets. Is that what's causing the full reload?
No, out-of-the-box Meteor will reload the entire app when it detects a file change of any type (whether html, css, or js). It doesn't matter if you're using stylus or not.
I imagine future iterations may take a page of out LiveReload for images and css files (so changing them does not cause a refresh), but for the time being the whole site will reload. In fact, this would probably be a fantastic pull request.
The current workaround I found is to use the "regular way" of adding css files:
Put your file myCss.css into the public folder "/public/myCss.css" so that it is not compiled by meteor
Add the following line to your html file:
<link rel="stylesheet" type="text/css" href="/myCss.css" />
Use a live editor such as Espresso or CSSEdit to change the myCss.css file.
Note that once you save the file, meteor will reload anyway. But in the following case:
- You are running meteor in production mode
- Your .css file is not in any folder contained into the meteor project (like you serve the .css file from somewhere else my yourself)
- Your file or folder is starting with a dot "." or ending with tilde "~", in this case, meteor will not reload those files if they did changed. Note that I never have been able to make this work with the ending tilde, moreover working with invisible files (starting with ".") is not very convenient. See here for ref.