javascript - 使用 Bootstrap 模式 ajax 表单问题进行搜查搜索

标签 javascript ruby-on-rails ajax twitter-bootstrap 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>之后标签。

关于javascript - 使用 Bootstrap 模式 ajax 表单问题进行搜查搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28617332/

相关文章:

jquery - 如果使用 jquery ajax 创建,则 css 类不可见

javascript - 在 REACT 中将数据发送到其后代的最佳方法是什么

javascript - HTML - 如何显示下拉菜单中的选定值并将其定向到新的 HTML 页面

javascript - Aurelia 1.0 路由 configureRouter 从未调用过

ruby-on-rails - ruby rails : Generate HTML for each file in a folder

ruby-on-rails - rails View : Idiomatic way to show description for an association object that can be null?

javascript - 为什么我的 javascript 参数没有传递 "by reference"?

ruby-on-rails - 用户、公司、介绍人之间的关系模型

javascript - Bootstrap 模式不适用于循环场景

java - 处理来自 Servlet 的 Jquery AJAX 响应中的异常