在Bootstrap模式中添加Rails Ajax编辑表单

时间:2015-08-24 19:46:34

标签: ruby-on-rails ajax forms modal-dialog

我正在尝试在我的Rails 4应用程序中的Bootstrap模式中添加“新类别”表单。我试图从herehere实施系统,但我被卡住了。理想情况下,我想添加类别,关闭模态并将新类别自动附加到当前类别列表。目前,我无法使用jQuery在模式中加载表单。

index.html.erb

<div class="container">
  <ul id='categories'>
    <%= render partial: @categories.order(title: :asc) %>
  </ul>
</div>        

<%= render 'category_modal' %>

_category.html.erb

<li> 
  <%= category.title %>      
  <%= link_to 'EDIT', edit_category_path(category) ,  class: 'btn btn-xs btn-warning pull-right', remote: true %>
</li>

_category_modal.html.erb

<div class= "modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="ajaxModal"  >
  <div class="modal-dialog">
    <div id='content' class='modal-content'>

    </div>
  </div>
</div>

_edit_category.html.erb

<div class="modal-header">
  <button type="button" class="btn btn-default  btn-xs pull-right" data-dismiss="modal" >
    Cancel
  </button>
  <h2> EDIT CATEGORY </h2>           
  <div class="modal-body">
    <div class="modal-body-content">
        <%= render 'form' %>
    </div>
  </div>
</div>

_form.html.erb

<%= simple_form_for [@category] , remote: true do |f|  %>
  <div class="panel-body" >
      <div class="form-group" >

      <%= f.input :title, label: 'Category Title',  focus: true, id: 'category_title' %>
      </div>
      <div class="form-group" >

     <%= f.button :submit, value: 'SAVE CHANGES  ', :class => 'btn btn-info btn-md ' %>
      </div>
    <hr>
    <%if @categories.present? %>
      <div class="form-group" >
        <h4>
          Existing Catgegories
        </h4>

        <div class="row" >

         <% @categories.order(title: :asc).each do |category| %>

                <%= category.title %>
        </div>
      </div>

edit.js.erb

$("#ajaxModal").modal("show")
$('#content').html("<%= escape_javascript(render 'edit_category', :object => @category) %>");

categories_controller.rb

  def index
    @categories = Category.all.order(title: :asc)
     respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @categories }
    end
  end



def edit
  @category = Category.find(params[:id])
  respond_to do |format|
    format.html
    format.js
  end
end

def update
    @category = Category.find(params[:id])

    respond_to do |format|
      if @category.update_attributes(category_params)
        format.html { redirect_to(categories_path, :notice => 'Category was successfully updated.') }
        format.xml  { head :ok }
      else
        format.html { render :action => "edit" }
        format.xml  { render :xml => @category.errors, :status => :unprocessable_entity }
      end
    end
  end

0 个答案:

没有答案