If have a RoR application that I upgraded from 2 to 3.2, and everything eventually got fixed, but I have some strange behavior from a form_tag.
The form code is:
<%= form_tag '/public/checkem' do %>
<%= hidden_field "vals", value = picks.draw %>
<%= hidden_field "val_index", value = xcount %>
<%= submit_tag picks.draw_date %>
<% end %>
Where picks.draw is an array which, when executed in turn generates:
<form accept-charset="UTF-8" action="/public/checkem" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ET8OgURJpwvnQ+18lK1xKaFXTBLMuMXVw4AoM/gVEYw=" /></div>
<input id="vals_6,16,45,54,60,15" name="vals[6,16,45,54,60,15]" type="hidden" />
<input id="val_index_5" name="val_index[5]" type="hidden" />
<input name="commit" type="submit" value="10/25/2013" />
</form>
The idea being that the hidden input (vals) contains an array of numbers. This value is then processed correctly as an array in the /public/checkem function, but when it gets re-rendered here:
<span class="elem" style="background-color: #b0b040; color: #000000;"><%=#xpicks[0]%></span>
where #xpicks[0] is the first element of the array
<span class="elem" style="background-color: #b0b040; color: #000000;">{"2</span>
It's picked up what looks like the start of a hash. When I look in the log file I see this line, which confirms that the array was changed to a hash when the form was submitted:
Processing by PublicController#checkem as HTML
Parameters: {"utf8"=>"?", "authenticity_token"=>"ET8OgURJpwvnQ+18lK1xKaFXTBLMuMXVw4AoM/gVEYw=", "vals"=>{"2,11,42,64,74,2"=>""}, "val_index"=>{"1"=>""}, "commit"=>"11/05/2013"}
This all worked fine in version 2, but I cannot see where, or why the array gets passed as a hash.
Apparently the use of "hidden_field" is indicated when a model and "form_for" is used. If there is no model you should use "hidden_field_tag"
I have an application with a large Text field:
<%= simple_form_for(#language) do |f| %>
<div class="form-inputs">
<%= f.input :text_message, :input_html => { :class => "span8", rows: "12" } %>
</div>
And I'm trying to add this HTML and Javascript which allows me to click a button to add a predetermined value into the textfield. Right now it works but I can't figure out how to link it to the RoR textfield.
<form name="virtual">
<input type="text" name="text"/>
<input type="button" onclick="last_name()" value="Last Name" style="border:none;"/>
<input type="button" onclick="first_name()" value="First Name" style="border:none;"/>
</form>
<script type="text/javascript">
function last_name(){
document.forms["virtual"]["text"].value += "{last_name}";
}
function first_name(){
document.forms["virtual"]["text"].value += "{first_name}";
}
</script>
So my question is, how can I combine these two so that selecting the buttons will add "{last name}" or {first name} to the text_message field in the Language model, and not the plain html form.
Edit: To provide more context - later on these variables like {last_name} will be parsed out and replaced with their associated fields - but for now that's not relevant as all I'm trying to do is create buttons that input the actual string "{last_name}" or "{first_name}" into the textfield. This JS was the only way I could figure out to do this
Thanks!
I have the following form:
= form_tag '/posts', {id: "link-form"} do
= text_field :post, :link
= submit_tag "Add link", {id: "submit-button"}
, which renders:
<form accept-charset="UTF-8" action="/posts" id="link-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input id="post_link" name="post[link]" type="text">
<input id="submit-button" name="commit" type="submit" value="Add link">
</form>
It seems that Rails automatically add another div in the second line:
<div style="margin:0;padding:0;display:inline">
This div inherits everything from its parents, and I can't get access to this div (such as assigning an ID) to change its appearance.
How I can access this div, or how to go around it?
Its div for hidden inputs with existing data.
You do not have to touch it.
Using simple_form_for, Bootstrap and Rails 3. In a form:
<%= f.input :upload, label: 'PDF file:' , input_html: {accept: ('application/pdf') } %>
I don't know how I'd style this so that the "choose file" button can have a different class ('btn btn-primary').
Additionally, when using with Bootstrap at least, its severely misaligned by default. See attached image.
Finally, how do I redefine the text from "No file chosen" to "Chose file" when there isn't one added yet, and show the file name when there is one.
This is how I do it:
In the view add your form file field and hide it
Add a styled additional field just to display the file name
Add a button to trigger the file browse dialog
<div class="control-group">
<div class="attach-set">
<%= f.input :real_file, input_html: { hidden: true }, label: 'Upload Attachment' %>
<div class="input-append">
<input id="file-display" class="input-large uneditable-input" type="text">
<a id="upload-btn" class="btn"><i class="icon-upload-alt"></i> Browse</a>
</div>
</div> <!-- /attach-set -->
</div> <!-- /control-group -->
In your JS (Coffee w/ jQuery shown), pass the click from the display button onto the real file input and when they select a file drop the file name in the display text field (I drop the path so that I don't see C:\FakePath....)
$(document).ready ->
# ------------------------------------------------------
# pretty-fy the upload field
# ------------------------------------------------------
$realInputField = $('#real_file')
# drop just the filename in the display field
$realInputField.change ->
$('#file-display').val $(#).val().replace(/^.*[\\\/]/, '')
# trigger the real input field click to bring up the file selection dialog
$('#upload-btn').click ->
$realInputField.click()
This worked great for me and only requires HTML
<label class="btn btn-primary">
Add a file!
<span style="display:none;">
<%= f.file_field :image, required: true, multiple: true, name: 'picture' %>
</span>
</label>
I ran across and am using Jasny's extension to Bootstrap 3. It seems to work well so far.
No JS required, just plain css
scss
.fileinput-button {
position: relative;
overflow: hidden;
float: left;
margin-right: 4px;
width: 110px;
height: 32px;
input{
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
}
html / slim
span class="btn btn-success fileinput-button"
i.fa.fa-pencil
span
| Select File
= f.file_field :cover_ar
I recommend using compass for cross browser compatibility
As #rafaelfranca said you can't style file input but you can add your own button which will be clicking your hidden original button. See example here http://jsfiddle.net/rUdf2/6/
Every Browser has a different type of file input field button and this makes it a pain. You can play a little with css. This has given me a basic styling with JS without the annoying "No file chosen" text in chrome and Safary:
$(document).ready(function() {
$(".your_button").css("width", "80px");
});
Otherwise the best solution is to hide it and show a fake one that intercepts the click:
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
With respect to the question of how to show that a file has been uploaded, a basic solution with jquery file upload is to detect the upload complete event and replace some of your text with a success message (The exact file name I believe it is not possible to obtain with modern browsers):
$(".your_button").fileupload({
dataType: "json",
done: function(e, data) {
$(".place_for_your_text").text("File uploaded.");
}
});
In summary, a basic solution is to use javascript in your assets to:
Hide the annoying "No file chosen text" with css.
Place your "Chose file" text next to the button and give it a class you can reference.
Replace the text with "File uploaded"
No fancy shiz required:
HTML:
<form method="post" action="/api/admin/image" enctype="multipart/form-data">
<input type="hidden" name="url" value="<%= boxes[i].url %>" />
<input class="image-file-chosen" type="text" />
<br />
<input class="btn image-file-button" value="Choose Image" />
<input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
<br />
<br />
<input class="btn" type="submit" name="image" value="Upload" />
<br />
</form>
JS:
$('.image-file-button').each(function() {
$(this).off('click').on('click', function() {
$(this).siblings('.image-file').trigger('click');
});
});
$('.image-file').each(function() {
$(this).change(function () {
$(this).siblings('.image-file-chosen').val(this.files[0].name);
});
});
CAUTION: The three form elements in question MUST be siblings of each other (.image-file-chosen, .image-file-button, .image-file)
If you are using Bootstrap, Simple Forms, Jasny, and ReFile, this post may be of interest to you refile simple_form undefined method attachment_field
<label class="btn btn-primary"
<%= f.input :upload, label: 'PDF file:',
class:"hidden", input_html: {accept: ('application/pdf') } %>
</label>
Works for me
Using class="hidden"
PS: I'm using Tailwind CSS
I am trying to generate a hidden div with a rails partial inside it. My intention is to use that hidden div as target for fancybox to open the edit form in a popup.
My partial code looks like:
<div style="display:none">
<div id="inline-edit-form-<%=feed_item.id%>" class="inline-edit-form">
<%= form_for (feed_item) do |f| %>
<%=render :partial => 'calendars/form', :locals => { :f => f }%>
<% end %>
</div>
</div>
Now, in Chrome, the layout is as intended and the partial is hidden initially. Fancybox manages to render this partial when its source link is clicked and things work fine. But in Firefox, the hidden DIV is not hidden by default and all controls are displayed. I checked HTML DOM structure on both Chrome and Firefox and there are huge differences.
Markup in Chrome (correct):
<div style="display:none">
<div id="inline-edit-form-596" class="inline-edit-form">
<form accept-charset="UTF-8" action="/calendars/596" class="edit_calendar" d="edit_calendar_596" method="post"></form>
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="">
</div>
<div>
<label for="calendar_event">Event</label><br>
<input class="inline-edit-input" id="calendar_event" name="calendar[event]" size="30" type="text" value="Interesting event">
</div>
The above markup is correct and what is expected. The shocking markup in Firefox is:
<div style="display: none;">
<div class="inline-edit-form" id="inline-edit-form-598">
</div>
</div>
<div style="margin: 0pt; padding: 0pt; display: inline;"></div>
<div>
<label for="calendar_event">Event</label><br>
<input type="text" value="Another interesting important event" size="30"
name="calendar[event]" id="calendar_event" class="inline-edit-input">
</div>
This mark up is not only incorrect, its not even rendering the FORM tag at all. I checked and rechecked my CSS and DOM structure but Firefox simply choses to screw the layout.
Any help?
Thanks for the hint. There was one validation error which fixed the error. The error was that I was including inside the table. After moving the hidden divs outside the table, the issue got resolved.