使用 bootstrap 模态 ajax 表单问题进行搜查搜索
Ransack search with bootstrap modal ajax forms issue
单独执行这两项工作很好，但是当我有带有模态链接的 Ransack 表单时，模态没有提交到正确的表单（它提交的是 ransack 表单）。
在索引文件中，我在呈现模态的部分之前结束了搜索表单。但是，经过检查，无论我将 <% end %> 放在哪里作为搜查表单，表单标签都会在页面末尾关闭。因此，当调用模态时，它不会呈现 form_for（但奇怪的是，它会呈现隐藏的 div）。
我尝试通过 js 提交表单，但由于它甚至没有被渲染，所以什么也没有。我想知道这是否是一个搜查问题，因为 <%end%>() 不在我放置它的位置，或者是否有任何可能的解决方法，因为我真的很想同时拥有这两种功能。
index.html.erb
<%= search_form_for @search, url: products_path, html: {method: :get} do |f| %>
<div class="min-width-1200">
<div class='float-left'>
</br>
</div>
<div class='float-left margin-left-120 field-small'>
<%= f.label :sign_type_size_eq, "Size" %></br>
<%= f.select :sign_type_size_eq, SignType.all.map(&:size).uniq.sort!, {:include_blank => 'All'}, style:"width:130px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :sign_type_size_eq, "Sign Type" %></br>
<%= f.collection_select :sign_type_id_eq, SignType.all, :id, :name, {:include_blank => 'All'}, style:"width:150px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :group_name_eq, "Group Name" %></br>
<%= f.select :group_name_eq, Product.all.map(&:group_name).uniq.sort!, {:include_blank => 'All'}, style:"width:150px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :sign_name_eq, "Sign Name" %></br>
<%= f.select :sign_name_eq, Product.all.map(&:sign_name).uniq.sort!, {:include_blank => 'All'}, style:"width:150px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :gender_eq, "Gender" %></br>
<%= f.select :gender_eq, Product.all.map(&:gender).uniq.sort!, {:include_blank => 'All'}, style:"width:100px" %>
</div>
<div style="float:right;">
</br>
</div>
</div>
<table id="list-title" class="clear-both">
<thead>
<tr class="title">
<td class="title">
<div><b>Products List</b></div>
</td>
</tr>
</thead>
</table>
<table id="list">
<thead>
<tr>
<th class='cell-width-10'>Size</th>
<th>Sign Type</th>
<th class='cell-width-20'>Group Name</th>
<th>Sign Name</th>
<th class="cell-width-5">Gender</th>
<th class="cell-width-5" title="Click to change Active status">Active</th>
<th class="cell-width-10">Tools</th>
</tr>
<tr class="inline-search">
<th><%= f.text_field :sign_type_size_cont, class: 'cell-width-10' %></th>
<th><%= f.text_field :sign_type_name_cont, class: 'cell-width-99-p' %></th>
<th><%= f.text_field :group_name_cont, style: 'width: 21em;' %></th>
<th><%= f.text_field :sign_name_cont, class: 'cell-width-99-p' %></th>
<th><%= f.text_field :gender_cont, class: 'cell-width-5' %></th>
<th><%= f.text_field :active_eq, class: 'cell-width-5' %></th>
<th>
<%= f.submit "Search", :title => "Apply Search Criteria" %>
<%= link_to(image_tag('cancel.png', :title => "Reset the search fields", class: 'cancel')) %></th>
<% end %>
</tr>
</thead>
<tbody class="inner-product-index">
<%= render partial: "index" %>
</tbody>
</table>
<br />
<%= link_to 'New Product', new_product_path, remote: true, :class => "button button-rounded button-tiny" %>
<div>
<%= paginate @products %>
</div>
<div id="product-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-center">
<div id="inner-product-modal" class="modal-content">
</div>
</div>
</div>
_index.html.erb
<% @products.each do |product| %>
<tr class="<%= cycle('even', 'odd') %>">
<td><%= product.sign_type.size %></td>
<td><%= product.sign_type.name %></td>
<td><%= product.group_name %></td>
<td><%= product.sign_name %></td>
<td class=""><%= product.gender %></td>
<td><%= product.active == true ? icon('check-circle-o', '', id: 'choose_cs', class: 'fa-3x green show-hand', data: { id: product.id, active: true }) : icon('times-circle-o', '', id: 'choose_cs', class: 'fa-3x red show-hand', data: { id: product.id, active: false }) %></td>
<td>
<%= link_to image_tag('eye.png'), product, {:title => "Show Product Info"} %>
<%= link_to image_tag('pencil.png'), edit_product_path(product), {remote: true, :title => "Edit Product Attributes"} %>
</td>
<!-- <td><%#= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td> -->
</tr>
<% end %>
_edit.html.erb
<div class="modal-header">
<h1><%= "Editing Product" %></h1>
</div>
<%= render "form" %>
_form.html.erb
<%= form_for(@product, remote: true, html: {style: "display:inline"}) do |ff| %>
<div class="modal-body">
<ul class="errors"></ul>
<!-- <div class="row field" style="border: 2px solid #8ec640;"> -->
<div class="field-small margin-right-20">
<%= ff.label :sign_name, "Sign Name" %><br />
<%= ff.text_field :sign_name %>
</div>
<div class="field-small margin-right-20">
<%= ff.label :sign_type_id, "Sign Type" %><br />
<%= ff.collection_select :sign_type_id, SignType.all, :id, :name, prompt: 'Choose...' %>
</div>
<div style="float:left">
<div class="field-small margin-right-40" style="margin-right: 70px;">
<%= ff.label :group_name, "Group" %><br />
<%= ff.select :group_name, Product::GROUPS, {prompt: "Choose..."} %>
</div>
<div class="field-small">
<%= ff.label :gender, "Gender" %><br />
<%= ff.select :gender, Product::GENDERS, {prompt: "Choose..."} %>
</div>
</div>
</div>
<!-- </div> -->
<div class="modal-footer">
<%= button_tag "Cancel", class: "btn btn-default", data: {dismiss: "modal"} %>
<%= ff.submit "Save", class: "btn btn-primary" %>
</div>
<% end %>
update.js.erb
<%= render "save" %>
_save.js.erb
$("ul.errors").html("");
<% if @product.errors.any? %>
<% @product.errors.full_messages.each do |message| %>
$("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
<% end %>
<% else %>
$(".inner-product-index").html("<%= escape_javascript(render 'index') %>");
$("#product-modal").modal("hide");
<% end %>
products_controller.rb
class ProductsController < ApplicationController
def index
@search = Product.search(params[:q])
@search.sorts = 'sign_type_id asc' if @search.sorts.empty?
@products = @search.result(distinct: true).page(params[:page]).per(50)
respond_to do |format|
format.html # index.html.erb
format.json { render json: @products }
format.js #index.js.erb
end
end
def new
@product = Product.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: @product }
format.js # new.js.erb
end
end
def edit
@product = Product.find(params[:id])
respond_to do |format|
format.html # edit.html.erb
format.json { render json: @product }
format.js # edit.js.erb
end
end
def create
@search = Product.search(params[:q])
@search.sorts = 'sign_type_id asc' if @search.sorts.empty?
@products = @search.result(distinct: true).page(params[:page]).per(50)
@product = Product.new(params[:product])
respond_to do |format|
if @product.save
format.html { redirect_to @product, notice: 'Product was successfully created.' }
format.json { render json: @product, status: :created, location: @product }
format.js
else
format.html { render action: "new" }
format.json { render json: @product.errors, status: :unprocessable_entity }
format.js
end
end
def update
@search = Product.search(params[:q])
@search.sorts = 'sign_type_id asc' if @search.sorts.empty?
@products = @search.result(distinct: true).page(params[:page]).per(50)
@product = Product.find(params[:id])
respond_to do |format|
if @product.update_attributes(params[:product])
format.html { redirect_to @product, notice: 'Product was successfully updated.' }
format.json { head :no_content }
format.js
else
format.html { render action: "edit" }
format.json { render json: @product.errors, status: :unprocessable_entity }
format.js
end
end
end
试试这个：
在index.html.erb中，将search_form_for的<% end %>移动到之后 </table> 标签。
单独执行这两项工作很好，但是当我有带有模态链接的 Ransack 表单时，模态没有提交到正确的表单（它提交的是 ransack 表单）。
在索引文件中，我在呈现模态的部分之前结束了搜索表单。但是，经过检查，无论我将 <% end %> 放在哪里作为搜查表单，表单标签都会在页面末尾关闭。因此，当调用模态时，它不会呈现 form_for（但奇怪的是，它会呈现隐藏的 div）。
我尝试通过 js 提交表单，但由于它甚至没有被渲染，所以什么也没有。我想知道这是否是一个搜查问题，因为 <%end%>() 不在我放置它的位置，或者是否有任何可能的解决方法，因为我真的很想同时拥有这两种功能。
index.html.erb
<%= search_form_for @search, url: products_path, html: {method: :get} do |f| %>
<div class="min-width-1200">
<div class='float-left'>
</br>
</div>
<div class='float-left margin-left-120 field-small'>
<%= f.label :sign_type_size_eq, "Size" %></br>
<%= f.select :sign_type_size_eq, SignType.all.map(&:size).uniq.sort!, {:include_blank => 'All'}, style:"width:130px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :sign_type_size_eq, "Sign Type" %></br>
<%= f.collection_select :sign_type_id_eq, SignType.all, :id, :name, {:include_blank => 'All'}, style:"width:150px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :group_name_eq, "Group Name" %></br>
<%= f.select :group_name_eq, Product.all.map(&:group_name).uniq.sort!, {:include_blank => 'All'}, style:"width:150px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :sign_name_eq, "Sign Name" %></br>
<%= f.select :sign_name_eq, Product.all.map(&:sign_name).uniq.sort!, {:include_blank => 'All'}, style:"width:150px" %>
</div>
<div class='float-left margin-left-20 field-small'>
<%= f.label :gender_eq, "Gender" %></br>
<%= f.select :gender_eq, Product.all.map(&:gender).uniq.sort!, {:include_blank => 'All'}, style:"width:100px" %>
</div>
<div style="float:right;">
</br>
</div>
</div>
<table id="list-title" class="clear-both">
<thead>
<tr class="title">
<td class="title">
<div><b>Products List</b></div>
</td>
</tr>
</thead>
</table>
<table id="list">
<thead>
<tr>
<th class='cell-width-10'>Size</th>
<th>Sign Type</th>
<th class='cell-width-20'>Group Name</th>
<th>Sign Name</th>
<th class="cell-width-5">Gender</th>
<th class="cell-width-5" title="Click to change Active status">Active</th>
<th class="cell-width-10">Tools</th>
</tr>
<tr class="inline-search">
<th><%= f.text_field :sign_type_size_cont, class: 'cell-width-10' %></th>
<th><%= f.text_field :sign_type_name_cont, class: 'cell-width-99-p' %></th>
<th><%= f.text_field :group_name_cont, style: 'width: 21em;' %></th>
<th><%= f.text_field :sign_name_cont, class: 'cell-width-99-p' %></th>
<th><%= f.text_field :gender_cont, class: 'cell-width-5' %></th>
<th><%= f.text_field :active_eq, class: 'cell-width-5' %></th>
<th>
<%= f.submit "Search", :title => "Apply Search Criteria" %>
<%= link_to(image_tag('cancel.png', :title => "Reset the search fields", class: 'cancel')) %></th>
<% end %>
</tr>
</thead>
<tbody class="inner-product-index">
<%= render partial: "index" %>
</tbody>
</table>
<br />
<%= link_to 'New Product', new_product_path, remote: true, :class => "button button-rounded button-tiny" %>
<div>
<%= paginate @products %>
</div>
<div id="product-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-center">
<div id="inner-product-modal" class="modal-content">
</div>
</div>
</div>
_index.html.erb
<% @products.each do |product| %>
<tr class="<%= cycle('even', 'odd') %>">
<td><%= product.sign_type.size %></td>
<td><%= product.sign_type.name %></td>
<td><%= product.group_name %></td>
<td><%= product.sign_name %></td>
<td class=""><%= product.gender %></td>
<td><%= product.active == true ? icon('check-circle-o', '', id: 'choose_cs', class: 'fa-3x green show-hand', data: { id: product.id, active: true }) : icon('times-circle-o', '', id: 'choose_cs', class: 'fa-3x red show-hand', data: { id: product.id, active: false }) %></td>
<td>
<%= link_to image_tag('eye.png'), product, {:title => "Show Product Info"} %>
<%= link_to image_tag('pencil.png'), edit_product_path(product), {remote: true, :title => "Edit Product Attributes"} %>
</td>
<!-- <td><%#= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td> -->
</tr>
<% end %>
_edit.html.erb
<div class="modal-header">
<h1><%= "Editing Product" %></h1>
</div>
<%= render "form" %>
_form.html.erb
<%= form_for(@product, remote: true, html: {style: "display:inline"}) do |ff| %>
<div class="modal-body">
<ul class="errors"></ul>
<!-- <div class="row field" style="border: 2px solid #8ec640;"> -->
<div class="field-small margin-right-20">
<%= ff.label :sign_name, "Sign Name" %><br />
<%= ff.text_field :sign_name %>
</div>
<div class="field-small margin-right-20">
<%= ff.label :sign_type_id, "Sign Type" %><br />
<%= ff.collection_select :sign_type_id, SignType.all, :id, :name, prompt: 'Choose...' %>
</div>
<div style="float:left">
<div class="field-small margin-right-40" style="margin-right: 70px;">
<%= ff.label :group_name, "Group" %><br />
<%= ff.select :group_name, Product::GROUPS, {prompt: "Choose..."} %>
</div>
<div class="field-small">
<%= ff.label :gender, "Gender" %><br />
<%= ff.select :gender, Product::GENDERS, {prompt: "Choose..."} %>
</div>
</div>
</div>
<!-- </div> -->
<div class="modal-footer">
<%= button_tag "Cancel", class: "btn btn-default", data: {dismiss: "modal"} %>
<%= ff.submit "Save", class: "btn btn-primary" %>
</div>
<% end %>
update.js.erb
<%= render "save" %>
_save.js.erb
$("ul.errors").html("");
<% if @product.errors.any? %>
<% @product.errors.full_messages.each do |message| %>
$("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
<% end %>
<% else %>
$(".inner-product-index").html("<%= escape_javascript(render 'index') %>");
$("#product-modal").modal("hide");
<% end %>
products_controller.rb
class ProductsController < ApplicationController
def index
@search = Product.search(params[:q])
@search.sorts = 'sign_type_id asc' if @search.sorts.empty?
@products = @search.result(distinct: true).page(params[:page]).per(50)
respond_to do |format|
format.html # index.html.erb
format.json { render json: @products }
format.js #index.js.erb
end
end
def new
@product = Product.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: @product }
format.js # new.js.erb
end
end
def edit
@product = Product.find(params[:id])
respond_to do |format|
format.html # edit.html.erb
format.json { render json: @product }
format.js # edit.js.erb
end
end
def create
@search = Product.search(params[:q])
@search.sorts = 'sign_type_id asc' if @search.sorts.empty?
@products = @search.result(distinct: true).page(params[:page]).per(50)
@product = Product.new(params[:product])
respond_to do |format|
if @product.save
format.html { redirect_to @product, notice: 'Product was successfully created.' }
format.json { render json: @product, status: :created, location: @product }
format.js
else
format.html { render action: "new" }
format.json { render json: @product.errors, status: :unprocessable_entity }
format.js
end
end
def update
@search = Product.search(params[:q])
@search.sorts = 'sign_type_id asc' if @search.sorts.empty?
@products = @search.result(distinct: true).page(params[:page]).per(50)
@product = Product.find(params[:id])
respond_to do |format|
if @product.update_attributes(params[:product])
format.html { redirect_to @product, notice: 'Product was successfully updated.' }
format.json { head :no_content }
format.js
else
format.html { render action: "edit" }
format.json { render json: @product.errors, status: :unprocessable_entity }
format.js
end
end
end
试试这个：
在index.html.erb中，将search_form_for的<% end %>移动到之后 </table> 标签。