How to integrate a packaged wysiwyg editor to my Rails app - ruby-on-rails

I decided on using bootstrap-wysihtml5-rails, which is a packaged wysiwyg editor with Twitter bootstrap built in. My question is about how to "activate" the editor inside the form which I created with the form_for helper.
I have the following form which I would like to use the wysiwyg editor in:
<%= form_for(#question) do |f| %>
<%= f.label :title, "Title" %>
<%= f.text_field :title %>
<%= f.label :content, "Content" %>
<%= f.text_area :content %> <!-- make this into wysiwyg editor -->
<%= f.submit "Create question", class: "btn btn-large btn-primary" %>
<% end %>
The instructions noted to simply add the following:
<textarea id="some-textarea" class='wysihtml5' placeholder="Enter text ..."></textarea>
<script type="text/javascript">
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
</script>
However, I am a bit lost about how I could toggle just my text_area section to make it into a wysiwyg. I looked into the Rails guide for form_for, but didn't see how I could insert javascript or even apply a css class to a particular field. Thanks for your help.

Add html class 'wysihtml5' to any text_area you want to implement the editor on.
<%= f.text_area :content, class: 'wysihtml5' %>
You can either paste the script inline as suggested, or put a global initializer at app/assets/javascipts/application.js:
$(function() {
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
})

Related

how to trigger onClick event on form_for textarea element

I'm using ruby on rails. I have a form created using form_for with a textarea. When the text area is clicked, I would like the height of the textarea to grow bigger. Coming from an asp.net mvc background, I would think to add an onClick event to the text area and then use jquery to add height px to the text area. I'm struggling on how to do this using rails:
<%= form_for(#person) do |f| %>
<%= f.label :name %>
<%= f.text_field :title, class: 'form-control' %>
<br/>
<div class="text">
<%= f.text_area :notes, placeholder: "add notes here...", id: "tester"%>
</div>
<%= f.submit "Post", class: "btn btn-primary" %>
<% end %>
I've managed to add an id of 'tester' to the text_area. I then placed this code in the application.js file:
$(document).ready -> {
$('#tester').bind('click', function() {
$('#tester').style.height = "200px";
});
}
I got this idea from the rails documentation here: http://guides.rubyonrails.org/working_with_javascript_in_rails.html
However this does not seem to be triggering the click event at all. How can this be accomplished in rails? Note: I am not familiar with coffee script and would prefer to use vanilla js.
Your element does not actually have an id "tester". Rails creates another id for it based on the object you're working on. Try to change $('#tester') in your javascript to $('.text textarea') and I think it will work.
I've discovered the answer. My code actually simply had an error in syntax. Here is the correct syntax for javascript code:
$( document ).ready(function() {
$('#tester').bind('click', function() {
$('#tester').attr("rows", "15");
});
});
The code I had originally for form_for was correct
Bind tester() function with onclick of textarea. When a user clicks on textarea the tester() will be triggered.
<%= f.text_area :notes, placeholder: 'add notes here...', onclick: 'tester()'%>
$( document ).ready(function() {
function tester() {
$(this).css('height', '200px');
});
}

create form fields on the fly from drop down

I dint even understand how to search for my problem scenario in google.
Problem : When a user selects from a drop-down, the below form fields should change accordingly.
Example : If a user selects "Human" from Drop-down , then below form_fields should be shown like "age" field ,"ethnicity" field etc..
If a user selects "Event" from drop-down, below form fields should show "Date", "venue" etc..
and By default we will have "SUBMIT" button.
Can anyone tell how to achieve this ? Any help with simple_form ruby gem also would be helpful.
You can do this with some simple javascript. Lets say you have a form with the following fields
<%= f.select :some_field, %w[Human Cat], {}, {:class => 'my-select'} %>
<div class="human">
<%= f.label :age %><br>
<%= f.text_field :age %>
</div>
<div class="cat" style="display:none;">
<%= f.label :sub_species %><br>
<%= f.text_field :sub_species %>
</div>
Now add some javascript to make it dynamic
<script>
$(".my-select").change(function(){
if($(".my-select").val() == "Human"){
$(".human").css('display', 'block');
$(".cat").css('display', 'none');
}else{
$(".human").css('display','none');
$(".cat").css('display', 'block');
}
})
</script>
This is quite easy to achieve with the simple_form gem and some simple javascript.
View
<%= simple_form_for #object do |f| %>
<%= f.input :attribute_name, :collection => ['Human', 'Event'], :input_html => { :class => 'dropdown' %>
<div class="toggle human" style="display:none;">
<%= f.input :age %>
</div>
<div class="toggle event" style="display:none;">
<%= f.input :date %>
</div>
<%= f.button :submit %>
<% end %>
The key here is wrapping the fields you want to toggle in div with specific selectors.
Then we look for a change event on the dropdown field, and toggle our divs accordingly.
Javascript
$('.dropdown').change(function() {
// hide divs first
$('form .toggle').hide();
// get value from dropdown
var divClass = $('.dropdown').val().toLowerCase();
// show necessary div
$('.' + divClass).show();
});
Using this approach, you don't need to write the specific case for every value of the dropdown, but can use the lower case value of the dropdown as the selector for the div.
Here is a simple example with static markup.

Error: Syntax - Html to RoR

I have a _form and in this _form I am putting one icon in front some fields.
I want wich when mouse hovers over it, it displays a tooltip. The text is there in translate file:
..
t('messages.issue_tittle_placeholder')
..
I can do this using only html, but I want do this using RoR.
<div class="clearfix">
<%= f.label :title %>
<div class="icon-question_enabled" rel="tooltip"
title="Keaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa">
</div>
I tried to this:
<%= f.label :title %>
<%= image_tag('icons/question_enabled.png', class=> "tooltip-help") %>
Someone can help me?
Sorry for my english.
According to your html snippet, your icon is just a <div> with a css class that has a sprite background instead of an <img>. You should do:
<%= f.label :title %>
<%= content_tag(:div, nil, class: 'icon-question_enabled', rel: :tooltip, title: "Keaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa") %>
Your syntax is off. For > Ruby 1.9 it should be:
<%= image_tag('icons/question_enabled.png', class: "tooltip-help") %>
else < 1.8
<%= image_tag('icons/question_enabled.png', :class => "tooltip-help") %>

Rails: Best way to conditionally show/hide a form field?

I have a model Document which has attributes kind and context. Kind is an integer that's used as as enum (using the excellent active_enum gem). Context only applies to documents of kind '2', i.e. if a document is any kind other than 2, context will be blank.
So in the form page to create a new Document, I have a <select> to choose the kind, and a textarea for the context, which is initially hidden:
<%= form_for #document do |f| %>
...
<%= f.text_area :context, placeholder: 'Context', style: 'display:none' %>
<%= f.select :kind, Document.active_enum_for(:kind).to_select %>
...
<% end %>
And the textarea is shown and hidden using jQuery's show() and hide() methods in a function that's bound to the change() event on the dropdown.
So far, so good. But on the edit page for documents, I don't want the context textarea to always be hidden on the initial page load, because we may be editing a document of kind 2. So I want the textarea to initially be shown if we're editing a document of kind 2, but hidden in other cases.
Here's what I have now:
<% if #document.kind == 2 %>
<%= f.text_area :context, placeholder: 'Context' %>
<% else %>
<%= f.text_area :context, placeholder: 'Context', style: 'display:none' %>
<% end %>
Is there not a better way of doing this? This feels a bit wordy and redundant to me; is there no way I can just have one call to f.text_area and include the style: option conditionally?
Or am I overthinking this?
Use this :
<%= f.text_area :context, placeholder: 'Context', style: "#{'display:none' if #document.kind == 2}" %>
or you can add a css class for this,
display-none{
display:none;
}
<%= f.text_area :context, placeholder: 'Context', class: "#{'display-none' if #document.kind == 2}" %>
Thanks
or you can try javascript ? it's a way to reduce the duplicate code, if you have many fields to hide, this way has some advantages.
<%= f.text_area :context, placeholder: 'Context' %>
<script type="text/javascript">
$(function(){
if ($('#document_kind').val() != '2')
$('#document_context').hide();
});
</script>

How to hide part of a rails 3 form depending on value selected from dropdown menu

I have a a partial, _form for one of my views in rails. It looks like so:
<%= form_for(#project) do |f| %>
<div class="field">
<%= f.label "Project Status" %><br />
<%= f.select :status, ["In Progress", "Cancelled"] %>
</div>
<div class="field">
<%= f.label "Capital Cost" %><br />
<%= f.text_field :capital_cost %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I'd like the "capital cost" part of the form to be greyed out unless "In Progress" is selected from the dropdown menu, without having to reload the page. Is this possible? I saw some solutions using javascript, but I'm a complete beginner and couldn't get my head around them (unfortunately I don't have the time to learn to use js before I have to finish this project). Cheers!
For this you need some JavaScript. Use an onchange event handler to monitor the <select> input for changes. Compare the input value and conditionally set/unset a disabled attribute on the #project_capital_cost input. You can use jQuery for this.
By default, Rails 3 enables jQuery by including the jquery_rails gem in your Gemfile. Assuming you have jquery_rails included in your app and your <select> and <input> tags have #project_status and #project_capital_cost IDs respectively, add the following script into your _form partial with necessary modification:
<script>
$(document).ready(function(){
if($('#project_status').val() != "In Progress"){
$("#project_capital_cost").attr('disabled','disabled');
}
else{
$("#project_capital_cost").removeAttr('disabled');
}
$('#project_status').change(function(){
if($(this).val() != "In Progress"){
$("#project_capital_cost").attr('disabled','disabled');
}
else{
$("#project_capital_cost").removeAttr('disabled');
}
})
});
</script>
EDIT:
To hide div give some id to it:
<div class="field" id="my_div">
<%= f.label "Capital Cost" %><br />
<%= f.text_field :capital_cost %>
</div>
Then replace
$("#project_capital_cost").attr('disabled','disabled'); with $("#my_div").css('display','none')
and
$("#project_capital_cost").removeAttr('disabled'); with $("#my_div").css('display','block') in script.
To grey out the input, use the HTML input tag attribute disabled.
<input disabled="disabled">
Which from Rails is
<%= f.text_field :capital_cost, :disabled => "disabled", :id => "capital_cost_input" %>
To enable it when "In Progress" is selected will require AJAX and Javascript, but there is some help from Rails.
First
<%= f.select :status, ["In Progress", "Cancelled"],
{},
"data-remote" => true, "data-url" => ..._path %>
This will set the onchange attribute for you and make the AJAX call.
Add a route to handle the AJAX call, and supply the URL for the "data-url".
In the view template for the AJAX action, write the Javascript to enable the input.
Something like
$('#capital_cost_input').removeAttr("disabled")

Resources