Rendering datetime_select in Rails - ruby-on-rails-3

Current form code:
<%= form_for #booking do |f| %>
<%= render 'shared/error_messages', :object => f.object %>
<time class="field">
<%= f.label :date %>
<%= f.datetime_select :date_time, :prompt => { :hour => "Hour", :minute => "Minute" } %>
</time>
<% end %>
This renders each select item in a new row.
I couldn't post the image due to my noob StackOverflow status but I'll try to display it in interpretative text:
select year
select month
select day
...and so on with time.
Is there a simple way to render these fields in the same row ie date selectors in one row, time selectors in the next?
select year | select month | select day
Rendered html:
<time class="field">
<option value="2006">2006</option>
...edited for legibility...
<option value="2016">2016</option>
</select>
<select id="booking_date_time_2i" name="booking[date_time(2i)]">
<option value="1">January</option>
...edited for legibility...
<option value="12">December</option>
</select>
<select id="booking_date_time_3i" name="booking[date_time(3i)]">
<option value="1">1</option>
...edited for legibility...
<option value="31">31</option>
</select>
— <select id="booking_date_time_4i" name="booking[date_time(4i)]">
<option value="">Hour</option>
<option value="00">00</option>
...edited for legibility...
<option value="23">23</option>
</select>
: <select id="booking_date_time_5i" name="booking[date_time(5i)]">
<option value="">Minute</option>
<option value="00">00</option>
...edited for legibility...
<option value="59">59</option>
</select>
</time>

I wouldn't use the standard datetime_select helper, I would build a helper method with the select statements you wanted and styled the way you wanted.
Here is the link to the docs for the select view method: http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html
Just create the select statements to have the id and name values you need (ie booking_date_time_2i for month, 4i for hour etc...), and put them all in a helper so you can easily call them.

Related

EJS syntax error while compiling ejs code in Create Form

