在同一视图中创建并显示相同的对象

时间:2018-06-11 05:14:16

标签: ruby-on-rails ruby bootstrap-modal

我正在开发一个Rails应用程序,我需要创建一个"解决方案"当我创建此解决方案时,在同一视图中显示相同的对象,但这次使用保存的字段(例如图像和标题)。

每次我保存解决方案时,重定向到另一个视图,我用远程更改了它:在表单中为true,现在使用ajax创建解决方案而不关闭模态而不渲染到另一种方式,但仍然没有更新@solution变量可以立即看到这种变化。

我在解决方案/新视图中这样做,我调用一个模态来填充表单并创建对象,我的问题是我不知道如何使用我的字段更新@solution实例在视图中创建和显示而不对页面进行充值,我正在考虑使用单例模式来执行此操作。

solution_controller.rb

# GET /solutions/new
def new
   @solution = Solution.new # This need to be created and then show the data in the view but without refresh the page. 
   @company = current_user.company
   @industry_branches = IndustryBranch.all
   @solutions = current_user.company.solutions.all
end

# POST /solutions
# POST /solutions.json
def create
  @solution = current_user.company.solutions.new(solution_params)
  @solution.industry_branches << 
  IndustryBranch.find(solution_params[:industry_branch_ids])
  respond_to do |format|
    if @solution.save
      format.html { redirect_to new_benefit_path(:solution_id => @solution.id), notice: 'Solution was successfully created.' }
      format.json { render :show, status: :created, location: @solution }
      format.js { render template: 'benefits/new' }
    else
      format.html { render :new }
      format.json { render json: @solution.errors, status: :unprocessable_entity }
    end
  end
end

模态

<div class="modal fade" id="solution-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Añadir solucion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
        </button>
      </div>
  <%= form_with(model: @solution, remote: true) do |form| %>
    <div class="modal-body">
        <% if @solution.errors.any? %>
            <div id="error_explanation">
            <h2><%= pluralize(@solution.errors.count, "error") %> prohibited this solution from being saved:</h2>

            <ul>
            <% @solution.errors.full_messages.each do |message| %>
                <li><%= message %></li>
            <% end %>
            </ul>
            </div>
        <% end %>

        <div class="form-group">
            <%= form.label "Titulo" %>
            <%= form.text_field :title, class:"form-control" %>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col">
                    <label for="recipient-name" class="custom-green">Industria</label>
                    <input type="text" class="form-control" id="recipient-name" disabled 
                    value="<%=current_user.company.industries.first.name%>">
                </div>
                <div class="col">
                    <%= form.collection_select :industry_branch_ids, @industry_branches, :id, :name, 
                    {:prompt => 'Categorias'},{:class => 'form-control top-space', :id => 'industry_branch_selection'} %>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="message-text" class="col-form-label custom-green">Solucion</label>
            <p>Como ayudaste a tus clientes, explica en una oración que servicios ofreciste o como
            fue usado tu producto</p>
            <%= form.text_area :description, class:"form-control" %>
        </div>

        <div class="form-group image-upload">
            <label for="message-text" class="col-form-label custom-green">Añadir foto</label>
            <p>Selecciona una imagen que ayude a comprender el servicio que ofreces</p>
            <label for="up_logo">
            <span style="font-size:2em;">
                <%= image_tag  "upload_picture.png", size: "96x64" %>
            </span>
            </label>
            <%= form.file_field :picture, id:"up_logo" %>
            <%= form.label "hola", class:"text-secondary", style:"margin-left: 0.8em;"%>
            <label for="" id="lbl-file"></label>
        </div>
    </div>
  <div class="modal-footer actions">
    <%= form.submit "Guardar", class:"btn btn-c-green", remote: true %>
  </div>
  <% end %>
</div>

0 个答案:

没有答案
相关问题