使用Rails 4和JQuery添加\删除嵌套表单中的项
我正在使用ruby 1.9.3和rails 4.1。使用Rails 4和JQuery添加\删除嵌套表单中的项,jquery,ruby-on-rails-4,Jquery,Ruby On Rails 4,我正在使用ruby 1.9.3和rails 4.1。 我对ruby非常陌生,以前没有javascripting知识 我有两个简单的关系,一个有很多通过关系 class Service < ActiveRecord::Base has_many :websites, :dependent => :destroy has_many :timetables, :dependent => :destroy has_many :service_places, :depen
我对ruby非常陌生,以前没有javascripting知识 我有两个简单的关系,一个有很多通过关系
class Service < ActiveRecord::Base
has_many :websites, :dependent => :destroy
has_many :timetables, :dependent => :destroy
has_many :service_places, :dependent => :destroy
has_many :places, through: :service_places
end
class ServicePlace < ActiveRecord::Base
belongs_to :service
belongs_to :place
end
class Website < ActiveRecord::Base
belongs_to :service
end
class Place < ActiveRecord::Base
has_many :service_places
has_many :services, through: :service_places
end
class Timetable < ActiveRecord::Base
belongs_to :service
end
application.js
function remove_fields(link) {
$(link).prev("input[type=hidden]").val("1");
$(link).closest(".fields").hide();
}
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).parent().before(content.replace(regexp, new_id));
}
服务控制器.rb
class ServicesController < ApplicationController
# Set the service record before each action
before_action :set_service, only: [:show, :edit, :update, :destroy]
################################################################################
# Create
################################################################################
def create
@service = Service.new(service_params)
respond_to do |format|
if @service.save
format.html { redirect_to @service, notice: 'Service was successfully created.' }
format.json { render action: 'show', status: :created, location: @service }
else
@service.websites.build
@service.timetables.build
@service.service_places.build
format.html { render action: 'new' }
format.json { render json: @service.errors, status: :unprocessable_entity }
end
end
end
################################################################################
# Delete
################################################################################
def destroy
@service.destroy
respond_to do |format|
format.html { redirect_to services_url , notice: 'Service was successfully deleted.' }
format.json { head :no_content }
end
end
################################################################################
# Edit
################################################################################
def edit
@service.websites.build
@service.timetables.build
@service.service_places.build
end
################################################################################
# Index
################################################################################
def index
@services = Service.order(:service_number).page params[:page]
end
################################################################################
# New
################################################################################
def new
@service = Service.new
@service.websites.build
@service.timetables.build
@service.service_places.build
end
################################################################################
# Search
################################################################################
def search
@search_term = params[:search_term]
if @search_term && @search_term.strip.empty?
redirect_to root_path
else
@services = Service.search(@search_term).order(:service_number).page params[:page]
end
end
################################################################################
# Show
################################################################################
def show
end
################################################################################
# Update
################################################################################
def update
respond_to do |format|
if @service.update(service_params)
format.html { redirect_to @service, notice: 'Service was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: 'edit' }
format.json { render json: @service.errors, status: :unprocessable_entity }
end
end
end
################################################################################
# Private methods
################################################################################
private
# Use callbacks to share common setup or constraints between actions.
def set_service
@service = Service.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def service_params
params.require(:service).permit(:service_number, :operator, :monday, :tuesday, :wednesday, :thursday, :friday, :saturday, :sunday, :bank_holiday, :search_term, websites_attributes: [:id, :service_id, :url, :_destroy], timetables_attributes: [:id, :service_id, :url, :_destroy], service_places_attributes: [:id, :service_id, :position, :place_id, :_destroy], places_attributes: [:id, :place_name, :active, :_destroy])
end
end
class-ServicesController
浏览过互联网后,我似乎找不到任何关于如何使用jquery和标准ruby\rails实现这一点的链接。有人知道有哪些链接或资源对实现这一点有用吗
我并不反对使用cocoon或嵌套的表单字段之类的gem,假设我可以将HAML转换为ERB,将coffeescript转换为javascript。作为ruby\rails和javascript的新手,让构建者做一些事情是很好的,但当它出错时,我不知道如何修复它
我感谢任何帮助或指导。由于进展不快,我跟进了一位同事提出的使用cocoon的建议。我遵循了这里的步骤:并设法让它发挥作用。我知道这并不能回答我的实际问题,但它确实为我提供了一种做我想做的事情的方法。我已经为cas中的其他人记下了这些步骤我还把HAML转换成了普通的ruby,因为我更喜欢它 1) 将以下行添加到您的文件中:
gem "cocoon"
2) 将下面的行添加到app/assets/javascripts/application.js文件中
//= require cocoon
3) 修改我的服务表格(_form.html.erb)如下
<%= form_for(@service, :html => {:class => "form-horizontal", :role => "form"}) do |f| %>
<%= render 'wcc_style/layouts/error_messages', object: @service %>
<div class="form-group">
<%= f.label :service_number, :class=>'col-sm-2 control-label' %>
<div class="col-sm-3">
<%= f.text_field :service_number, :class => "form-control", :placeholder => "Service Number" %>
</div>
</div>
<div class="form-group">
<%= f.label :operator, :class=>'col-sm-2 control-label' %>
<div class="col-sm-4">
<%= f.text_field :operator, :class => "form-control", :placeholder => "Operator" %>
</div>
</div>
<div class="form-group">
<%= f.label :monday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :monday, :class => "form-control, pull-left", :placeholder => "Monday" %>
</div>
</div>
<div class="form-group">
<%= f.label :tuesday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :tuesday, :class => "form-control, pull-left", :placeholder => "Tuesday" %>
</div>
</div>
<div class="form-group">
<%= f.label :wednesday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :wednesday, :class => "form-control, pull-left", :placeholder => "Wednesday" %>
</div>
</div>
<div class="form-group">
<%= f.label :thursday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :thursday, :class => "form-control, pull-left", :placeholder => "thursday" %>
</div>
</div>
<div class="form-group">
<%= f.label :friday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :friday, :class => "form-control, pull-left", :placeholder => "Friday" %>
</div>
</div>
<div class="form-group">
<%= f.label :saturday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :saturday, :class => "form-control, pull-left", :placeholder => "Saturday" %>
</div>
</div>
<div class="form-group">
<%= f.label :sunday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :sunday, :class => "form-control, pull-left", :placeholder => "Sunday" %>
</div>
</div>
<div class="form-group">
<%= f.label :bank_holiday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :bank_holiday, :class => "form-control, pull-left", :placeholder => "Bank Holiday" %>
</div>
</div>
<h3>Stops</h3>
<!-- Adds the Service_Places associations via partial (sort applied in model) -->
<div>
<%= f.fields_for :service_places do |service_places| %>
<%= render 'service_place_fields', :f => service_places %>
<% end %>
<div class="links">
<%= link_to_add_association 'add service places', f, :service_places, :class => "btn btn-default" %>
</div>
</div>
<h3>Websites</h3>
<!-- Adds the website associations via a partial -->
<div>
<%= f.fields_for :websites do |website| %>
<%= render "website_fields", :f => website %>
<%end %>
<div class="links">
<%= link_to_add_association 'add websites', f, :websites, :class => "btn btn-default" %>
</div>
</div>
<h3>Timetables</h3>
<!-- Adds the timetables associations via a partial -->
<div>
<%=f.fields_for :timetables do |timetable| %>
<%= render "timetable_fields", :f => timetable %>
<%end %>
<div class="links">
<%= link_to_add_association 'add timetables', f, :timetables, :class => "btn btn-default" %>
</div>
</div>
<br>
<%= f.submit 'Save', :class => 'btn btn-primary' %>
<%= link_to 'Cancel', services_path, :class => "btn btn-default", :role =>"button" %>
<% end %>
{:class=>“form horizontal”,:role=>“form”})do | f |%>
'col-sm-2控件标签'%>
“表单控件”:占位符=>“服务编号”%>
'col-sm-2控件标签'%>
“表单控件”,:占位符=>“运算符”%>
“col-sm-2控制实验室
gem "cocoon"
//= require cocoon
<%= form_for(@service, :html => {:class => "form-horizontal", :role => "form"}) do |f| %>
<%= render 'wcc_style/layouts/error_messages', object: @service %>
<div class="form-group">
<%= f.label :service_number, :class=>'col-sm-2 control-label' %>
<div class="col-sm-3">
<%= f.text_field :service_number, :class => "form-control", :placeholder => "Service Number" %>
</div>
</div>
<div class="form-group">
<%= f.label :operator, :class=>'col-sm-2 control-label' %>
<div class="col-sm-4">
<%= f.text_field :operator, :class => "form-control", :placeholder => "Operator" %>
</div>
</div>
<div class="form-group">
<%= f.label :monday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :monday, :class => "form-control, pull-left", :placeholder => "Monday" %>
</div>
</div>
<div class="form-group">
<%= f.label :tuesday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :tuesday, :class => "form-control, pull-left", :placeholder => "Tuesday" %>
</div>
</div>
<div class="form-group">
<%= f.label :wednesday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :wednesday, :class => "form-control, pull-left", :placeholder => "Wednesday" %>
</div>
</div>
<div class="form-group">
<%= f.label :thursday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :thursday, :class => "form-control, pull-left", :placeholder => "thursday" %>
</div>
</div>
<div class="form-group">
<%= f.label :friday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :friday, :class => "form-control, pull-left", :placeholder => "Friday" %>
</div>
</div>
<div class="form-group">
<%= f.label :saturday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :saturday, :class => "form-control, pull-left", :placeholder => "Saturday" %>
</div>
</div>
<div class="form-group">
<%= f.label :sunday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :sunday, :class => "form-control, pull-left", :placeholder => "Sunday" %>
</div>
</div>
<div class="form-group">
<%= f.label :bank_holiday, :class=>'col-sm-2 control-label' %>
<div class="col-sm-2">
<%= f.check_box :bank_holiday, :class => "form-control, pull-left", :placeholder => "Bank Holiday" %>
</div>
</div>
<h3>Stops</h3>
<!-- Adds the Service_Places associations via partial (sort applied in model) -->
<div>
<%= f.fields_for :service_places do |service_places| %>
<%= render 'service_place_fields', :f => service_places %>
<% end %>
<div class="links">
<%= link_to_add_association 'add service places', f, :service_places, :class => "btn btn-default" %>
</div>
</div>
<h3>Websites</h3>
<!-- Adds the website associations via a partial -->
<div>
<%= f.fields_for :websites do |website| %>
<%= render "website_fields", :f => website %>
<%end %>
<div class="links">
<%= link_to_add_association 'add websites', f, :websites, :class => "btn btn-default" %>
</div>
</div>
<h3>Timetables</h3>
<!-- Adds the timetables associations via a partial -->
<div>
<%=f.fields_for :timetables do |timetable| %>
<%= render "timetable_fields", :f => timetable %>
<%end %>
<div class="links">
<%= link_to_add_association 'add timetables', f, :timetables, :class => "btn btn-default" %>
</div>
</div>
<br>
<%= f.submit 'Save', :class => 'btn btn-primary' %>
<%= link_to 'Cancel', services_path, :class => "btn btn-default", :role =>"button" %>
<% end %>
<div class="nested-fields">
<%= f.label :website, :class=>'col-sm-2 control-label' %>
<div class="col-sm-4">
<%= f.text_field :url, :class => "form-control", :placeholder => "Service Provider Website" %>
</div>
<div>
<%= link_to_remove_association "remove website", f, :class => "btn btn-default" %>
</div>
</div>