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');
});
}
Related
I am working with Active Storage of RubyonRails, it seems that when a form is submitted certain JavaScript events are executed (at least this is what my understanding is) and I am trying to listen to these events.
My form is pretty simple just an input field and image field
<%= form_with(model: to_do, local: true, id: 'image_form') do |form| %>
<div class="field">
<%= form.label :title %>
<%= form.text_field :title, id: :to_do_title %>
</div>
<div class="field">
<%= form.label :image %>
<%= form.file_field :image, direct_upload: true %><br>
</div>
<div class="actions">
<%= form.submit id: 'submit_button' %>
</div>
<% end %>
Inside application.js file I added the following code to test what happens but unfortunately none of my tries work
addEventListener("direct-upload:initialize", doSomething, false);
function doSomething(e) {
alert("Event is called: " + e.type);
}
document.getElementById("image_form").addEventListener("direct-upload:initialize", function() {
console.log('direct-uploads:initialize')
});
document.getElementById("image_form").addEventListener("direct-uploads:end", function() {
console.log('direct-uploads:start')
});
When I submit the form although the data gets saved in database but my event listener does not listen to the event as i do not get any alert.
So my question is
How to listen to these Active Storage javascript events when a form is submitted?
Any help will be really appreciated.
It's likely that the form submission is happening too quickly, and therefore you can't see any of the event listener's output.
Start with adding this to your view with your form:
<%= form_with(model: to_do, local: true, id: 'image_form') do |form| %>
... form stuff ...
<% end %>
<script type="text/javascript">
console.log(document.querySelector('#image_form')); // Log the form, for debugging
document.querySelector('#image_form').addEventListener('direct-uploads:start', function() {
console.log('Event was called');
});
</script>
Additionally, you may want to preserve your web browser's console log prior to submitting the form, so you'd see the log message.
You can listen to events on the input field itself.
So in your case it will be
"#{model_name}_#{attachment_name}" which is to_do_image
document.getElementById("to_do_image").addEventListener("direct-upload:initialize",
function() {
console.log('direct-uploads:initialize')
});
document.getElementById("image_form").addEventListener("direct-uploads:end", function() {
console.log('direct-uploads:start')
});
I have a gem installed : http://toopay.github.io/bootstrap-markdown/
This library is supposedd to turn a textarea element into a stylized mardown editor.
To do this I used the following code:
<div class="well col-md-10 col-md-offset-1">
<%= form_for(:post, :url => {:action => 'create'}) do |f| %>
<%= f.text_field(:title, class: 'form-control')%>
<%= f.text_field(:description, class: 'form-control')%>
<%= f.text_area(:content, rows: 15, "data-provide" => "markdown")%>
<%= f.button "Submit", type: 'submit', class: 'btn col-md-4 col-md-offset-4 btn-large btn-success'%>
<% end %>
</div>
Initially I put this code on my root page and it worked perfectly.
I then created a new controller and moved it to a different view. I was accessing that view by manually typing the url in the browser: localhost:3000/controller/view and the page loaded perfectly.
Result here:
However, when I access the page through a link on a different page, the form was not stylized.
Result:
The odd thing is that if I reload the page it applies all the changes.
I made a temporary ugly hack that reloads the page one on every access:
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1){
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
}
});
But there must be a decent explanation for what is going on.
I went through the library itself and added some console.log statements.
It seems that the library is loaded and initialisez on the home page but when I click the link it does not run anything anymore.
I am trying really hard to understand if this is a rails problem or a library one.
You have an issue with Turbolinks. First, remove data-provide attribute to initialize input yourself and add a class, like markdown-editor.
<%= f.text_area(:content, rows: 15, class: "markdown-editor")%>
Second, add a Javascript initializer:
$(document).on('ready page:load', function(){
$(".markdown-editor").markdown()
});
Then it will be initialized on each page load.
Here is the part of code I am working on.
<td class= "block" id=<%= dom_id(Block.find(block.id)) %> colspan=2>
<%= form_for block do |f| %>
<%= f.text_area :content, :size => "5x4" %>
<%= f.hidden_field :id_case %>
<%= f.hidden_field :canvas_id %>
<%= f.submit "Submit", class: "save" %>
<% end %>
</td>
I would like to add another form under this one, still in the "td". And I would like this one to be submitted when I drag a special element in the (which is droppable)
I figured out that forms can have the data-remote attribut, but I didn't really get how we have to use it. Is this attribute made for execute javascript after we've submitted the form or is it a helper that submits the form after a special element ?
If this is the second case, it really fits with my idea but I really didn't understand how to use it.
Thanks for your help
I am not sure exactly what you want to know here, but a form with data-remote="true" means that it will be submitted by Ajax rather than a 'normal' submit. You can add remote: true to your form like this:
<%= form_for(#post, remote: true) do |f| %>
...
<% end %>
The resulting form will have a data-remote="true".
To submit a form by Ajax after you have dropped your element you can do the following using jQuery:
$("#your-droppable-element").droppable({
drop: function( event, ui ) {
$('#your-form').submit();
}
});
I hope that helped :)
I have the following view in my Ruby on Rails application. I want to be able to display a content of a .txt File (the path is saved in <%=file.info%>) with a popup. I included already a form for a popup. The problem is in the javascript. If I place the following javascirpt before form_tag
EDIT
<script type='text/javascript'>
$(function(){
$("#blob").popover({ title: 'info' });
});
</script>
it works only for the first record, another Info-buttons do not popup. And theoretically, i have to put the javascript after <div class="my_view"> but then it does not work at all.
<%= form_tag what_to_do_files_path, method: :get do %>
<%= button_tag :class => "btn btn-primary", :name => 'pictures' do %> Analyze<% end %>
<button type="button" id="check_all" class="btn"> Check/Uncheck all</button>
<%= button_tag :class => "btn btn-warning", :name => 'delete' do %>Delete <% end %>
<% #files.each do |file| %>
<div class="my_view">
<p><td></td><%= check_box_tag "fils[]", file.id %> <%= file.name %></p>
<% laa=File.read("#{Rails.root}"+"/public"+file[info]) %>
hover for popover
SO, my question is: How can I display the .txt File for each record, saved in the database ?
Thanks in advance
Don't use an ID to tag your "blob", use a class. You are only allowed to have one instance of an ID per page.
When calling $("#blob").popover({ title: 'info' });, it's going to go for the first instance of id="blob" that it finds. If you change it to a class, you can write
$(".blob").popover({ title: 'info' });
and it should work for all items which have the class blob.
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();
});
})