I have a syntax error when I try to render this part of my template with EJS (on a node server).::
I'm trying to show a view of a create form, so when the user leaves a blank input or doesn't select the dropdown option gets an error (using express validator).
I works fine with an input, validates an error and keeps the data of all other inputs (so user won't have to retype all over again)
But when using the option select, it's getting an error. Also the data should persist in the option select IF it's in blank or error in any other fields.
I'm quite sure the error is here:
<label class="combo-form_titles_create" for="os_min">OS Minimum Requirement</label>
<select
name="os_min"
class="textArea__Create <%= locals.errors && errors.os_min ? : null %>">
<option value="">Choose an Operating System</option>
<%
let systems = ['Windows XP', 'Windows Vista', 'Windows 7', 'Windows 10'];
%>
<% for (const oneSystem of systems) { %>
<option
value="<%= oneSystem %>"
<%= locals.oldData && (oneSystem == oldData.os_min) ? 'selected' : null %>
> <%= oneSystem %> </option>
<% } %>
</select>
<% if (locals.errors && errors.os_min) { %>
<div class="text-danger">
<%= errors.os_min.msg %>
</div>
<% } %>
When using the inputs only there is no error
<input class="textArea__Create" type="text" name="os_rec" placeholder="OS Recommended Requirement" value="<%= locals.oldData ? locals.oldData.os_rec : null%>"/>
<% if(locals.errors && errors.os_rec){ %>
<p class="tableAdmin_Error"><%= errors.os_rec.msg %> </p>
<% } %>
found it, it's in the line 4
class="textArea__Create <%= locals.errors && errors.os_min ? : null %>">
in the ternary operator Im not passing anything if true

<select> created by time_select is missing class="form-control"

Styling <select> in Bootstrap 3.3.7 can be done like so:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
The key is the class form-control. When I use time_select from Phoenix.HTML.Form in my html.eex that creates a <select>, the class is not added even when I specify it:
<div class="form-group">
<%= label f, :break, "Pause", class: "control-label" %>
<%= time_select f, :break, class: "form-control" %>
</div>
The resulting HTML looks like this:
<div class="form-group">
<label class="control-label" for="training_break">Pause</label>
<select id="training_break_hour" name="training[break][hour]">
<option value="0">00</option>
...
How do I add the class form-control to the <select> here?
I've noticed that other types of inputs do add the class, e.g. text_input:
<div class="form-group">
<%= label f, :title, "Titel", class: "control-label" %>
<%= text_input f, :title, class: "form-control" %>
</div>
This results in that:
<div class="form-group">
<label class="control-label" for="training_title">Titel</label>
<input class="form-control" id="training_title" name="training[title]" type="text">
</div>
Another thing I've found is this post: Adding a bootstrap class to rails form time_select field. It states the same problem, sadly there is no such HTML-specific parameter for Phoenix' version of that function.
Maybe I'm just missing something?
When you use a function that generates just one <select> (e.g. select), you can add the class like so:
<%= select f, :age, class: "form-control" %>
When you use a function that generates more than one <select>s (e.g. date_select), to add the class you need to address each one separately like so:
<%= date_select f, :date,
[
year: [class: "form-control"],
month: [class: "form-control"],
day: [class: "form-control"]
] %>
This will add the class form-control to all three generated <select>s.

Pagination inside of tabs

I have 2 tabs with bootstrap for user messages - inbox and outbox, and using kaminari
<div id="allmessages" >
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Inbox</li>
<li>outbox</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="inbox">
<%= render #incoming_msgs %>
<%= paginate #incoming_msgs %>
</div>
<div class="tab-pane" id="outbox">
<%= render #outgoing_msgs%>
<%= paginate #outgoing_msgs%>
</div>
</div>
</div>
</div>
Problem is, that when going on page 2 in the inbox and then clicking on the outbox tab I get to page 2 of the outbox..
http://localhost:3000/users/messages?page=2#outbox
is it possible to reverse the order or have a pagination per tab?
Passing the param_name option to the paginate method will allow you to page through each object array independently. Right now they are both using the default param name 'page'.
<div class="tab-pane active" id="inbox">
<%= render #incoming_msgs %>
<%= paginate #incoming_msgs, param_name: :incoming_msgs_page %>
</div>
<div class="tab-pane" id="outbox">
<%= render #outgoing_msgs%>
<%= paginate #outgoing_msgs, param_name: :outgoing_msgs_page %>
</div>
Make sure to reference the new param names in the controller
#incoming_msgs = mailbox.inbox.page(params[:incoming_msgs_page]).per(25)
#outgoing_msgs = mailbox.outbox.page(params[:outgoing_msgs_page]).per(25)
short answer - use ajax pagination
http://railscasts.com/episodes/174-pagination-with-ajax

RoR no route matches

I have this code in my routes:
controller :active_car do
put 'switch_car' => :update
get 'switch_car' => :edit
end
This is my code in on my edit page.
<% form_tag('switch_car', :method => :put) do%>
<div class="field">
<label for="car_info_id">Car Name:</label>
<%= select("", "car_info_id", #available_cars.collect {|v| [v.name, v.id]})%>
</div>
<div>
<%= submit_tag "Switch Car" %>
</div>
<% end %>
When I click submit I get the following routing error.
No route matches "/switch_car" with the url pointing to http://localhost:3000/switch_car?method=put
The get is working just fine as I end the url with switch_car I get my page to edit. For some reason the put definition is not working.
After changing method to second argument it just doesn't work. It seems to have post as the method still instead of put. Here is generated HTML
<form accept-charset="UTF-8" action="switch_car" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="_method" type="hidden" value="put" />
:method belongs to the "options" hash, which is form_tag's second argument, not the first.
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-form_tag
Please inspect the html generated by that tag and post it here.

Form doesn't work when adding :remote => true

It's not the only remote form I'm using, but I can't see the problem here. It's a simple table where every row has its own form and inline form fields.
<% for temporary_address in #temporary_addresses %>
<tr id="row-<%= temporary_address.id -%>">
<%= form_for temporary_address, :remote => true do |form| %>
<td>
<%= link_to "x", temporary_address, :method => :delete, :remote => true %>
<%= form.submit "s" %>
</td>
[... form fields ...]
<% end %>
</tr>
<% end %>
However, this only works when :remote => true is not used.
resources :temporary_addresses
is in the routes file. Delete links are working and the form is also working when not using :remote => true.
pressing submit with remote => true gives
Started POST "/temporary_addresses/12" for 127.0.0.1 at 2011-07-17 12:45:26 +0200
ActionController::RoutingError (No route matches "/temporary_addresses/12")
and submitting without remote => true works with the following response
Started POST "/temporary_addresses/12" for 127.0.0.1 at 2011-07-17 12:46:15 +0200
Processing by TemporaryAddressesController#update as HTML
Parameters: {[...] "commit"=>"s", "temporary_address"=>{[...]}, "id"=>"12"}
does someone have a clue about this?
EDIT 1
Removed the link_to :remote to destroy a record to check. Same error...
A rendered form looks like this:
<tr id="row-1">
<td>
</td>
<form accept-charset="UTF-8" action="/temporary_addresses/1" class="edit_temporary_address" data-remote="true" id="edit_temporary_address_1" method="post">
<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="vpFbYO7L9fVtBsWej37FUBobraYjjdWA/F8AjWTwC7A=" />
</div>
<td>
<input id="temporary_address_firstname" name="temporary_address[firstname]" size="30" type="text" value="John" />
</td>
<td>
<input id="temporary_address_lastname" name="temporary_address[lastname]" size="30" type="text" value="Doe" />
</td>
<td>
<input id="temporary_address_email" name="temporary_address[email]" size="30" type="text" value="john.doe#example.com" />
</td>
<td>
New record
</td>
<td>
<input id="temporary_address_submit" name="commit" type="submit" value="save" />
</td>
</form>
</tr>
Solved!
Simple thing.. Firefox rearranges things when they're not valid html. The output given above is the source code. Now that I've seen the generated source code (thanks to web development toolbar) the problem is clear: The hidden form fields, generated in divs with display:none have been moved outside of the form.