CODEWITHSUNDEEP
ruby-on-railsajaxformsmodal-dialog
NothingToSeeHere
NothingToSeeHere

Reputation: 2363

Add Rails Ajax EDIT Form In Bootstrap Modal

I am trying to put a "new category" form in a Bootstrap modal in my Rails 4 app. I've tried to implement the systems from here and here, but I'm stuck. Ideally, I'd like to add the category, close the modal and have the new category automatically append to the current list of categories. Currently, I can't get the form to load in the modal using 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

Upvotes: 0

Views: 2851

Answers (1)

NothingToSeeHere
NothingToSeeHere

Reputation: 2363

I ended up using Dmitriy Dudkin's really elegant solution here. The way he does it, you don't have to include the modal on each page...just call it programatically. It's awesome.

Upvotes: 1

Related Questions