I did bundle and generate install and now I have the jquery's files instead of prototype
I can see from mozilla firebug that the jquery's files are included, however I can't use jQuery or $ functions, the app/mozilla console don't know them.
Any suggestions how to fix this?
I'm using jquery-rails 1.0.12 and rails 3.0.8
It would be great if you could give more details but here are some things you can try:
Make sure that when you view the page source you can see the jQuery files are included. I usually have <%= javascript_include_tag :defaults %> between the HEAD tags
You can test if everything is working by adding the following code:
$(document).ready(function() {
alert('hello world');
});
Hope this helps
Make sure the line below is commented out (in application.rb) and that you have restarted your server.
config.action_view.javascript_expansions[:defaults] = %w(jquery rails)
Related
I am really wanting to know how to integrate jqTree as a webpacker webpack in my Rails 6 application
UPDATE:-
Using yarn add jqtree seems to have magically cleared up most of my issues however I am currently facing tree is not a function error
I am using the Ancestry gem to organise menu items and I need a drag and drop javascript tree view solution that will work nicely with the Ancestry gem. I have picked on jqTree as my desired solutions but I am happy to be persuaded to use an alternative as there seem to be a lot around but initially I would just like to be able to at least get a tree view working within Rails 6
Presumably I have to start by setting up jQuery, for which there are plenty of resources on how to do this so I guess this is more about how to get any jQuery component up and running in a Rails 6 app
I guess I'll have to start with a jsx file and import some stuff and import some css into application.scss but just what this should look like I really am unsure of
So far I have setup jQuery according to the instructions here https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
I can confirm with a simple alert that this is all hooked up and working
I have made some more progress
Instead of downloading the jqTree files, I have used yarn to install jqTree
replacing
I have downloaded the jqTree files and unpacked them to folder called jqTree inside my javascript/packs folder
with
yarn add jqtree
and now I have sorted out the require which is as it should be without the ;
So
require ;'jqTree/tree.jquery.js'
becomes
require('jqtree')
also in my javascript/packs folder I have created a sortable.js file which did contain the following
require ;'jqTree/tree.jquery.js'
jQuery(window).on('load', function () {
alert("Done"); //This works!
});
$(function() {
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
})
the ; in the require statement confuses me a lot but the console error was demanding it
This now looks like this
require("jqtree");
$(function() {
alert($('#tree1').data('items'));
});
$('#tree1').tree({
data: $('#tree1').data('items'),
autoOpen: true,
dragAndDrop: true
});
With the above code I get an reference error: data is not defined
In a view I have the following code
<%=javascript_pack_tag("sortable")%>
<%= content_tag "div", id: "tree1", data: {items: #menu_items} do %>
Loading items...
<% end %>
The issue I have now is that my browser is reporting an error that tree is not a function.
In my application.css.scss I have
*= require "jqtree.css"
Which doesn't work
I have a detailed answer for this that has taken me quite sometime to put together, I will update this answer with that detail over the coming days but it starts with getting everything hooked up properly with jQuery, jQuery-ui and the componment itself which in this case is jqTree
Yarn is definitely the answer
Starting with the command line to add the relevant packages
yarn add jquery
yarn add jquery-ui
yarn add jqtree
Once the relevant yarn packages are installed I needed to make jQuery and jQuery-ui available for reasons that I am yet to fully comprehend, a simple require is not enough
Following this post https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
I setup my environment.js file in the config/webpacker folder to look like this
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
);
const aliasConfig = {
'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
After restarting my server I created a simple js file called test.js in the app/javascript/packs folder which as far as I can tell is where all javascript now resides although there is still the possibility of using sprockets by putting javascript in the assets/javascript folder, I have been advised, with no explanation as to why, that it is not a good idea to mix webpacker with sprockets for serving javascript.
Webpacker does has the ability to serve stylesheets as well, however I still prefer my stylesheets to be served by sprockets in the app/assets folder and using stylesheet link tags as traditionally done in Rails apps as testing proved to be more efficient this way so mixing sprockets with webpacker in this way doesn't seem to be an issue.
I just chucked a simple alert message into the test.js file just to check that webpacker and jQuery was all hooked up properly.
So test.js looks like this
require("jquery-ui");
require("jqtree");
$(function() {
alert($('#tree1').data('items'));
});
Then to use the javascript I just included a javascript pack tag in the view I wanted to use it in like so.
in a random edit.html.erb view
<h1>Editing Menu Item</h1>
<%= render 'form', menu_item: #menu_item %>
<%= link_to 'Show', [:admin, #menu_item] %> |
<%= link_to 'Back', admin_menu_items_path %>
<%=javascript_pack_tag("test")%>
No need for paths or extensions to the file name, it just works!
I find this approach to be really neat for two reasons
1) I am not unnecessarily bloating out web pages by including page specific javascript in every single page by including it in the application.js file which gets included by default in the layout and therefore in every page.
2) I don't seem to have to worry about DOM loaded events and so far no issues with turbolinks interfering with it, although I suspect that may be more by luck than judgement and I may have to revise that thought in the future and make use of 'data-turbolinks-track': 'reload' option, but so far so good and this has not been necessary.
So now that all is hooked up and working it was time to make the jqTree component work with ancestry gem to be able to structure and organise the menu items for the site,
But up to this point it has been a simple matter of using yarn top install components and hooking up jQuery properly. I didn't use yarn initially and that led me to all sorts of problems resulting in my original question.
The rest is to follow...
I am using active admin gem in my Rails application.In that, I have a resources article and user and I need to use TinyMCE-rails in the article.
It is possible to add if possible how?
There are a number of WYSISWG editor plugins for ActiveAdmin. The TinyMCE plugin has not been updated for a while so I don't know its status. A couple of the others are more current.
I realize this is a bit late but in hopes that this may help someone else in the future - TinyMCE is active and the tinymce-rails gem is actively maintained (latest release as of writing is just under 2 months old). Getting this to work in ActiveAdmin is not too hard, the github page and TinyMCE and ActiveAdmin for Rails post tell you most of what you need but here is what I did:
add the tinymce-rails gem - bundle install
add TinyMCE assets by adding //= require tinymce to application.js
register tinymce.js in active_admin.js and initialize it by adding the following to your active_admin.js file (this was the missing key for me):
...
//= require tinymce
...
// initialize tinymce
$(document).ready(function() {
tinyMCE.init({
selector: 'textarea.editor',
browsser_spellcheck: true,
menubar: 'edit view insert format tools table help',
plugins: 'code image link lists media preview table'
});
});
To use it in a form:
...
f.input :description, input_html: {rows: 4, class: 'editor'}
...
Hope this helps someone down the road.
I am trying to use a plugin called Shuffletext to give my text a shuffling effect that iterates through different strings. this is the code for it (just have it in the .erb file while trying to get it how to work cause its easier)
<div id="wrapper"></div>
<script type="text/javascript">
$('#wrapper').ShuffleText([
'Hello world !',
"I'm a jquery plugin",
"I like to <strong>shuffle text</strong> !"
],{loop: true, delay: 5000, shuffleSpeed: 50});
</script>
In a simple folder that just has a .html file and the plugin file it works fine, but when I put it into ruby it throws me this error
home:24 Uncaught TypeError: $(...).ShuffleText is not a function
at home:24
I've been trying for a few hours to try and fix this and I am stumped, any help is really appreciated, here is a link to the plugin if it helps
https://github.com/Nyl000/ShuffleText
I suppose, you didn't plug in this library correctly. I didn't find a gem that integrates this plugin into Rails asset pipeline, so you should put plugin file into vendor/assets/javascripts directory. Just copy shuffletext.jquery.js to this folder.
Then you can either add //= require shuffletext.jquery.js to manifest file (usually it's app/assets/javascripts/application.js) after jQuery, or manually add javascript_include_tag 'shuffletext.jquery' to required pages.
If you decided to require plugin in manifest, you can use it on every page where the manifest is plugged. Usually it is plugged in layout, so all pages that use this layout will have it.
If you decided to use javascript_include_tag, you also should add Rails.application.config.assets.precompile += %w( shuffletext.jquery.js ) to your config/initializers/assets.rb file. In this case you will get your plugin only on those pages where you have specified javascript_include_tag.
I really like rails_admin, but my clients don't like CKEditor. Is this really the only option for WYSIWYG on this gem? Is there any way to use tinyMCE with rails_admin?
after struggling to get CKEditor working properly in RailsAdmin (on Rails 3.1), I used tinymce:
It works well and is done in minutes:
in your gemfile add:
gem 'tinymce-rails'
plus you inlcude a line in rails_admin.js.erb:
require_asset 'tinymce-jquery'
you may need to copy the whole file (rails_admin.js.erb) from the gem to /assets/javascripts/rails_admin/
before you do this.
finally, you will also need to add some jquery to the view files
app/views/rails_admin/main/edit.html.haml and app/views/rails_admin/main/new.html.haml
:javascript
jQuery(function() {
jQuery('textarea').tinymce({
theme: 'advanced'
});
});
This will add the Wysiwyg to all text area fields.
WYSIWYG editors typically just overlay an HTML text area element with JavaScript functionality. So any editor should work in theory. You could replace the references in the code to tinyMCE, make sure you have all the files properly installed and then set tinyMCE to use the ID of the text area control.
It should not make a difference to the back-end programming which client side interface is used to create HTML in the text area.
Great andistuder,
I propose a modified version of your solution.
Copy the rails_admin.js.erb from the gem to the /assets/javascripts/rails_admin/ in your project path.
Add the following line:
...
require_asset 'tinymce-jquery'
%>
jQuery(function() {
jQuery('textarea').tinymce({
theme: 'advanced'
});
});
And all will works like a charm!
I achieved this in a slightly different way, which worked for:
rails_admin (0.8.1)
tinymce-rails (4.4.1)
Implementation:
Gemfile
gem 'tinymce-rails'
app/assets/javascripts/rails_admin/custom/ui.js
//= require tinymce-jquery
var admin = {
initTinyMce: function() { tinyMCE.init({ selector: "textarea[name$='_html]'" }) }
}
$(function() {
admin.initTinyMce();
$(document).on('rails_admin.dom_ready', function() {
admin.initTinyMce();
});
});
Explanation
https://github.com/sferik/rails_admin/wiki/Theming-and-customization
Suggests the ui.js location
Suggests to use rails_admin.dom_ready
https://github.com/spohlenz/tinymce-rails
//= require tinymce-jquery: no ruby interpolation required and I like using manifest files
Custom:
I needed to run the initialization twice, all seems good so far
The selector textarea[name$='_html]' will convert all text areas where the field ends in _html, that's what I store, that's how I name my fields
In Rails, when we include an image into the page we use image_tag helper, which generates <img> tag and adds ?nnnnn at the end of its url, so that every time an image is updated the old version would not be stuck in the cache on the client side. Same thing for SASS needed, but I can't find it in the documentation.
You should be using helpers provided by sass-rails gem https://github.com/rails/sass-rails, (scroll to Asset Helpers).
These helpers can be used from inside sass files any time you need to reference an asset (image/audio/video/font)
body{
background: asset_path($relative-asset-path, $asset-class);
}
Note: image_url("...") is not working on Rails 3.1.0.rc4 due to a bug, but you can still use asset_url and asset_path.
Using stylesheet_link_tag will do this for you, just the same as image_tag does. This also applies to JavaScript files linked in with javascript_include_tag.