I'm just starting to learn ROR and currently make my own first app - ToDo list. I almoust finished it, it worked fine, BUT I wanted to improve the look by changing the CSS. I do not know the reason, but now when I click "New task" modal window opens with an error on the whole page and it is inactive. See screenshot. Experimental way I removed all the changes in the css, but the problem is not solved.
There css settings for modal window:
.modal form {
margin-bottom: 10;
}
span.error {
color: red;
margin-left: 5px;
}
And this is html.haml for it:
.modal-header
%h2
= task.new_record? ? 'New Task' : "Edit task #{task.title}"
= simple_form_for #task, class: 'clearfix', remote: true do |f|
.modal-body
= f.input :title
= f.input :note
= f.input :completed, as: :string, input_html: { class: 'datepicker', value: task.completed.present? ? localize(task.completed, format: '%d/%m/%Y') : nil }
.modal-footer
= f.submit 'Save', class: 'btn btn-primary'
If need to send some other code that I can do it. I would be grateful for any help!
ADDED: There is html.haml of layout where is button of modal:
!!!
%html
%head
%title ToDo
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
= csrf_meta_tags
%body
#header/
%h1 ToDo
%p time management application
.text-center
= link_to 'New task', new_task_path, class: 'btn btn-primary', remote: true
.text-right
%strong= current_user.email
.text-right
= link_to 'logout', destroy_user_session_path, method: :delete
= yield
ADDED2. Yes, the modal is triggered via javascript. There is code:
m = $('#modal');
m.html('<%= j(render partial: 'task_form', locals: {task: #task}) %>');
m.modal('show');
$('#modal').integrateDatepicker();
And I do not quite understand - html.haml code for modal posted above ... (start from .modal-header)
I tried to check all potential pages through bootlint, but no error is found.
Related
I'm creating a website called NoteIt (using HAML), where users can create notes, and only view the notes they've created. How do you select a link_to part to style it?
Here is my application.html.haml file:
!!!
%html
%head
%title NoteIt | Your online Notebook
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header
.header_inner
%h3 NoteIt << Here is where the NoteIt sign is placed
%nav
-if model_signed_in?
= link_to "New Note", new_note_path
= link_to "Sign Out", destroy_model_session_path, method: :delete
- else
= link_to "Log In", new_model_session_path
%p.notice= notice
%p.alert= alert
= yield
I solved it. All you need to do is change the margin-top and margin-bottom, and set it to the desired amount of px. For the logo, I wrote NoteIt with an h1 tag.
Can someone tell me how do I add a simple form in my rails app? I created a form on a separate page and it works fine, but how do I implement it on my static page?
My app/views/contact/_form.html.haml
.container
%h1 Contact
= simple_form_for #contact, :html => {:class => 'form-horizontal' } do |f|
= f.input :name, :required => true
= f.input :email, :required => true
= f.input :message, :as => :text, :required => false, :input_html => {:rows => 10}
.hidden
= f.input :nickname, :hint => 'Leave this field blank!'
.form-actions
= f.button :submit, 'Send message', :class=> "btn btn-primary"
My contacts controller:
class ContactsController < ApplicationController
def new
#contact = Contact.new
end
def create
#contact = Contact.new(params[:contact])
#contact.request = request
if #contact.deliver
flash.now[:error] = nil
else
flash.now[:error] = 'Cannot send message.'
render :new
end
end
end
Where I want to add the form, (index.html.haml)(static page)
#callouts2
.callout_inner
.wrapper
.callout
=render 'contacts/form'
My routes.rb
Rails.application.routes.draw do
devise_for :users
resources :posts do
member do
get "like", to: "posts#upvote"
get "dislike", to: "posts#downvote"
end
resources :comments
end
authenticated :user do
root 'posts#index', as: "authenticated_root"
end
resources "contacts", only: [:new, :create]
root 'pages#index'
I also have another 'Thank you for your message' page in views/contact/create.html.haml, I need to redirect them to that page as well.
EDIT: I added a =render 'contacts/form' inside my index page but it gives me an error:
ArgumentError in Pages#index Showing
C:/Sites/blogger/app/views/contacts/_form.html.haml where line #3 raised:
First argument in form cannot contain nil or be empty Trace of
template inclusion: app/views/pages/index.html.haml
If your form is called "_form", You could do something like:
render "form"
I'm not familiar with haml, not sure what other syntax is required, but that is how you add a form into a page.
It is difficult to explain my issue, so I will post the relevant code and hopefully that will make more sense.
I have a form, which includes a second form.
_form.html.haml:
= form_for #question, :html => { :class => "form-horizontal" } do |f|
...
%h3 Parts
%ul
= f.fields_for :question_parts, #question.question_parts do |builder|
= render 'question_part_fields', f: builder
= link_to_add_fields 'Add Part', f, :question_parts
.form-group
.col-sm-offset-2.col-sm-10
= f.submit :class => 'btn btn-primary'
_question_part_fields.html.haml:
%li.question_parts
.......
= f.fields_for :correct_answer do |builder|
= render 'correct_answer_fields', f: builder
.form-group
.col-sm-offset-2.col-sm-10
= f.hidden_field :_destroy
= link_to 'Remove Part', '#', class: 'remove_fields'
%hr
_correct_answer_fields.html.haml:
.form-group
= f.label :correct_answer, :class => 'col-sm-2 control-label'
.col-sm-10
%h5 Raw (text, ASCIImath)
= f.text_area :content, :class => 'form-control'
%h5 Preview
#answer_preview
The problem is that when I load the form, all the different parts load properly, but when I click "Add Part", it renders the _questions_part_fields, but not the _correct_answer_fields.
Any ideas why this is and how I could fix it?
Thanks
This is my form for now in my new_html_erb.
We are doing a promotion for the next two weeks
<%= simple_form_for #subscription, :html => { :class => 'form-horizontal'} do |f| %>
<%= f.input :manual_expiry_date %>
<%= f.association :user %>
<%= f.button :submit, :class => 'btn btn-primary'%>
<% end %>
I have used twitter bootstrap on and off. The form that I am working on for a rails application is using bootstrap.
How do I add bootstrap datepicker to manual_expiry_date ?
How do I center my simple_form_for?
I have tried putting the form in a container, then a row, then adding form control all in divs. There was no marked change. I have tried adding it as a class to simple_form but still the same.
Thank you for the help.
Twitter Bootstrap dont have in his core a date-picker, buy you can use "DatePicker For Bootstrap" www.eyecon.ro/bootstrap-datepicker/
You need to specify the class of the object
<%= f.input :manual_expiry_date, input_html: { class: 'date_picker' } %>
and then
$('.date_picker').datepicker()
My use case is simple, in a page called dashboard/incomes I display a form to update a record of type IncomeSetting.
#income-setting-form
h4 Income Settings
p Please set your Income Settings using the form below.
= render 'income_settings/form'
This generates the form to edit this type of obejct:
= simple_form_for #income_setting do |f|
= f.hidden_field :user_id
= f.error_notification
.form-group
= f.label :amount
= f.input_field :amount, required: true, class: 'form-control'
= f.error :amount, id: 'amount_error'
= f.association :income_frequency_type, label: 'Frequency:', collection: IncomeFrequencyType.order('id ASC'), include_blank: false, wrapper_html: { class: 'form-group' }, input_html: { class: 'form-control' }
.form-group
= f.label :start_date
= f.input_field :start_date, required: true, as: :string, class: 'form-control datepicker'
= f.error :start_date, id: 'start_date_error'
= f.association :savings_rate_type, label: 'Savings Rate:', collection: SavingsRateType.order('name ASC'), include_blank: false, wrapper_html: { class: 'form-group' }, input_html: { class: 'form-control' }
.form-group
= f.label :description
= f.input_field :description, required: true, class: 'form-control'
= f.error :description, id: 'amount_error'
button.btn.btn-primary.btn-block type='submit' Save
To keep things RESTful and easy to maintain, I've decided that all actions for IncomeSetting objects will be kept in the income_settings_controller.rb file.
def update
if #income_setting.update(income_setting_params)
redirect_to dashboard_income_path, notice: 'Your Income Setting was saved successfully updated.'
else
redirect_to controller: 'dashboard', action: 'income'
end
end
Do you see where the validation fails, I redirect to the dashboard? If I put a breakpoint there, I can see that the model #income_setting does have the validation errors there - but just as the controller redirects the model errors are lost?
Any suggestions on how to persist those errors so they actually display by the time the render 'income_settings/form is called?
You'll need to render dashboard/income instead of redirecting in the error condition. Since you're sending the form request to a separate controller, you may have to repeat/share setup logic for rendering that page:
def update
if #income_setting.update(income_setting_params)
redirect_to dashboard_income_path, notice: 'Your Income Setting was saved successfully updated.'
else
# additional setup may be necessary
render 'dashboard/income'
end
end