I know how to use jquery alone but since I am pretty new to Rails 3.1 I have only little idea how to integrate jquery into Rails.
So far I have come up with following steps but the first (naive) way of programing things are usually wrong :-)
datepicker plugin for jquery (e.g. jquery-ui-timepicker-addon.js) into app/assets/javascripts
add line //= jquery-ui-timepicker-addon to application.js
When I want date picker in some VIEW I will create app/assets/javascripts/VIEW.js and in there I will use standard jQuery to hook up date picker
Is there a more elegant way?
You can try this:
Add the jquery-ui .js file to the app/javascripts folder. Which you can download [here][1]
[1]: http://jqueryui.com/download. Maybe your jquery-ui-timepicker-addon.js will do as well.
You don't need to add code to application.js. As all .js files in the javascripts folder
will be included and compiled automatically
Add the following line to
app/javascripts/{viewname}.js.coffee
$ -> $('.date').datepicker()
The line above is the coffeescript equivalent of:
$("#datepicker").datepicker();
Related
since I wan't to keep my js files separated for some views, I am making use of a helper function inside the view which yields the js file into the html head
def javascript(*files)
content_for(:head) { javascript_include_tag(*files) }
end
So I was wondering how can I achieve this with assets the pipeline and the pre compile mechanism?
Best,
Phil
Every JS file that is being required in the HTML head section needs to be precompiled. By default only application.js is being precompiled, but you can schedule additional files for precompilation in config/application.rb:
config.assets.precompile += ['admin.js', 'customer_page.js']
Those files can be manifests, just like application.js, if you want to group the JS-files together.
I'm using the best_in_place gem to do in-place editing in a Rails application. However, I need (X)HTML editing on some of the text areas, so I need a rich-text editor. TinyMCE is being used elsewhere on the site.
However, it's not trivial to add an editor to best_in_place. To grossly oversimplify, the gem uses jQuery to insert the textarea tag on the fly, and TinyMCE initializes at page load, replacing available textareas with an editor, so when best_in_place puts in its textarea, TinyMCE has already come and gone. I've tried re-initializing TinyMCE after best_in_place inserts its textarea, but I don't think I've found the correct place(s) in the code to do that, because so far it hasn't worked.
There's a rumor that this integration is possible, but no documentation was visible in my web searches, so pointers are welcome. (Likewise this answer is unhelpful, pointing to two broken links.) I think my preferred order of solutions would be something like
Here's how to integrate TinyMCE with best_in_place
It can't be done with TinyMCE but here's how to do it with another rich-text editor
It can't be done with best_in_place but here's another rich-text edit-in-place solution for Rails 3.2.x.
I gave up trying to do this with best_in_place, so this question as written is still open to a better answer. However, for those who might find this question later and wonder what I eventually came up with, here's what I did in the end:
Junked best_in_place.
Forked the jeditable-rails plugin to
get Jeditable as an in-place editor.
Adapted the plugin to provide Jeditable, jWYSIWYG, and the Jeditable-jWYSIWYG custom input as assets for the Rails asset pipeline (along with related CSS and images for jWYSIWYG).
Profit! (Not really.)
Anyway, if you're trying to do rich-text in-place editing in Rails 3.2, try the jeditable-wysiwyg-rails plugin. It's providing the assets for the markItUp editor as well, although because I'm not using it I'm not sure they're all there and/or arranged properly.
I've built a Rails 3 app and I'm trying to get it working with JQueryMobile. I've gone ahead and required query_mobile_rails and that works just fine, but I need to disable the AJAX loading as it seems to get in the way of many things. Looking at the jquerymobile docs, they recommend adding the following javascript after loading JQuery, but before loading JQueryMobile:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
I've been reading through the docs on the Asset Pipeline, but I cannot figure out how I can manage to get my code (the above) inserted after JQuery and before JQueryMobile. Where do I place such a .js file so that it will be loaded at the proper time?
Any help would be greatly appreciated!
Nevermind. I got it. I created a file called app/assets/app_lib.js with the code above and then added a require app_lib between require jquery and require query.mobile in my application.js file.
When a rails app is created with rails 3.1 or 3.2.0.rc2 it by default creates an app/assets/stylesheets/application.css file, however each controller/model created there after creates an app/assets/stylesheets/<controller or model name>.scss.
Why isn't an application.scss created by default?
How do you properly incorporate an application.scss and get rid of the application.css entirely?
I would just rename it to application.scss and then you can import in your other .scss files like this:
// Inside application.scss
// HTML Reset
#import "reset.scss";
// Users CSS
#import "users.scss";
When you compile the SCSS, it will generate the application.css for you from all of the other imported files or CSS within that file.
application.css just plays like a house keeper, it represents the correct order of other .scss files.
Put the real working CSS in application.css may not good practice, as the comment generated by rails below:
You're free to add application-wide styles to this file and they'll
appear at the top of the compiled file, but it's generally better to
create a new file per style scope.
In my Rails 3 application I'm using Twitter Bootstrap as a frame work for developing an in house project management system. I'm using Formtastic to help me with forms since it save a lot of time and code. My problem is getting the Formtastic code to output the forms in a way that correspond with Bootstrap's conventions. I've read a few items I found on Google suggesting that I should monkey patch Formtastic, but I haven't been able to do this successfully.
How can I customize Formtastic's output to use div's around each field so I can use Bootstrap with it?
Thank you for looking.
Well, today I tried forking formtastic and making it compatible with bootstrap... The markup is incredibly tightly coupled to the code, so I gave up and switched to simple_form instead. Works fine with the advice in Rails: Using simple_form and integrating Twitter Bootstrap
You can use the formtastic-bootstrap gem. You should be able to drop this in and it will generate HTML that will work naturally with Twitter Bootstrap.
If you use the SCSS files from the one of the scss-twitter-bootstrap projects, you can simply comment out or remove the include for the forms part of the CSS.
Simply copy them in to app/stylesheets (Rails 3.0) or app/assets/stylesheets and comment out:
// #import "forms.scss";
Don't forget to add the formtastic CSS back in:
<%= stylesheet_link_tag 'formtastic', 'formtastic_changes' %>