CODEWITHSUNDEEP
javascriptjqueryruby-on-railstwitter-bootstrap
Zoinks10
Zoinks10

Reputation: 629

Use the same bootstrap modal to both add a new object and edit that object

I have a Rails app where I'm adding new objects to a parent Object using Bootstrap modals and Jquery. This now works fine for the 4 different child objects I wish to add (I have 4 separate modals rendered on the parent object page). I'd like to re-use the same modals to render the edit form (rather than the new form), without adding 4 extra (mostly identical) modals to my page. Is this possible?

Modal example:

<!-- modal for inputting a new company -->
<div class="modal fade" id="company_modal" tabindex="-1" role="dialog" aria-labelledby="company_modal" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">Add new company</h4>
      </div>
      <div class="modal-body">
        <%= render 'companies/modal' %>
      </div>
    </div>
  </div>
</div>

Companies/Modal code:

<%= form_for(@company, :html => {role: :form, 'data-model' => 'company'}, remote: true) do |f| %>
        <% if @company.errors.any? %>
          <div id="error_explanation">
            <h2><%= pluralize(@company.errors.count, "error") %> prohibited this company from being saved:</h2>

            <ul>
            <% @company.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
            </ul>
          </div>
        <% end %>
     <div class="form-group">
        <%= f.label :company_name, :class => "control-label" %></br>
         <%= f.text_field :company_name, :class => 'form-control' %>
         <span class="help-block"></span>
      </div>
        <div class="checkbox input">
            <label>
            <%= f.check_box :existing_customer %> Existing Customer?
            </label>
        </div>
      <div id="organization_id" data-organizationid="<%= @current_user.organization.id %>">
        <%= f.hidden_field :organization_id%>
      </div>
      <div class="actions">
        <%= f.submit "Save", class: "btn btn-sm btn-success" %>
      </div>
    <% end %>

Current Javascript:

$(document).ready(function () {
$('#competitor_modal').on('show');
 $('.modal').on('shown.bs.modal', function() {
$("#competitor_competitor_name").focus();
var Org;
Org = $('#organization_id').attr('data-organizationid');
 //pass the organization_id to the hidden text box
$('#competitor_organization_id').val(Org);
});
});

$(document).ready(function(){

  $(document).bind('ajaxError', 'form#new_competitor', function(event, jqxhr, settings, exception){

// note: jqxhr.responseJSON undefined, parsing responseText instead
$(event.data).render_form_errors( $.parseJSON(jqxhr.responseText) );

 });

});

I presume I'd have to change the Javascript used in Organization.js so that it could determine whether the request has come from the "Add new company" button or whether it's come from the "Edit company" button. Is this best practice or am I just being an idiot?

Upvotes: 1

Views: 2341

Answers (2)

nettutvikler
nettutvikler

Reputation: 604

I think your idea is in the right direction and NO, you are not an idiot :)

Presonally I would think about following:

  1. clear content of #company_modal - leaving just "skeleton" - placers for content that we want to manipulate dynamically,
  2. write a common JQ function for rendering modal window (allowing all parameters such as title, content, buttons,...
  3. write JQ functions for create/read/update/delete (CRUD) calling same JQ modal rendering function with different parameters and different actions,
  4. write functions that delegate events and actions (assign actions to dynamic buttons in modal that allow calling functions for CRUD.

It seems a lot but I think it's way better and modular than just creating different modals for different actions etc.

But one must plan it really good (what would be exact look and feel, what fields, what variables,...)

Upvotes: 1

argentum47
argentum47

Reputation: 2382

Answer to one of your questions, "determine whether the request has come from the "Add new company" button or whether it's come from the "Edit company" would be to use

params[:controller]
params[:action]

to determine the controller action targeted. Or use a session variable or some param[:from_where_name] and check it in the js. Worst case use a hidden field or some data-field to pass the desired value.

Upvotes: 0

Related Questions