Bootstrap Modal veri kapanmıyor Kapatma (Rails)

Question

Bir düzenleme modeliyle bir ray uygulamasına sahibim. Gönderme işlevi çalışır, ancak yakın düğmeler hiçbir şey yapmaz.

Edit.js.erb:

$("#modal-window").html("<%= escape_javascript(render 'users/edit') %>"); 

_edit.html.erb

<div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
<%= form_for @user,url: root_path,:method => :GET do |f|%> 
    <%= f.label :password %> 
    <%= f.password_field :password, class: 'form-control' %> 
    <%= f.submit "Save changes", class: "btn btn-primary" %> 
    <%# submit_tag 'Cancel', :type => :reset, :class => "btn btn-danger", "data-dismiss" => "modal", "aria-hidden" => "true" %> 
<% end %> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

açılır ve modal

<%= link_to 'Edit Password', edit_path(user.id), {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} 

...... 


<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

ev görünümden hatlar

Ayarlanmış taşlar var. //= require bootstrap/modal ve //= require jquery benim application.js

Düzenleme şunlardır: Tam Rails 4 uygulama sürümüyle çalışacak bootstrap-modal-rails taş gibi

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 
// vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. JavaScript code in this file should be added after the last require_* statement. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require rails-ujs 
//= require turbolinks 
//= require_tree . 
//= require bootstrap/modal 
//= require jquery 

Answer 1

application.js, sadece Bootstrap kullanarak düşünebiliriz Çalışmak için modalar.

Bir modal div oluşturabilir, ardından denetleyicideki belirli bir yönteme bir istekte bulunacak olan düğmeyi ekleyiniz, bu bir js dosyasıyla yanıt verecektir, bu da modal div'i dolduracak kısmi hale getirecektir. index.html.erb Belirleyebileceğiniz senin içinde

link_to helper:

<%= link_to 'Edit Password', edit_path(user), remote: true, data: { toggle: 'modal', 'target': '#modal-window' } %> 
... 
<!-- Modal --> 
<div class="modal fade " id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 

Bu, bu durumda UsersController yılında edit yönteme tepki birini yolunu belirtir, başlamak için remote: true seçeneği eklemek Bu yönteme asenkronize bir istek ve veri nitelikleri olarak data-toggle ve data-target belirtilir.

Sonra dilerseniz alt, siz "açıldı" olmak link_to yardımcısı ile id ve data-target yılında #modal-window bir önyükleme modal olarak çalışmaya setted div, ve hangi çoğu maç oluşturabilirsiniz.

link_to tanımlanan oluyor rota bir id beklediğini ve kısa bir sürümünü oluşturmak için takma seçeneğini kullanın

:

Sizin kontrolör sadece JavaScript, sadece cevap verecektir yöntemi, edit, ihtiyacı

get 'users/edit/:id', to: 'users#edit', as: 'edit' 

def edit 
    @user = User.find(params[:id]) 
end 

edit gibi cevaplar json formatında, o zaman aynı ada sahip bir dosya oluşturmak gerekir: gönderilen id param alır senin yöntemin artı uzatma js ve erb nedeniyle, bu edit.js.erb ve _edit kısmi render ve kalıcı göstermek için kod içerir: eklenecektir içeriğe sahip olacak

$("#modal-window").html("<%= j render 'users/edit' %>"); 
$('#modal-window').modal('show') 

Son olarak _edit kısmi div modal bu kolayca .modal-body div, ince ayara tabi tutulabilir, önce oluşturulan, bu nedenle formu ekleyebilirsiniz: Eğer Gemfile dosyaya taş eklemek gerekir, böylece bu Bootstrap bağlıdır

<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 

    <div class="modal-body"> 
     <%= form_for @user, url: edit_path do |f|%> 
     <%= f.label :password %> 
     <%= f.password_field :password, class: 'form-control' %><br> 
     <%= f.submit "Save changes", class: "btn btn-primary" %> 
     <% end %> 
    </div> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
</div> 

Not ve CONFIGUR e js ve css uygulama dosyaları hem: application.js de

# Gemfile 
gem 'bootstrap-sass' 

# application.js 
//= require jquery 
//= require bootstrap-sprockets 

# application.scss 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 

, önyükleme jQuery bağlı olarak, bu açılışta bir eklenmesi gerekir ve css yapılandırma için, dosya için scss olmalıdır Uygun import 's yapmak.