I've been doing a project using the foundation-rails gem and now that I've got to a part where I need to use its javascript - a reveal modal, it doesn't seem to be working, I can't get any of the foundation javascript features to work and have tried for hours to no avail.
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require foundation.min
//= require modernizr.custom.72741
//= require fastclick
//= require foundation.reveal
//= require_tree .
$(document).foundation();
relevant parts of application.html.haml
%head
%meta{charset:"utf-8"}
%meta{name:"viewport", content:"width=device-width, initial-scale=1.0"}
%title Instaharam
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag "vendor/modernizr"
= csrf_meta_tags
%link{href:"http://fonts.googleapis.com/css?family=Dancing+Script", rel:"stylesheet", type:"text/css"}
%body
...
= javascript_include_tag 'application'
mark-up to display the modal
%li= link_to "Add a post", '#', :'data-reveal-id' => 'add-post-modal'
#add-post-modal.reveal-modal
- #new_post = Post.new
= form_for #new_post, data: {abide: true}, :html => {:multipart => true } do |f|
= f.label :image
= f.file_field :image, required: true
= f.label :caption
= f.text_field :caption
= f.submit name: "Create Post"
%a.close-reveal-modal& ×
When I click the link it simply takes me to the top of the page.
Related
i recendly add a gem tinymce and i did all the step that the page tell me but the result was a loooong string and i really don t know why, here i put my codes:
i create a tinymce.yml file with this:
default:
plugins:
- image
- link
alternate:
selector: textarea.table-editor
toolbar: styleselect | bold italic | undo redo | table
plugins:
- table
then i add the following sentence in applications.js:
// about supported directives.
//
//= require jquery3
//= require popper
//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require jquery.validate
//= require.validate.additional-methods
//= require tinymce
//= require turbolinks
//= require_tree .
S(document).ready(function(){
S('#new_user').validate({
rules {
'user[email]': {
required:true,
email:true,
},
'user[password]': {
required:tree,
minlength:1
},
'user[password_confirmation]': {
required:true,
equalTo: '#user_password',
}
},
})
})
and in the view i put the following:
<div class="field">
<%= form.label :content %>
<%= form.text_area :content, id: :publication_content, :rows => 10, :cols => 10,
:class => "tinymce" %>
</div>
<div class="actions">
<%= form.submit %>
</div>
<%= tinymce %>
<% end %>
in all the case here is my database:
class CreatePublications < ActiveRecord::Migration[5.1]
def change
create_table :publications do |t|
t.string :title
t.references :city, foreign_key: true
t.string :content
t.timestamps
end
end
end
and this is what is showing me the page instead of the link and the imagen:
so i really don t know what can i do.
You have to call .html_safe on strings with html tags that you want to be HTML tags on the rendered view, otherwise ActionView scapes the tags and the browser shows them as text. You are not showing the view with the problem though, but a .html_safe on both lines should work.
In my ROR I want to add Percentages to my Piechart, I'm using the chartkick gem to render the Pie chart. I've tried various approaches to the problem, but none seems to work. I've also googled around and look at similar posts at stack overflow.
This is what I've come up with but it's not showing the %.
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {legend: {labelFormat: '{name} : {y} ({percentage}%)'}} %>
I've also tried this approach, but still with out a luck
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {pieSliceText: 'value-and-percentage'} %>
Please can someone more experienced help me with this?
UPADATE FOR OSCAR'S ANSWER
I followed the directions provided for Oscar's answer but its still not showing %.
This how the <head>in application.html.erb looks:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>
and the appplication.js is like this:
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
I had a similar problem working with this. So Chart.bundle doesn't provide that options for pie chart
Instead of that you can use Google Charts as specified at documentation here
So what you have to do is remove //= require Chart.bundle from application.js
Go to application.html.erb or the layout that you are using for showing your view and before <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> or something similar that you have for loading js libs add <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>. It will look like this:
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
And there is!. Also I noticed that you are missing a "]" at your code. Fixing that you can run the chart with this:
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total], ["Baseball", #baseball_total], ["Other", #other_total ]] %>
You should be able to see the percentages without adding any options
If you want customize the chart options then you can see the documentation here
EDIT: You application.js should look like this
//= require jquery
//= require jquery_ujs
//= require chartkick
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
And your application.html.erb or the layout that you are using at your controller like this(delete that highcharts.js include_tag at the end you don't need it):
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
hey You can find Something better here
As per my opinion, you can try this code.
Instead of this
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {pieSliceText: 'value-and-percentage'} %>
You can Try This
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {pieSliceText: 'value'} %>
Hey you can puth below code in your header.
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js</script>
I made it by doing this
1) I configured my Chartkick to use Highcharts, as described in https://github.com/ankane/chartkick.
2) I used the following library options with my pie chart:
library: {plotOptions: {pie: {dataLabels: {format: "<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)"}}}}
ChartKick now supports the feature.
You can use
<%= pie_chart data, suffix: "%" %>
I've started a new Rails (4.2.2) app, only with some basic functionality. But the javascript and css files aren't rendered:
I have installed the sprockets gem and I've tried explicitly adding the 'sprockets' gem to my Gemfile (and running bundle install), but it didn't help.
Here is my application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
And these two lines are in my application.html.erb
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
And they render as follows:
I have Ruby 2.1.6p336 installed on Windows 8.1
Does somebody know where to look for answers or know what is going wrong? I'm pretty new to rails.
i think you need to change your javascript and stylesheet tag like this. it fetches details from application.js and application.css not from default ones
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I'm trying to style checkboxes in my rails app.
<div class="form-group">
<%= f.label :tag_list %>
<p>Science</p>
<%= f.check_box :tag_list, { :multiple => true }, 'science', nil %>
<p>Math</p>
<%= f.check_box :tag_list, { :multiple => true }, 'math', nil %>
</div>
In my application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/button
//= require jquery-ui/datepicker
//= require jquery-ui/slider
//= require jquery-ui/spinner
//= require jquery-ui/tooltip
//= require jquery-ui/effect
//= require flatuipro
//= require flat-ui.min
//= require sweet-alert-confirm
//= require turbolinks
//= require_tree .
$(':checkbox').radiocheck();
I'm using something called flat-ui and am trying to apply the styles they provide for check boxes. How do I do this?
Looking at the documentation, it seems like the class checkbox needs to be given to the label, and the input needs to be inside the label. Your markup would then look something like this:
<div class="form-group">
<%= f.label :tag_list, class: 'checkbox' do %>
<p>Science</p>
<%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
<% end %>
</div>
Then, make sure you are calling $(':checkbox').radiocheck(); in your JavaScript, and that you have included the Flat-UI js file.
Update from chat:
Make sure that each input has its own label:
<div class="form-group">
<%= f.label :tag_list, class: 'checkbox' do %>
<p>Science</p>
<%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
<% end %>
<%= f.label :tag_list, class: 'checkbox' do %>
<p>Math</p>
<%= f.check_box :tag_list, { multiple: true }, 'math', nil %>
<% end %>
...
</div>
Also make sure that the JavaScript isn't called until the page has finished loading:
// application.js
$(function() {
$(':checkbox').radiocheck();
});
You need the radiocheck js file:
You can download the js file: radiocheck.js
Include radiocheck.js file in app/assets/javascripts folder.
Add this line in your application.js and the file will look like this:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require flat-ui.min
//= require radiocheck
//= require_tree .
$(function(){
$(':checkbox').radiocheck();
});
In a form, I have:
= link_to "Delete toy", #toy, :method => :delete, :confirm => "Are you sure?", :class => "btn btn-danger"
This generates the following html:
Delete toy
However, when I click the link, I simply get taken back to the show page of the toy. (I don't get the confirm popup either.) What am I doing wrong?
I added a = javascript_include_tag :all and = javascript_include_tag "application" inside my application.html.haml, per the recommendation a bunch of the other posts on SO about this exact question, but it didn't help.
UPDATE: this is what is in my application.js file:
//= require jquery
//= require jquery_ujs
//= require_tree .
Remove the = javascript_include_tag :all part of your layout. This is probably loading jQuery-UJS twice, the second overwriting all configured listeners.
With the asset pipeline, you'll only ever need to include "application", and never all the other files.
(same happens with the stylesheets)