How to render partial on bootstrap modal using ajax - ajax

I want to display sign in form on bootstrap modal when we click on the button in nav bar.Here is my code
Here is my new.js.erb
$("#myModal").before("<%= escape_javascript(render "new", :formats => [:html]) %>");
$("#myModal").modal('show');
Here is my _top_nav.html.erb
<li><%= link_to 'LOGIN', new_user_session_path, remote: true %></li>
Here is my _new.js.erb
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby= "myModalLabel" aria-hidden="true" id="login">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="well">
<div class="row">
<div class="col-lg-10">
<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), html: { class: 'form-horizontal', role: 'form' }) do |f| %>
<h1 id="h1id">Member Login</h1>
<legend>
<h4>If you are not a member yet please become a member <%= link_to 'here', new_user_registration_path %> to Sign In</h4></legend>
<%= f.input :email, :required => false, :autofocus => true, placeholder: ' Email', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'} %>
<%= f.input :password, :required => false, placeholder: 'Password', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'} %>
<%= f.button :submit, "Sign in", style:"margin-left:17%", class:"btn btn-primary" %>
<% end %>
</div>
<div class="col-lg-2">
<%= image_tag('logolatinfoods-01.png', size: '300x70', class: 'logo-style') %>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
I am unable to understand where i am making mistake.Ajax call is working but modal is not displaying.I am new to ajax.Can any one explain what went wrong here.

_new.js.erb should probably be _new.html.erb

Related

How to add show/hide action in rails forms only in the view template

I'm new to rails and using to devise for authentication, what i want to accomplish is user privacy.
Meaning in edit form i want to add a toggle switch action for example 'Email field' to give the user the ability to show/hide fields in his profile but the form still displayed in the edit view.
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<div class="container mt-5">
<div class="row">
<div class="col-sm-3">
<!-- Left menu links -->
<ul class="nav-item pl-0">
<h4 class="nav-link disabled mb-0 text-dark font-weight-bold">Settings</h4>
<%= link_to 'Personal information', "/users/edit", class: "nav-link text-dark font-weight-bold" %>
<%= link_to 'Account settings', "/account/settings", class: "nav-link text-dark font-weight-bold" %>
<%= link_to 'Password settings', "/account/passwords", class: "nav-link text-dark font-weight-bold" %>
<%= link_to 'Security', "/account/security", class: "nav-link text-dark font-weight-bold" %>
</ul>
</div>
<!-- Right from inputs -->
<div class="col-sm-9 shadow-sm border border-dark p-3 mb-5 mx-3 mx-sm-0 mx-lg-0 mx-xl-0 bg-white rounded">
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold justify-content-start">First name:</label>
</div>
<div class="col-sm-4">
<%= f.input :first_name, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "First name"} %>
</div>
</div>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold justify-content-start">Last name:</label>
</div>
<div class="col-sm-4">
<%= f.input :last_name, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Last name"} %>
</div>
</div>
<div class="dropdown-divider my-4"></div>
<label class="text-dark font-weight-bold px-3 mb-4">Biography</label>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold justify-content-start">About:</label>
</div>
<div class="col-sm-10">
<%= f.input :about, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Write in few lines something about yourself and what you are passionate about"} %>
</div>
</div>
<div class="dropdown-divider mt-5 mb-4"></div>
<label class="text-dark font-weight-bold px-3 mb-4">Career</label>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold justify-content-start">Company:</label>
</div>
<div class="col-sm-10">
<%= f.input :company, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Where do you work?"} %>
</div>
</div>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold justify-content-start">Job title:</label>
</div>
<div class="col-sm-10">
<%= f.input :job_title, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Current working position?"} %>
</div>
</div>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold justify-content-start">School / University:</label>
</div>
<div class="col-sm-10">
<%= f.input :school, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Name of school or university"} %>
</div>
</div>
<!-- Right update button -->
<div class="form-inline justify-content-end py-2 px-3">
<div class="col-sm-2">
<%= f.button :submit, "Update", class: "btn btn-primary btn-sm btn-block" %>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
i made a custom devise registration controller
app/controllers/registations_controller.rb
class RegistrationsController < Devise::RegistrationsController
def update
self.resource = resource_class.to_adapter.get!(send(:"current_#{resource_name}").to_key)
prev_unconfirmed_email = resource.unconfirmed_email if resource.respond_to?(:unconfirmed_email)
resource_updated = update_resource(resource, account_update_params)
yield resource if block_given?
if resource_updated
set_flash_message_for_update(resource, prev_unconfirmed_email)
bypass_sign_in resource, scope: resource_name if sign_in_after_change_password?
respond_with resource, location: after_update_path_for(resource)
else
clean_up_passwords resource
set_minimum_password_length
session[:return_to] ||= request.referer
redirect_to session.delete(:return_to), alert: resource.errors.full_messages[0]
end
end
def settings
#user = current_user
if #user
render :settings
else
render file: 'public/404', status: 404, formats: [:html]
end
end
def passwords
#user = current_user
if #user
render :passwords
else
render file: 'public/404', status: 404, formats: [:html]
end
end
def security
#user = current_user
if #user
render :security
else
render file: 'public/404', status: 404, formats: [:html]
end
end
end
app/controllers/users_controller.rb
class UsersController < ApplicationController
before_action :authenticate_user!
def show
#user = current_user
end
end
routes.rb
Rails.application.routes.draw do
get 'users/show'
root 'pages#home'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
devise_for :users, controllers: { registrations: "registrations" }
resources :user, only: [:show]
devise_scope :user do
get 'accounts/settings', to: 'registrations#settings', as: :settings
get 'accounts/passwords', to: 'registrations#passwords', as: :passwords
get 'accounts/security', to: 'registrations#security', as: :security
end
end
You'll want to do 3 things:
Add a button with an onclick handler that allows the user to click on it to hide/show the field
Add an ID to the div you are using to show the attribute
Create a javascript function to show/hide that div
So add the button outside the div you are hiding and include the onclick
<%= button_tag "Hide/Show", :onclick => "hideInput()" %>
Then add the ID to the div you are hiding. In your case, do something like this. You can use any ID you want. Mine is just an example.
<div id="emailDisplayed" class="text-dark"> <%= #user.email %> </div>
Then you want to add the hideInput function in your javascript file. Preferably in assets/javascripts/[file_name]
function hideInput() {
var emailDiv = document.getElementById("emailDisplayed");
emailDiv.style.display === "block" ? emailDiv.style.display = 'none' : emailDiv.style.display = 'block';
}
Now when the user clicks on the button, it will hide/show your div that contains the user email.

