My views/comments/create.js.erb JS is not working and my erb does give some output, I setup my jQuery by adding
gem 'jquery-rails', '~> 4.4'
I bundles my rails app and made changes in the app/asset/javascript/application.js with the requires as follows
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require activestorage
So when i write my js for create action of comment in app/views/comments/create.js.erb
$('#comment_content').val('')
$('#comment_div').prepend(<%= j render #comment %>)
And i have a partial with _comment.html.erb
<%= comment.created_at.strftime("%l:%M:%p")%>
<b><%= comment.user.username %></b>
<%= comment.content %>
<br>
Now i dont know where i have made mistake in setting up my jquery
The answer to this is to use "" in the prepend function just like
$('#comment_content').val('')
$('#comment_div').prepend("<%= j render #comment %>")
Related
For a JavaScript library that doesn't have a rubygem version, how do I install it in Rails?
I checked the Rails Guide, and neither Working with JavaScript in Rails nor The Asset Pipeline seem to explicitly address how to install JavaScript libraries.
Add the javascript files to your app/assets/javascripts folder.
> cp my_js.js path/to/my_rails_app/app/assets/javascripts/
Make sure that the layouts that need the file contain a line to include the application javascript:
# app/views/application.html.erb
<%= javascript_include_tag 'application' %>
And in your application.js file, make sure the tree is required in the comments:
# app/assets/javascripts/application.js
...
//= require_tree
Restart your server, and the javascript should now be included
If you have just an one file, then you can copy and past it into app/assets/js folder. require_tree should cover for you, which is that in layouts/application.html.erb this line <%= javascript_include_tag 'application' %> will include everything.
# app/assets/javascripts/application.js
...
//= require_tree .
If you would like to use bower, then set it to vendor folder. and add into appl..js file like below.
# app/assets/javascripts/application.js
//= require angular
//= require angular-cookie
//= require angular-animate
//= require angular-ui-router
//= require angular-bootstrap
//= require bootstrap
I can't quite figure out what I'm doing wrong with respect to my asset pipeline (amateur hour).
I'm using the Froala editor (rails gem) and when I visit the page where I want to render in my wysiwyg editor, it's spaghetti falling out over the page. (The JS isn't being applied.)
I've tried to account for the rails turbolinks issue by implementing the on page:load function beside call to init foundation, but it obviously doesn't work.
Here's my current setup.
application.js:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require froala_editor.min.js
//= require turbolinks
//= require cocoon
//= require_tree .
$(function(){ $(document).foundation(); });
$(document).on('ready page:load', function () {
$('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})
Here's the form itself:
wysiwyg post _form
<div class="field">
<%= f.text_area :body, id: "wysiwyg" %>
</div>
Here's what I'm doing in the new and edit pages:
new.html.erb (and edit)
<% content_for :head do %>
<%= stylesheet_link_tag "froala_editor.min.css" %>
<%= stylesheet_link_tag "froala_style.min.css" %>
<%#= javascript_include_tag "froala_editor.min" %>
## commented out, tried both to no avail.
<% end %>
Also tried including my froala_editor.min.js both ways to no avail. What the heck am I doing wrong?
Edit:
No errors or anything in the rails log or dev console.
Also, when I refresh the page, the js does work and it's no longer "spaghetti," just not on initial page load.
Edit two ("general" is where my miscellaneous scripts are, per #thedanotto):
Updated as follows but still no luck. Still works on page refresh.
//= require jquery
//= require jquery_ujs
//= require froala_editor.min.js
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require turbolinks
//= require foundation
//= require general
//= require cocoon
//= require_tree .
Add another js file and put it within the app/assets/javascripts/ folder.
Move this code from application.js to new-js-file.js
$(function(){ $(document).foundation(); });
$(document).on('ready page:load', function () {
$('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})
I'd then move the froala_editor.min.js into app/assets/javascripts/ folder as well. And just make sure your froala_editor.min.js is named earlier in the alphabet than your new file. IE your new file should start with a g or later so it loads in the browser afterwards.
Otherwise you can add froala_editor.min.js to /public. Then load it within application.html.erb
It turns out I had not required the Froala CSS files properly in the tree. I was pulling it in directly in the view but when I added it to the list in application.css it worked.
*= require scaffolds
*= require froala_editor.min.css
*= require froala_style.min.css
*= require foundation_and_overrides
*= require_self
*= require_tree .
My problem is pretty simple:
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require ckeditor-jquery
//= require_tree ./code
//= require turbolinks
hljs.initHighlightingOnLoad();
index.html.erb
<div class="ui items" data-no-turbolink>
<% #posts.each do |post| %>
<div class="index_post" data-no-turbolink>
<%= link_to post.title, post, class: 'ui large header' %>
<div class="date_created">
<%= post.created_at.strftime("%B %d, %Y") %>
</div>
<div class="content">
<%= simple_format(post.body) %>
</div>
</div>
<% end %>
</div>
Highlight.js and default.css.scss are in their places inside assets folder and everything works successfully If I refresh the page. I tried to comment out the turbolinks line in application.js and everything is ok. How can I make it work by keeping turbolinks ?
This is a issue I meet in almost every project I create. A solution could be to include data-no-turbolink in the link's tag that opens the view that I have the problem, but it's a homepage (and other ones) that do not depend on a single link. Finally, I prefer an optimum solution than a hack.
this one took me by surprise as well, however you need to account for highlightJS thinking that it has already been called in addition to TurboLinks bypassing the document.ready event. The code by #rsb only takes into consideration Turbolinks bypassing the document.ready event trigger. So you need hljs.initHighlighting.called = false in the answer from RSB:
ready = function() {
hljs.initHighlighting.called = false;
hljs.initHighlighting();
}
NOTE: that I changed the call to initHighlighting() rather than initHighlightingOnLoad().
Do this in your application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require ckeditor-jquery
//= require_tree ./code
//= require turbolinks
ready = function(){
hljs.initHighlightingOnLoad();
}
$(document).ready(ready);
$(document).on('page:load', ready);
Hope that helps!
I have several javascript plugins in my app already and they work find (select2, bootstrap-datetimepicker, ckeditor, ace, chartkick)
trying to get jquery-ui running to add some sortable lists/tables.
Can't get Jquery-ui running in a rails 4 app...
# Gemfile
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'non-stupid-digest-assets', '~> 1.0.4'
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
// = require jquery.ui.all
# app/views/rates/show.html.erb
<ul id="rates">
<% #plan.rate_items.each do |rate| %>
<%= content_tag_for(:li, rate) do %>
<%= rate.name %>
<% end %>
<% end %>
</ul>
<%= content_for :page_javascript do %>
<script>
$(document).ready(function(){
$("#rates").sortable();
});
</script>
<% end %>
When I look at the console I just get:
TypeError: $(...).sortable is not a function
Looks like a typo with the '=' sign not touching ' //'
Change to
//= require jquery.ui.all
http://guides.rubyonrails.org/asset_pipeline.html
i think it should be:
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= require_tree .
I am new to Rails. I followed the documentation and this example: Using Chartkick in Rails 4.0
but I cannot get Chartkick to work. I get undefined method pie chart. My js looks like this:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
I have tried including the javascript_include in both the application kayout and the show page. <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
Any ideas? Thanks all. I really do appreciate every bit of help I get here.
It turns out that, since Chartkick runs as an engine, I did not need to add // include chartkick into the application js file- I removed it and it worked like a charm. That means that the steps to get Chartkick to work in Rails 4 are:
add gem 'chartkick' to your Gemfile
add <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> to app/views/layouts/application.html.erb
Just add this to your chartkick's javascript_include_tag - 'data-turbolinks-track' => true. Also have a jquery-turbolinks gem installed (with it's correct structure of scripts requiring in application.js file). Finally restart the server.
write
#= require active_admin/base
require chartkick
in active_admin.js.coffee
and call direct jsapi from google like this in partial file.._items.html.ebr in app/views/items folder
javascript_include_tag "//www.google.com/jsapi", "chartkick"
pie_chart order, library: {pieSliceText: 'value'}
and then call this partial file like this
div class: 'custom-class' do
h3 'Items'
#item = Item.group(:menu_id).count #whatever data you pass to chart
render partial: 'items/items', locals: {item: #item}
end