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.
Related
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');
});
}
I'm having a problem with form_for and fields_for.
So, my problem is:
I had a form_for, and inside this form_for, I use a fields_for. Inside this fields_for, I use a form_tag (i used ajax for this form_tag).
But when I view the generated HTML, it didn't display form_tag, it only display form_for. And I didn't understand why.
Please explain for me, why it didn't display form_tag.
Here is my form_for:
<div class="row">
<%= form_for #real_estate, url: admin_real_estate_update_path do |f| %>
<%= f.fields_for(:client) do |client| %>
<%= text_field :real_estate, :assessment_start_at, value: #real_estate.assessment_start_at %>
<%= render partial: "admin/real_estate/form/assessment", locals: {real_estate_id: #real_estate.id} %>
<% end %>
<%= f.submit "Submut", class: "btn btn-primary"%>
<% end %>
</div>
Here is my form_for which i put inside fields_for:
<%= form_tag admin_search_assessment_path(real_estate_id), method: :post, remote: true do %>
<%= text_field_tag :company_name, params[:company_name] %>
<%= submit_tag "Submit" %>
<% end %>
And i tried to add <form></form> follow as:
<div class="row">
<%= form_for #real_estate, url: admin_real_estate_update_path do |f| %>
<form></form>
<%= f.fields_for(:client) do |client| %>
<%= text_field :real_estate, :assessment_start_at, value: #real_estate.assessment_start_at %>
<%= render partial: "admin/real_estate/form/assessment", locals: {real_estate_id: #real_estate.id} %>
<% end %>
<%= f.submit "Submut", class: "btn btn-primary"%>
<% end %>
</div>
And form_tag was display, but form_for didn't display.
Update:
So, i used $("form_2").submit(function() {....}); to solve this problem.
Actually, i still want to use form-nested.
Inside this fields_for, I use a form_tag (i used ajax for this form_tag)
N'est pas possible, mon ami.
--
Here's how it works...
form_for and form_tag both generate pure HTML forms:
<form action="/action" method="POST">
</form>
Many people get confused about how Rails works - it's really quite simple. Rails employs "helper" methods to generate pure HTML which your browser can read.
Browsers only understand HTML/CSS at the moment. Thus, whenever you send a request to Rails - it has to return that data, otherwise a "web page" simply wouldn't be able to be processed.
Thus, when you ask whether you can nest forms, you have to abide by how the forms work in pure HTML (spec):
Note you are not allowed to nest FORM elements!
HTML fill-out forms can be used for questionaires, hotel reservations,
order forms, data entry and a wide variety of other applications. The
form is specified as part of an HTML document. The user fills in the
form and then submits it. The user agent then sends the form's
contents as designated by the FORM element. Typically, this is to an
HTTP server, but you can also email form contents for asynchronous
processing.
In short, it means that everything within a <form> tag is counted as a form by HTTP. This means that if you have another <form> tag, it's going to cause an error, preventing either from working.
You know this already (otherwise you wouldn't have mentioned ajax).
Your main problem is the use of <form></form> inside your current <form> object. This will confuse HTML profusely, and thus I would recommend replicating the submission of a form, without the <form> object itself:
#app/views/admin/real_estate/form/assessment.html.erb
<%= text_field_tag "[company_name]", params[:company_name], id: real_estate_id %>
<%= button_tag "Submit", type: "button" , data: { id: real_estate_id } %>
#app/assets/javascripts/application.js
$(document).on("click", "button", function(e){
e.preventDefault();
var real_estate_id = $(this).data("id");
$.ajax({
url: "path/to/real/estate/form/assessment/" + $(this).data("id")),
data: {company_name: $("input[type=text]#" + real_estate_id).val()}
success: function(data) {
//do something on success
},
error: function(data) {
//do something on error
}
});
});
This code will still output what you need.
The difference will be two-fold:
The user will experience the same functionality (the input will still be present)
The embedded form will be passed to the main "form" submit, but will not be passed through your strong params method (making it
invisible to your controller)
In effect, you're replicating the functionality of an HTML form through Ajax. Whilst I still wouldn't do it this way, it will give you the functionality you require.
I'm having a rather weird problem using Rails 4, Turbolinks and a remote form. I have a form looking like:
<%= form_for [object], remote: true do |f| %>
<td><%= f.text_field :name, class: 'form-control' %></td>
<td><%= f.email_field :email, class: 'form-control' %></td>
<td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td>
<% end %>
This form adds (creates) a new object. It does however not always work:
When I load the page directly using the URL or a refresh; it works
When I navigate from my app to this page; it fails
When disabling Turbolinks for this link, the page worked perfectly.
I have two questions:
Why doesn't this work? Is this because the remote handlers aren't attached to the button because of a JQuery/Turbolinks problem?
How can I work around this problem?
Thanks in advance.
Solution
Thanks to #rich-peck, the solution was to add a piece of javascript that manually submits the form upon clicking the button:
<%= javascript_tag do %>
var id = "#<%= dom_id(f.object) %>";
var inputs = $(id).parent().find('input');
console.log(inputs);
$(id).parent().find('button').on('click', function(e) {
e.preventDefault();
$(id).append(inputs.clone());
$(id).submit();
});
<% end %>
This code adds javascript to the form table row, getting the inputs, appending them to the ID and submitting the form. The preventDefault(); prevents the query from getting sent twice when the page is refreshed and the form actually works.
Turbolinks
As mentioned, the problem with Turbolinks is that it reloads the <body> part of the DOM with an ajax call - meaning JS is not reloaded, as it's in the head
The typical way around this issue is to delegate your JS from the document, like this:
$(document).on("click", "#your_element", function() {
//your code here
});
Because document is always going to be present, it will trigger the JS continuously
Remote
With your issue, it's slightly more tricky
The problem is you're relying on the JQuery UJS (unobtrusive JavaScript) engine of Rails, which is difficult to remedy on its own
We've never had this issue & we use Turbolinks all the time - so I suppose the problem could be with how you're constructing your form / handling the request. This GitHub seemed to recreate the issue, and it was to do with the table
Maybe you could try:
<%= form_for [object], remote: true do |f| %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.submit button_name, class: 'btn btn-sm btn-primary' %>
<% end %>
Turbolinks don't fully reload your page, but only part of it. This is what makes them so fast, however if you have JavaScript requiring a full page reload you will run into trouble. The reason it does work with a refresh is because now you force the page to fully reload.
Edit: This gem might be worth trying out: https://github.com/kossnocorp/jquery.turbolinks
For a little bit of extra information about the inner workings of turbolinks: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
Or: https://github.com/rails/turbolinks
P.s. Also make sure the javascript_include_tag is within the head tag (and not in the body)
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'd like to use the Reveal Modal jQuery plug-in with my Rails 3.0.3 application.
What I want to do is create a child object from a parent object's index page. Right now I have links that pass the parent's id to the child controller's new method and then open the child's new.html.erb , like this:
<%= link_to 'Add an entry', new_entry_path(:course_id => course.id) %>
What I would like to do is open a modal containing a form for creating a new child object.
The Reveal plug-in requires "data-reveal-id" be present in the link tag, e.g.:
`Click Me For A Modal`
How/can I do this using Rails helper function like link_to?
Thanks!
Jim
The following will error out:
<%= f.submit :reveal-id => "myModal" %>
or
<%= link_to 'Add an entry', new_entry_path(:course_id => course.id),:reveal-id => "myModal" %>
Try the following instead:
<%= f.submit "data-reveal-id" => "myModal" %>
or
<%= link_to 'Add an entry', new_entry_path(:course_id => course.id),"data-reveal-id" => "myModal" %>
That will work.
I have used reveal recently and this is how it worked for me :-
=link_to "Sign Up", signup_path, :class=> "buttonForModal"
.Modal.reveal-modal
Things you want in your modal window goes here
I was using javascript to load the modal window
$(document).ready(function() {
$('.buttonForModal').click(function(e) {
e.preventDefault();
$('.Modal').reveal();
});
});
It is better to use js instead of "data-reveal-id"
Hope it helps!