为什么带有ajax的模态没有正确关闭?

时间:2018-01-15 23:11:13

标签: javascript ruby-on-rails ajax ruby-on-rails-4 ruby-on-rails-5

我需要帮助,我已经尝试了很多方面(其中有几个是在论坛而没有)

在索引中我有一个link_to,其中我打开模态,下面是具有模态id的div。

index.html.erb

<%= link_to 'Nuevo equipo', new_team_path, {class:"btn btn-success",:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window-new' } %>
...
<div id="modal-window-new" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

new.js.erb

<% @tipo = 'Nuevo Equipo'
  js = escape_javascript(
  render(partial: 'teams/form', locals: {  team: @team  })
) %>
$("#modal-window-new").html("<%= js %>");

_form.html.erb

<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
          <h5 class="modal-title" ><%= @tipo %></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
       </div>
       <%= form_for team, remote: true do |form| %>
       <div class="modal-body">

        <%= form.label  "Obligatorio (*)", class: "col-form-label" %>
         <div class="modal-body">
            <% if team.errors.any? %>
            <div class="form-group">
              <strong><%= pluralize(team.errors.count, "error/es") %> antes de agregar un equipo:</strong><br>
                <% team.errors.full_messages.each do |message| %>
                  <%= message %><br>
                <% end %>
              </div>
            <% end %>
          </div>

        <div class="form-group">
          <%= form.label :nombre_equipo, "Nombre Equipo*", class: "col-form-label" %>
          <%= form.text_field :nombre_equipo, class: "form-control",  id: :team_nombre_equipo %>
        </div>

        <div class="form-group">
          <%= form.label :ciudad_equipo, "Ciudad Equipo*", class: "col-form-label" %>
          <%= form.text_field :ciudad_equipo, class: "form-control", id: :team_ciudad_equipo %>
        </div>

        <div class="form-group">
          <%= form.label :restriccion_horario, "Restricción Horario", class: "col-form-label" %>
          <%= form.text_field :restriccion_horario, class: "form-control", id: :team_restriccion_horario %>
        </div>

        <div class="form-group">
          <%= form.label :camiseta, class: "col-form-label" %>
          <%= form.text_field :camiseta, class: "form-control", id: :team_camiseta %>
        </div>

        <div class="form-group">
          <%= form.label :pantaloneta, class: "col-form-label" %>
          <%= form.text_field :pantaloneta, class: "form-control", id: :team_pantaloneta %>
        </div>

        <div class="form-group">
          <%= form.label :medias, class: "col-form-label" %>
          <%= form.text_field :medias, class: "form-control", id: :team_medias %>
        </div>

        <script>
          $(document).ready(function() {
          $("select#team_select").select2();
          }); </script>

        <div class="form-group">
            <%= form.label :delegate_id, "Delegado:*" %>
         <%#= form.select(:delegate_id, Delegate.all, :id, :nombre, {include_blank: "None"}, {id: "team_select"}) %>
         <%= collection_select(:team, :delegate_id, Delegate.all, :id, :nombre_del_completo, {:multiple => false, :include_blank => true}, {class: "form-control", id: "team_select"})%><br><br>
        </div>

       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <%= form.submit "Guardar", class: "btn btn-success"%>
       </div>
       <% end %>
    </div>
</div>

他尝试了

  $('#modal-window-new').modal('hide');

我们已经在服务器上安装了应用程序,因此模式不会被关闭。

非常感谢你!

-------------------------------------------- -

升级

update.js.erb

<% if not @team.errors.any? %>
  $('#modal-window-new').modal('hide');
  console.info($('#modal-window-new'));
<% else %>
  <% @tipo = 'Editar Equipo'
    js = escape_javascript(
    render(partial: 'teams/form', locals: {  team: @team  })
  ) %>
  $("#modal-window-edit").html("<%= js %>");
<% end %>

1 个答案:

答案 0 :(得分:0)

表单提交后,update.js正在呈现。你必须把js语句放在那里:

$('#modal-window-new').modal('hide');

如果要创建新模型,则必须将其添加到create.js文件中。

在您的情况下可能位于/ app / views / teams /...

更好的update.js或create.js是处理模型的:

<% if not @team.errors.any? %>
  $('#modal-window-new').modal('hide');
  // do other updates here
<% else %>
  $('#modal-window').show();
  // todo: render partial again into the modal
<% end %>
// todo: show some errors