Rails Ajax Refresh Breaks Modal Upload Form Submit

I have a list of items that gets refreshed on create and update, I have a form that allows you to add elements, remove, adjust pricing inline. If you'd like to edit whom the task is assigned to, it pops up a modal which contains a partial with the form once again but to edit the object. Everything works fine and refreshes as it should.
The Problem
On the same line I have a paperclip and a camera that also open up modals that contain forms to upload a document or click camera to upload a picture. These work fine from the page if it's on load but after an ajax refresh the submit buttons will not work.
The Code
Index Partial:
<div class="row">
<div class="col-md-12">
<% if work_order.tasks.any? %>
<ul class="task-table">
<% work_order.tasks.each_with_index do |task, index| %>
<li class="row task-table-row">
<%= bootstrap_form_for(task, remote:true) do |f| %>
<%= render(partial:'tasks/task', locals:{task:task, f:f, index: index}) %>
<% end %>
</li>
<%= render(partial:'work_orders/modal_forms', locals:{task:task, index:index}) %>
<%= render(partial:'tasks/attachments', locals:{task:task, index: index}) %>
<%= render(partial:"tasks/edit", locals:{task:task, index:index})%>
<% end %>
<li class="row">
<div class="table-total">
<div class="col-md-6 col-md-push-6 column">
<div id="total-wrap">
<h3>Est. total: <span id="subTotal"></span></h3>
</div>
</div>
</div>
</li>
</ul>
<% else %>
<li class="row task-table-row">
No tasks currently exist.
</li>
<% end %>
</div>
</div>
<div class="button-margin">
<%= render(partial:'tasks/new', locals:{work_order:work_order})%>
</div>
<div id="placeHolder"></div>
<%= link_to "Mark as Complete", work_order_path(work_order, work_order:{completed: true}), class:"btn btn-block btn-danger btn-outline b-r-xs", method: :put, remote:true %>
Task partial:
<div class="col-md-4 column">
<div class="pull-right column inline">
<p class="assign inline"><small class="text-muted">
<% if task.assignable_id.present? %>
<%= truncate(task.assignable.name, length:7) %>
<% else %>
assign
<% end %>
</small></p>
<a href="#" class="text-muted inline" data-toggle="modal" data-target="#editModal<%= index %>">
<i class="fa fa-pencil"></i>
</a>
</div>
<p class="inline"><%= truncate(task.location, length:20) %></p>
</div>
<% if task.labor.present? && task.materials.present? %>
<!-- if labor or materials are both available -->
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{labor:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class="fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.labor) %></span>
</p>
</div>
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{materials:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.materials) %></span>
</p>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<a id="deleteTask">
<i class="fa fa-remove text-danger pull-right" > </i>
</a>
<a data-toggle="modal" data-target="#imageModal<%= index %>">
<i class="fa fa-camera text-success pull-right"></i>
</a>
<a class="text-primary" data-toggle="modal" data-target="#attachmentModal<%= index %>">
<i class="fa fa-paperclip pull-right"></i>
</a>
<% if task.task_photos.any? || task.attachments.any? %>
<a class="text-green" data-toggle="modal" data-target="#attachments<%= index %>" tooltip="View Attachments">
<i class="fa fa-eye pull-right" > </i>
</a>
<% end %>
</div>
<% elsif task.labor.blank? && task.materials.present? %>
<!-- Else if labor is blank and materials are present -->
<div class="col-md-3 column">
<%= f.text_field :labor, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Labor" %>
</div>
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{materials:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.materials) %></span>
</p>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>
<% elsif task.materials.blank? && task.labor.present? %>
<!-- Else if materials is blank and labor is present -->
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{labor:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.labor) %></span>
</p>
</div>
<div class="col-md-3 column">
<%= f.text_field :materials, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Material" %>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>
<% else %>
<!-- Else materials and labor are both blank -->
<div class="col-md-3 column">
<%= f.text_field :labor, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Labor" %>
</div>
<div class="col-md-3 column">
<%= f.text_field :materials, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Material" %>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>
<% end %>
The Modals That Wont Submit
<!-- attachments modal -->
<div class="modal inmodal fade" id="attachmentModal<%= index %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Attach Documents</h4>
<small class="font-bold">Upload quotes, sales orders, receipts and invoices.</small>
</div>
<div class="modal-body">
<div class="row">
<%= bootstrap_form_for [task, Attachment.new] do |f| %>
<div class="col-md-4">
<%= f.text_field :name %>
</div>
<div class="col-md-4">
<%= f.text_field :amount, prepend: "$", append: ".00", label:"Total (optional)" %>
</div>
<div class="col-md-4">
<%= f.file_field :file %>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<%= f.submit "Add Attachment", class:"btn btn-primary btn-outline b-r-xs" %>
<% end %>
</div>
</div>
</div>
</div>
<!-- end attachments modal -->
<!-- images modal -->
<div class="modal inmodal fade" id="imageModal<%= index %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Attach Images</h4>
<small class="font-bold">Upload images and descriptions.</small>
</div>
<div class="modal-body">
<div id="target">
</div>
<%= bootstrap_form_for [task, TaskPhoto.new] do |f| %>
<div class="field">
<%= f.hidden_field :property_manager_id, value:current_manager.id %>
</div>
<div class="field">
<%= f.file_field :photo %>
</div>
<div class="field">
<%= f.text_field :description %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white btn-outline b-r-xs" data-dismiss="modal">Close</button>
<%= f.submit "Add Photo", class:"btn btn-primary btn-outline b-r-xs" %>
<% end %>
</div>
</div>
</div>
</div>
<!-- end images modal -->
Turns out that having the submit in my modal footer was causing the error.
Although it works just fine on initial page load, it was causing error when it was refreshed by ajax. Moving the submit button into the modal-body with the rest of my form fixed my problem.
Hope this helps someone in the future!

Modal form only works after refresh

Hi I have a modal form in my application that is spawned by a link in the nav bar. The form seem to only work when the page has been refreshed, if I access a page from a link it wont work until I refresh the page.
Here is my form in aoolication.html.erb:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1>New Update</h1>
</div>
<div class="modal-body">
<%= form_for :post, url: posts_path do |f| %>
<div class="container">
<p>What have you been working on?</p>
<p>
<%=f.label :title %> <br>
<%=f.text_field :title %>
</p>
<p>
<%=f.label :body %> <br>
<%=f.text_field :body %>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Close</button>
<%= f.submit %>
<%end%>
</div>
</div>
</div>
</div>
From looking into it I've found it could be caused by malformed HTML, but I can't seem to find anything that ould be causing it.
Any help with fixing this would be greatly appriciated.
I've managed to fix it by placing the entire body in form for tags

Why am i getting an ActiveRecord::AssociationTypeMismatch error while trying to create a form

I'm building a pageantry application form
here are the neccessary codes
the new form
<!--header-->
<div class="header" >
<div class="col-md-3 header-top cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<li><%= link_to "Home", { controller: "welcome" } %></li>
<li><%= link_to "About us", about_index_path %></li>
</nav>
<!-- /script-nav -->
<div class="main">
<section class="buttonset">
<button id="showLeftPush"><i class="glyphicon glyphicon-menu-hamburger"></i></button>
</section>
</div>
<!-- Classie - class helper functions by #desandro https://github.com/desandro/classie -->
<%= javascript_include_tag 'classie', 'data-turbolinks-track' => true %>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
</script>
</div>
<div class="col-md-6 logo">
<h1><span>MISS</span> CRYSTAL <span>NIGERIA</span></h1>
</div>
<div class="clearfix"> </div>
</div>
<!---pop-up-box---->
<%= stylesheet_link_tag 'popuo-box', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'jquery.magnific-popup', 'data-turbolinks-track' => true %>
<!---//pop-up-box---->
<div id="small-dialog" class="mfp-hide">
<div class="search-top">
<div class="login">
<input type="submit" value="">
<input type="text" value="Search.." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}">
</div>
<p>Education</p>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
<!--//header--><!--banner-->
<div class="head">
<div class="container">
<h2 > Miss Crystal Nigeria / <span>Registration Form</span></h2>
</div>
</div>
<!--content-->
<div class="container">
<div class="page">
<%= form_for #form, html: { multipart: true } do |f| %>
<% if #form and #form.errors and #form.errors.count > 0 %>
<div class="alert alert-danger">
<a class="close" data-dismiss="alert">×<a>
<strong><%= pluralize(#form.errors.count,"error") %> found. Please fill the Important field denoted by the asteriks (*)</strong>
</div>
<% end %>
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Contact Information</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-2 control-label">First Name*</label>
<div class="col-sm-6">
<%= f.text_field :first_name, :class => "form-control", :placeholder => "First Name" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Last Name*</label>
<div class="col-sm-6">
<%= f.text_field :last_name, :class => "form-control", :placeholder => "Last Name" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Other Names</label>
<div class="col-sm-6">
<%= f.text_field :other_names, :class => "form-control", :placeholder => "Other Names" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Email*</label>
<div class="col-sm-6">
<%= f.text_field :email_address, :class => "form-control", :placeholder => "Email Address" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Backup Email*</label>
<div class="col-sm-6">
<%= f.text_field :backup_email_address, :class => "form-control", :placeholder => "Backup Email Address" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Address(1)*</label>
<div class="col-sm-6">
<%= f.text_area :first_street_address, :class => "form-control", :placeholder => "First Address" %>
</div>
</div><br /></br /><br />
<div class="form-group">
<label class="col-sm-2 control-label">Address(2)</label>
<div class="col-sm-6">
<%= f.text_area :second_street_address, :class => "form-control", :placeholder => "Second Address" %>
</div>
</div><br /><br /> <br />
<div class="form-group">
<label class="col-sm-2 control-label">Address(3)</label>
<div class="col-sm-6">
<%= f.text_area :third_street_address, :class => "form-control", :placeholder => "Third Address" %>
</div>
</div><br /><br /><br />
<div class="form-group">
<label class="col-sm-2 control-label">City/State/Island*</label>
<div class="col-sm-6">
<%= f.text_field :city, :class => "form-control", :placeholder => "City/State/Island of Residence" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Zip/Postal Code*</label>
<div class="col-sm-6">
<%= f.text_field :postal_code, :class => "form-control", :placeholder => "Zip Code / Postal Code" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Country*</label>
<div class="col-sm-6">
<%= f.country_select :country, priority_countries: ["NG"], :class => "form-control country" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Settlement Area</label>
<div class="col-sm-6">
<%= f.text_field :settlement, :class => "form-control", :placeholder => "Settlement Area of Residence" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Phone(Home)*</label>
<div class="col-sm-6">
<%= f.text_field :phone_home, :class => "form-control", :placeholder => "Home Line" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Phone(Mobile)*</label>
<div class="col-sm-6">
<%= f.text_field :phone_mobile, :class => "form-control", :placeholder => "Mobile Line" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Phone(Work)</label>
<div class="col-sm-6">
<%= f.text_field :phone_work, :class => "form-control", :placeholder => "Work Line" %>
</div>
</div><br />
</div>
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Photos of You</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-2 control-label">Photo (1)</label>
<div class="col-sm-4">
<%= f.file_field :image, :class => "submit" %>
</div>
</div><br /><br /><br />
<div class="form-group">
<label class="col-sm-2 control-label">Photo (2)</label>
<div class="col-sm-4">
<%= f.file_field :imaget, :class => "submit" %>
</div>
</div><br />
</div>
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Personal Background and vital Statistics</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-2 control-label">How old are you?*</label>
<div class="col-sm-6">
<%= f.number_field :age, :class => "form-control", :placeholder => "Your Age" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Date of birth?*</label>
<div class="col-sm-6">
<%= f.date_select :dob, :class => "form-control", :placeholder => "" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Place of birth?*</label>
<div class="col-sm-6">
<%= f.text_field :place_of_birth, :class => "form-control", :placeholder => "Where were you born?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">State*</label>
<div class="col-sm-6">
<%= f.text_field :stateoo, :class => "form-control", :placeholder => "What's your state of origin?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">L. G. A.*</label>
<div class="col-sm-6">
<%= f.text_field :localgovt, :class => "form-control", :placeholder => "What's your Local Government Area" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Height(ft/")*</label>
<div class="col-sm-6">
<%= f.number_field :height, :class => "form-control", :placeholder => "to the nearest whole" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Weight(lbs)*</label>
<div class="col-sm-6">
<%= f.number_field :weight, :class => "form-control", :placeholder => "What do you weigh?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Swimsuit Size*</label>
<div class="col-sm-6">
<%= f.text_field :swimsuit_size, :class => "form-control", :placeholder => "What's your Swim suit size?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Dress size*</label>
<div class="col-sm-6">
<%= f.text_field :dress_size, :class => "form-control", :placeholder => "What's your Dress Size?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Shoe Size*</label>
<div class="col-sm-6">
<%= f.text_field :shoe_size, :class => "form-control", :placeholder => "What's your Shoe Size?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Employment/School*</label>
<div class="col-sm-6">
<%= f.text_field :employment_school, :class => "form-control", :placeholder => "What's Your Place of Employment or School You Attend?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Degrees*</label>
<div class="col-sm-6">
<%= f.text_field :degrees, :class => "form-control", :placeholder => "Please list Any Degrees Attained, Scholarships and or Achievements" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Other Awards*</label>
<div class="col-sm-6">
<%= f.text_field :other_awards, :class => "form-control", :placeholder => "List Any Other Awards or Achievements(NON-SCHOLASTIC)" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Family Bio*</label>
<div class="col-sm-6">
<%= f.text_field :family_bio, :class => "form-control", :placeholder => "Tell Us of Any Interesting Fact About Your Family or Their Achievements" %>
</div>
</div><br />
</div>
<div class="grid_3 grid_4">
<div class="page-header">
<h3>More About You</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-2 control-label">Facebook Url*</label>
<div class="col-sm-6">
<%= f.text_field :facebook_url, :class => "form-control", :placeholder => "Are You On Facebook? If so, please provide the URL's(links)" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Twitter Url*</label>
<div class="col-sm-6">
<%= f.text_field :twitter_url, :class => "form-control", :placeholder => "Do You Have a Twitter Account? If so, please provide the URL's(links) to your page" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Favourite Color*</label>
<div class="col-sm-6">
<%= f.text_field :fav_color, :class => "form-control", :placeholder => "What's your Favourite Color?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Favourite Food*</label>
<div class="col-sm-6">
<%= f.text_field :fav_food, :class => "form-control", :placeholder => "What's your Favourite Food?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Favourite Sport*</label>
<div class="col-sm-6">
<%= f.text_field :fav_sport, :class => "form-control", :placeholder => "What's your Favourite Sport?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-4 control-label">Have you always lived in Nigeria*</label>
<div class="col-sm-6">
<%= f.check_box :always_naija %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">If No</label>
<div class="col-sm-6">
<%= f.text_field :nalways_naija, :class => "form-control", :placeholder => "Where else have you lived?" %>
</div>
</div><br />
</div>
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Personal Outlook</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-2 control-label">Hobbies*</label>
<div class="col-sm-6">
<%= f.text_field :hoobies, :class => "form-control", :placeholder => "What are your Hobbies?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Sports*</label>
<div class="col-sm-6">
<%= f.text_field :sports, :class => "form-control", :placeholder => "What Sports or Activities Do you Participate in?" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Life Ambition*</label>
<div class="col-sm-6">
<%= f.text_area :life_ambition, :class => "form-control", :placeholder => "What's your Life Ambition?" %>
</div>
</div><br /><br /> <br />
<div class="form-group">
<label class="col-sm-2 control-label">Talent</label>
<div class="col-sm-6">
<%= f.text_field :performable_talent, :class => "form-control", :placeholder => "Do you Have any Performable Talent? If yes, List them" %>
</div>
</div><br /><br /> <br />
<div class="form-group">
<label class="col-sm-2 control-label">Training</label>
<div class="col-sm-6">
<%= f.text_area :special_training, :class => "form-control", :placeholder => "Do you have any special training in Music, Dance, Arts, Etc?" %>
</div>
</div><br /><br /> <br />
<div class="form-group">
<label class="col-sm-2 control-label">Languages*</label>
<div class="col-sm-6">
<%= f.text_area :languages, :class => "form-control", :placeholder => "Please list the languages you speak" %>
</div>
</div><br /> <br /> <br />
<div class="form-group">
<label class="col-sm-2 control-label">Unusual Thing*</label>
<div class="col-sm-6">
<%= f.text_area :most_unusual_thing, :class => "form-control", :placeholder => "Whats's the most thing you have ever done?" %>
</div>
</div><br /><br /> <br />
<div class="form-group">
<label class="col-sm-2 control-label">Proud Moment*</label>
<div class="col-sm-6">
<%= f.text_field :most_proud_moment, :class => "form-control", :placeholder => "Briefly Describe the moment in your life you are most proud of" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-2 control-label">Countries Visited</label>
<div class="col-sm-6">
<%= f.text_field :countries_visited, :class => "form-control", :placeholder => "List all the countries you have travelled to" %>
</div>
</div><br />
</div>
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Personal Statement</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-2 control-label">Self Bio*</label>
<div class="col-sm-6">
<%= f.text_area :intresting_selfbio, :class => "form-control", :placeholder => "Tell us something interesting About you." %>
</div>
</div>
</div> <br /><br /><br />
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Verification</h3>
</div>
<div class="bs-example" data-example-id="simple-horizontal-form">
<div class="form-group">
<label class="col-sm-3 control-label">Verify True Information*</label>
<div class="col-sm-6">
<%= f.check_box :true_information %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-3 control-label">Verify True Age*</label>
<div class="col-sm-6">
<%= f.check_box :true_age %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-3 control-label">Terms and Condition*</label>
<div class="col-sm-6">
<%= f.check_box :true_tandc %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-3 control-label">Date*</label>
<div class="col-sm-6">
<%= f.date_select :date %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-3 control-label">Who referred you?*</label>
<div class="col-sm-6">
<%= f.collection_select :referee_id, #referee, :id, :name, :class => "form-control", :prompt => "Who referred you?" %><br />
<%= f.text_field :referee, :class => "form-control", :placeholder => "Someone else? What's his/her name" %>
</div>
</div><br /> <br /><br />
<div class="form-group">
<label class="col-sm-3 control-label">Bank Teller Number*</label>
<div class="col-sm-6">
<%= f.text_field :bank_teller_number, :class => "form-control", :placeholder => "Please input Bank Teller Number or reference or leave blank if free" %>
</div>
</div><br />
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<%= f.submit :class => "submit" %>
</div>
</div><br />
</div>
</div>
</div></div></div></div></div></div></div></div>
<% end %>
</div>
<!--footter-->
<div class="footer">
<div class="footer-mid">
<div class="container">
<div class="col-sm-4 ft-grid1">
<h3>Location</h3>
<p>Audition Venues are regional</p>
<p>PH / LAGOS / ABUJA / CALABAR / ENUGU</p>
<p>+234 803 229 7343</p>
</div>
<div class="col-sm-4 ft-grid2">
<h3>Follow Us</h3>
<ul class="social-in">
<li><i> </i></li>
<li><i class="twitter"> </i></li>
</ul>
</div>
<div class="col-sm-4 ft-grid1">
<h3>Contact us</h3>
<p>misscrystalnigeriapageant#gmail.com</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="class-footer">
<div class="container">
<div class="col-md-6 footer-nav">
<ul>
<li ><%= link_to "Home", { controller: "welcome" } %></li>
<li><a href="welcome/about" >About us</a></li>
<li><a href="/admin" >Admin</a></li>
</ul>
</div>
<div class="col-md-6 footer-grid">
<p >© 2016 MissCrystalNigeria. All rights reserved | Design by DicedOrange </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--//footter -->
the form model
class Form < ActiveRecord::Base
mount_uploader :image, ImageUploader
mount_uploader :imaget, ImageUploader
has_one :referee
end
the form controller
class FormsController < ApplicationController
before_action :set_form, only: [:show, :edit, :update, :destroy]
layout 'aware'
# GET /forms
# GET /forms.json
def index
flash[:notice] = "Access Denied"
redirect_to :controller => 'welcome', :action => 'index', notice: 'Access Denied'
#forms = Form.all
end
# GET /forms/1
# GET /forms/1.json
def show
flash[:notice] = "Access Denied"
redirect_to :controller => 'welcome', :action => 'index', notice: 'Access Denied'
end
# GET /forms/new
def new
#form = Form.new
referees = Referee.all
#referee = referees.order(:name)
end
# GET /forms/1/edit
def edit
flash[:notice] = "Access Denied"
redirect_to :controller => 'welcome', :action => 'index', notice: 'Access Denied'
end
# POST /forms
# POST /forms.json
def create
#form = Form.new(form_params)
respond_to do |format|
if #form.save
flash[:notice] = 'Successfully Submitted Form'
format.html { redirect_to :controller => 'welcome', :action => 'index', notice: 'Form was successfully created.' }
format.json { render :show, status: :created, location: #form }
else
format.html { render :new }
format.json { render json: #form.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /forms/1
# PATCH/PUT /forms/1.json
def update
respond_to do |format|
if #form.update(form_params)
format.html { redirect_to #form, notice: 'Form was successfully updated.' }
format.json { render :show, status: :ok, location: #form }
else
format.html { render :edit }
format.json { render json: #form.errors, status: :unprocessable_entity }
end
end
end
# DELETE /forms/1
# DELETE /forms/1.json
def destroy
#form.destroy
respond_to do |format|
format.html { redirect_to forms_url, notice: 'Form was successfully destroyed.' }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_form
#form = Form.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def form_params
params.require(:form).permit(:first_name, :valide, :image, :referee, :localgovt, :stateoo, :imaget, :referee_id, :event_id, :last_name, :other_names, :email_address, :backup_email_address, :first_street_address, :second_street_address, :third_street_address, :city, :postal_code, :country, :settlement, :phone_home, :phone_mobile, :phone_work, :age, :dob, :place_of_birth, :height, :weight, :swimsuit_size, :dress_size, :shoe_size, :employment_school, :degrees, :other_awards, :family_bio, :facebook_url, :twitter_url, :fav_color, :fav_food, :fav_sport, :always_naija, :nalways_naija, :hoobies, :sports, :life_ambition, :performable_talent, :special_training, :languages, :like_to_meet, :most_unusual_thing, :most_proud_moment, :countries_visited, :intresting_selfbio, :true_information, :true_age, :true_tandc, :date)
end
end
the referee model
class Referee < ActiveRecord::Base
has_many :forms
end
the referee controller
class RefereesController < InheritedResources::Base
def index
flash[:notice] = "Access Denied"
redirect_to :controller => 'welcome', :action => 'index', notice: 'Access Denied'
end
def show
flash[:notice] = "Access Denied"
redirect_to :controller => 'welcome', :action => 'index', notice: 'Access Denied'
end
def edit
flash[:notice] = "Access Denied"
redirect_to :controller => 'welcome', :action => 'index', notice: 'Access Denied'
end
private
def referee_params
params.require(:referee).permit(:name, :post)
end
end
anytime i try to create a form, i get this annoying error
ActiveRecord::AssociationTypeMismatch in FormsController#create
Referee(#69872442153920) expected, got String(#69872584329080)
Extracted source (around line #38):
36 # POST /forms.json
37 def create
38 #form = Form.new(form_params)
39
40 respond_to do |format|
41 if #form.save
It looks like you've got two options for inputting a referee: a collection select and text field. So in your form params, you're either submitting a referee ID or just a string of the referee's name. So your Form model is expecting a Referee object, but it's just getting passed a String.
You have a couple options - if an ID is selected, you need to do a Referee.find(params[:referee_id] and pass it to the Form model, along with the other params. Or, if you're submitting the name, you need to create a new Referee and then associate it.
Or you can use a nested form and submit the necessary referee parameters. You'd do something like this within your form:
<%= fields_for :referee do |ff| %>
<%= ff.collection_select :id, #referee, :id, :name, :class => "form-control", :prompt => "Who referred you?" %><br />
<%= ff.text_field :name, :class => "form-control", :placeholder => "Someone else? What's his/her name" %>

Redirect to same page using Rails 3

I need after user's action complete the page should exactly remain same using Rails 3.I am explaining my code and code flow below.
home.html.erb:
<div class="col-md-6" style="float:none; margin:auto;">
<%= form_for :sdf ,:url => {:action => "scan_report" },:html => {:id =>"form-id" } ,remote: true do |f| %>
<% if params[:receipt_no] %>
<div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon text-left">Receipt No. Scan :</span>
<%= f.text_field :Receipt_No,:class => "form-control", :value => params[:receipt_no],:id => "scan-field",:onfocus => ("$('#rcd_btn').submit()") %>
</div>
<% else %>
<div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon text-left">Receipt No. Scan :</span>
<%= f.text_field :Receipt_No,:class => "form-control",placeholder:"Receipt No. scan" %>
</div>
<% end %>
<%= f.submit "Submit",:id => "rcd_btn",:style => "display:none;" %>
<% end %>
<div class="clearfix"></div>
</div>
<div class="block block-themed" style="display:none" id="whole-div6" >
<div class="block-title">
<div class="block-options">
<i class="fa fa-arrow-down"></i>
</div>
<h4>Wood Slip</h4>
</div>
<div id="wood-puri">
</div>
</div>
From the above form when user will put the receipt no,lets say 150325006/1 and pressing enter key the below page will display.
_wood.html.erb:
<div class="block-content" style="display:none;">
<div class="timeline-container">
<div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Receipt No :</div></span>
<input type="text" class="form-control" value= "<%= #sdf.Receipt_No %>">
</div>
<div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Date & Time :</div></span>
<input type="text" class="form-control" value= "<%= #sdf.Created_On %>">
</div>
<div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Deceased Name :</div></span>
<input type="text" class="form-control" value= "<%= #hcsy.Deceased_Name %>">
</div>
<div class="input-group bmargindiv1 col-md-6 pull-left"> <span class="input-group-addon text-left"><div class="leftsidetextwidth">Donor Name :</div></span>
<input type="text" class="form-control" value= "<%= #sdf.Doner_Name %>">
</div>
<div class="input-group bmargindiv1 col-md-12 pull-left"> <span class="input-group-addon text-left"><div class="leftsidetextwidth">Amount :</div></span>
<input type="text" class="form-control" value= "<%= #woods.Amount %>">
</div>
<div class="clearfix"></div>
</div>
<div class="block block-themed themed-asphalt">
<div class="block-title"><h5>Office Use</h5></div>
<div class="block-content full">
<%= form_for :vendor,:url => {:action =>"payment" } do |f| %>
<div class="totalaligndiv">
<div class="input-group bmargindiv1 col-md-6" style="margin:auto; float:none;"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Select Vendor :</div></span>
<%= f.select(:v_name,options_for_select(Vendor.where(s_catagory: "Woods").pluck(:v_name),selected: "Select vender name"),{},{:class => "form-control",:prompt => 'Selected Vendor'}) %>
</div>
<div class="totalaligndiv">
<%= f.hidden_field :receipt_no, :value => #sdf.Receipt_No %>
</div>
<div class="totalaligndiv">
<%= f.hidden_field :amount,:value => #woods.Amount %>
</div>
<div class="totalaligndiv">
<%= f.hidden_field :date,:value =>#sdf.Created_On %>
</div>
<div class="clearfix"></div>
<div class="tbpaddingdiv1 text-center">
<%= f.submit "Add to Payment",:class => "btn btn-success" %>
</div>
<div class="clearfix"></div>
</div>
<% end %>
</div>
</div>
</div>
From the above page user will select one vendor name when user will click on submit button the db operation will happen and user will stay on the same page which was displaying before(i.e-user will stay on that _woods.html.erb page also after submit) submit button pressed and the "Add to Payment" vanishes till the next receipt no scan.My controller file is given below.
homes_controller.rb:
class HomesController < ApplicationController
def home
#sdf=TSdf.new
respond_to do |format|
format.html
format.js
end
end
def scan_report
if #sdf=TSdf.find_by_Receipt_No(params[:sdf][:Receipt_No])
#hcsy=THcsy.find_by_Sdp_Id(#sdf.Sdp_Id)
#hcsy_deatils=THcsyDetails.find_by_HCSY_ID(#hcsy.id)
#woods=THcsyFundTypeMaster.find_by_Fund_Type_Code(1)
#burn=THcsyFundTypeMaster.find_by_Fund_Type_Code(2)
#good=THcsyFundTypeMaster.find_by_Fund_Type_Code(3)
#swd=THcsyFundTypeMaster.find_by_Fund_Type_Code(5)
#photo=THcsyFundTypeMaster.find_by_Fund_Type_Code(6)
#vendor=Vendor.new
flash[:notice]=" number matched"
else
splitted = params[:sdf][:Receipt_No].split('/')
receipt = splitted[0]
table_id = splitted[1]
#sdfs=TSdf.find_by_Receipt_No(receipt)
if #sdfs
#hcsys=THcsy.find_by_Sdp_Id(#sdfs.Sdp_Id)
#fund_details=THcsyFundTypeMaster.find_by_Fund_Type_Code(table_id)
else
flash[:notice]="Scan number not found"
end
end
end
def payment
#adds=THcsyFundTypeMaster.find_by_Amount(params[:vendor][:amount])
#vendor=PaymentVendor.create(:Receipt_No => params[:vendor][:receipt_no],:c_date => Date.today.to_time_in_current_zone,:v_date => params[:vendor][:date],:v_amount => params[:vendor][:amount],:v_catagory => #adds.Fund_Type_Name,:v_name => params[:vendor][:v_name],:v_status => "No" )
if #vendor
flash[:notice]="Vendor added the payment"
flash[:color]="valid"
redirect_to :action => "home"
else
flash[:alert]="vendor could not added the payment"
flash[:color]="invalid"
render 'home'
end
end
end
scan_report.js.erb:
<% if #fund_details.Fund_Type_Name=="Woods" %>
$("#whole-div6").css("display", "block");
$("#wood-puri").html("<%= escape_javascript (render 'woods' ) %>");
$("#wood-puri").slideDown(350);
<% end %>
Here inside payment action now i am redirecting home page .But i need user will stay on that rendered _wood.html.erb: page after click on add to payment button.Please help me.
Did you tried :back? i.e. in controller
respond_to do |format|
format.html { redirect_to :back }
end
It will redirect to the page from where request was arrived.

Resources